I have Angular 5 application and I am using PrimeNG components. I created the PrimeNG accordion with defined header where are the title and some action buttons, like this:
<p-accordion>
<p-accordionTab>
<p-header>
<span>Some card title</span>
<p-button title="Delete" (onClick)="deleteCard()"></p-button>
</p-header>
</p-accordionTab>
</p-accordion>
Issue is that when I click on the button inside accordion header, the particular accordionTab fire toggle open/close click event, which looks very weird. How I can separate these two clicks?
Thanks for advice.
I know this is an old post, but I'm posting for anyone that comes across this like I did.
In the click method of the button, add $event.stopPropagation(); followed by your own event, such as deleteCard() like in OPs post.
<p-accordion>
<p-accordionTab>
<p-header>
<span>Some card title</span>
<p-button title="Delete" (onClick)="$event.stopPropagation(); deleteCard()"></p-button>
</p-header>
</p-accordionTab>
</p-
Related
Is it possible to customize 'clear' button in form runner? I want to keep some default values in form (after user clics on this button), and I want to 'clear' button leave those values and doesn't clear them.
Now I want to add refresh button or add refresh action to clear button. In my properties I have line:
<property
as="xs:string"
name="oxf.fr.detail.buttons.*.*"
value="refresh pdf save-draft review workflow-send"/>
But unfortunately in form runner I don't see refresh button
If you add 'fr:buttons' tag into your form, you're able to add your own buttons. This tag should be placed in '<fr:view>' just after the '</fr:body>'. If you have configured the property oxf.fr.detail.buttons.*.* to define the buttons that you want to show, it will override it. You have to explicitly place the buttons that you want to show, e.g. <fr:save-button/>.
I've created a quick example to show it. The following fr:buttons would show a custom clean button together with Orbeon's 'Save' and 'PDF' buttons:
<fr:buttons xmlns:oxf="http://www.orbeon.com/oxf/processors"
xmlns:p="http://www.orbeon.com/oxf/pipeline"
xmlns:xbl="http://www.w3.org/ns/xbl">
<fr:button>
<xf:label ref="'Clear'"/><!--You can change it to a localized path-->
<xf:action ev:event="DOMActivate">
<!--Clean fields, but keep values for lastname and phone fields-->
<xf:setvalue xxf:iterate="instance('fr-form-instance')/section-1/*[name()!='lastname' and name()!='phone']"/>
</xf:action>
</fr:button>
<fr:pdf-button/> <!--Orbeon PDF button-->
<fr:save-button/> <!--Orbeon save button-->
</fr:buttons>
You can see another example about custom buttons in the following link: http://wiki.orbeon.com/forms/how-to/fb-fr/form-builder-wizard
I am trying to add a few "next" and "back" buttons to a form. The Idea is to divide the filling-out process into several steps and with these buttons, the div of the current step gets hidden and the next resp. previous step is displayed.
My Problem is that when I add buttons in the following way...
<button class="proceed_button" id="loan_information">Proceed</button>
<button class="cancel_button" id="loan_information">Cancel</button>
... they submit the form.
Is every button inside a form-tag considered to be a submit-button?
If so, how can I change this behavior?
If not, why are they doing it then?
Ok, the solution is that the button needs a type.
<button type="button" class="proceed_button" id="loan_information">Proceed</button>
<button type="button" class="cancel_button" id="loan_information">Cancel</button>
Like this, it won't submit the form anymore.
According to http://w3schools.com/html5/att_button_type.asp the default type is depending on the browser, so you should always specify the type.
I'm not sure that you want a button, maybe you want it to look like a button. Either way, refer to this post: rails 3: display link as button?
Once you have your button, you'll need to update your javascript to prevent anything from happening when it's clicked (assuming you have jquery). It's still nice to provide a real fallback for those dinosaurs without js, so assuming your proceed button submits for users without js, for those with js you'd do something like:
$('#proceed_button').click(function(e) { e.preventDefault(); // Show and hide your divs here });
Also note that in your posted code you should not have two buttons with the same id, your ids and classes look swapped.
I'm using the Facebook Like/Send buttons along with dynamically generated HTML (loaded via AJAX requests). I've found that even though the Send button works fine when the element exists on page load, dynamically created Send buttons aren't working correctly. Clicking the button activates it and the button greys out, but the popup doesn't appear.
Here is a demonstration of what is happening: http://jsfiddle.net/Daniel15/VxpSj/
Any suggestions?
Thanks!
Yes, I can confirm the problem from your fiddle.
function addLikeButton()
{
// […]
FB.XFBML.parse(newEl);
document.getElementById('container').appendChild(newEl);
}
For some reason, this seems to be “the wrong way around”. Reverse the order of these two lines – put the new element into the DOM first and let FB.XFBML.parse parse it afterwards, then (from my test with your fiddle) it seems to work in the desired way.
i just made new project on facebook using i-frame.i have put fb:comments on my application but the problem is like button with connect parts.I have tried to hide like button from css but could not success.Is there any way to hide?
Thanks
in your custom css, you need the following:
div.like{visibility:hidden;height:0px;}
also works without div (.like{...})
you may have to give your css file a version flag to prevent it from being cached, like this:
css="http://www.yourdomain.com/.../facebook.css?38"
i just don´t know if it is allowed to hide the like button like this...
I have been using JQGrid for about a year now and I love it. Just wondering if someone knows a way to add a button or two that will trigger my own code on a Form Edit page? Not on the grid itself - the edit dialog.
Would I just use the onInitializeForm event?
Thanks!
Jim
I used jQuery to do this. In my case I had a drop-down select item as a field on the edit for and I wanted to add a link next to it. I used the beforeShowForm event.
beforeShowForm: function(form) {
$("#MyDropDownList").after("<a href='#' id='link'>A Link To Something</a>");
},
Hope this helps, even though it's a few weeks late.