I intend to hide a <p:commandbutton> through a jquery form, and I can not access the object primefaces button, the form itself. I'm using primefaces 3.4.
I hide a button: save, in one form, where the button is: edit:
you can use the rendered attribute and set it to false.
<p:commandButton rendered="false"
You can access the button through its ID, just add the display:none css property:
$("#yourButtonsId").css("display", "none);
When the button is inside a form without prependId=false, the button ID is something similar to :testForm1:testButton your jQuery selector will look like this:
$("#testForm1\\:testButton").css("display", "none");
Related
I need to insert an onclick attribute inside the submit button tag. May I know how to insert it? im using wordpress.org & a plugin called wpforms.
http://i63.tinypic.com/103evd0.jpg
This is the code that I need to insert
onclick="return gtag_report_conversion(‘http://example.com/your-link')"
Not sure if WPForms allows changes through hook filters, since I couldn't find in their docs, but you can do this with attaching event via jQuery using '#wpforms-submit-2113' id as selector, or '.wpforms-submit' for more general rule.
jQuery('#wpforms-submit-2113').click(function(){
gtag_report_conversion('http://example.com/your-link');
});
Hi I am working on a Angular4 application and for UI I am using Primeng.
I have a multi-select element which behaves pretty much the same as it does over here https://www.primefaces.org/primeng/#/multiselect
The only thing I want different is on the drop-down, when "X" (close) button is clicked, I want it to clear all the selection instead of closing the drop-down itself.
Is there any way to achieve that in primeng ?
Help is appreciated !
You can manually trigger the checkbox in the left by jquery.
declare var jquery:any;
declare var $ :any;
$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')
or you make the value of the p-multiselect equal to [].
Ex.
//html
<p-multiSelect #multiselect>
<button type="button" (click)="functionToClear(multiselect)"</button>
</p-multiselect>
//ts
functionToClear(multiselect): void {
multiselect.value = [];
}
It isn't possible, but you can clear all the selection by clicking the checkbox in the left corner twice.
While it isn't a supported functionality of the Multiselect PrimeNg component, if you really want it to do that, you would have to manually edit the component, multiselect.js, and modify the close(event) function to do what you want.
you can use formGroup and try to clear value following way:
html:
<ng-multiselect-dropdown [(ngModel)]="data"
[data]="fetchedData" [settings]="customeSettings"
formControlName="myControl">
</ng-multiselect-dropdown>
.ts:
this.form_name.controls.myControl.setValue("");
normally the multi-select input in primeng is binded to a property that holds the selected members, usually an array.
you can use a reset button for example that when clicked, it will empty that propery/array and this will clear all the selected check boxes of the multi-select.
Since PrimeNg version 13, you can use [showClear]="true" property to display an 'X' icon next to the control value.
Scenario: I used component and infront of autcomplete I used one command link with search image.
My purpose is to display cursor in autocomplete after clicking on commandlink.
My code is as follows:
Autocomplete:
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo"
value="#{customerReviewLazyDataModel.customerReviewVO.senderVO}"
completeMethod="#{customerReviewLazyDataModel.searchOrganizations}"
var="senderVO"
itemValue="#{senderVO}" converter="organizationConverterForCustomerReview"
size="60">
commandlink
<p:commandLink oncomplete="setFocus()" ajax="true">
<p:graphicImage value="/app-resources/themes/yob/images/search.png" style="margin-bottom: -4px;"></p:graphicImage>
</p:commandLink>
js function
function setFocus(){
document.getElementById("senderAutocomplete").focus();
}
Is there any solution for this problem?
The ID you are using to get the DOM-element for the input to focus is wrong. First of all you have to consider the id of the form. Additionally the id of the input of a p:autoComplete has a suffix _input. So use this:
document.getElementById("formId:senderAutocomplete_input").focus();
You should also set process="#this" on the commandButton, as you are just using it to focus the autoComplete.
I solved this problem adding a css style class and using jquery (which is included on Primefaces) to set the focus.
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo" ...
*styleClass="focusme"*
/>
And the commandlink would be like this:
<p:commandLink *oncomplete="$('.focusme').focus()"* ajax="true">
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
I am using the drop down in webpage and also the submit button to submit the selected value of the drop down.but i don't want to use the submit button. when i select the value from drop down it should re direct the page without using the submit button. can anyone post the code... i was using select and option tag.
See Navigational pulldown menus in HTML for a comprehensive guide, but in a nutshell:
Bind an onchange JavaScript event handler to the select element that calls the forms submit() method
Don't do this, it is a horrible UI.
You need to use JavaScript to perform this operation.
For example, in jQuery, you could do something similar to:
$(function() {
$('#myDropDownId').change(function() {
$('#formId').submit();
});
});
JQuery:
$('#selectId').change(function(){
if ($(this).val())
$(this).closest('form').submit();
});
If you don't want to use jQuery, you can do this with Javascript. Change your select box to look like this.
<select name="NAME" onchange="this.form.submit();">