i have a p:selectOneRadio
<p:selectOneRadio id="radioTpPunto" value="#{geoWebModel.radioPuntoBtnValue}" widgetVar="selectTipoRicerca">
<f:selectItem itemLabel="P. di Fermo" itemValue="1" />
<f:selectItem itemLabel="P. di Destinazione" itemValue="2" />
<p:ajax listener="#{geoRefCtr.doAction('radioPuntoChange')}" update=":geoForm:panelFiltroPosizione"/>
</p:selectOneRadio>
And everything is working fine when I click the 2 options : my method is called and my model is updated.
Now, I want to "emulate" this behaviour using Javascript and I've tried using something like:
selectTipoRicerca.jq.find('input:radio[value=2]').trigger('click.selectOneRadio');
My backing bean's method is called but the value of my model isn't updating.
Any clues ?
You can give that specific radio an ID and then use:
document.getElementById("myRadio").click();
this will trigger just as if a user clicked the radio button.
If you're using jQuery, you can shorten it to:
$("myRadio").click();
Related
Is there a way to render a component based on the current value the user has selected from a selectOneMenu component? My selectOneMenu component is populated with an enum consisting of two values, smoker and non-smoker. If the user has smoker selected I want to render a checkbox below it which lets the user check how many they smoke a day 10, 20, 30+, etc. I also want the opposite to work if they user has selected non-smoker i.e. the check boxes don't render/disappear.
Just check the dropdown menu's value in the rendered attribute of the target components and update their common parent by a <f:ajax>. Here's a kickoff example:
<h:selectOneMenu value="#{bean.item}">
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
<f:ajax render="results" />
</h:selectOneMenu>
<h:panelGroup id="results">
<h:panelGroup rendered="#{bean.item eq 'one'}">
You have selected "one".
</h:panelGroup>
<h:panelGroup rendered="#{bean.item eq 'two'}">
You have selected "two".
</h:panelGroup>
<h:panelGroup rendered="#{bean.item eq 'three'}">
You have selected "three".
</h:panelGroup>
</h:panelGroup>
If you'd like to perform some business logic based on the selected value, use <f:ajax listener>.
<f:ajax listener="#{bean.changeItem}" render="results" />
public void changeItem() {
someResult = someService.getByItem(item);
}
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
How to load and display dependent h:selectOneMenu on change of a h:selectOneMenu
Conditionally displaying JSF components
how can I call two functions: Java and Javascript with one KeyUp event on InputText , i'm using Primefaces component.
something like this :
<p:inputText id="aa"
value="#{bonBonneManagedBean.sel}">
<p:ajax event="keyup" Onstart="fnc(this)"
listener="#{bonBonneManagedBean.ajouterSelected(bonBonneManagedBean.sel)}" />
</p:inputText>
You're close. You've only a typo in the onstart attribute. It should be written in all lowercase.
<p:ajax event="keyup" onstart="fnc(this)"
listener="#{bonBonneManagedBean.ajouterSelected(bonBonneManagedBean.sel)}" />
Refer the VDL documentation for right attribute names.
How can I disable <p:selectBooleanCheckbox> component using JavaScript?
My goal is to prevent user from changing value of one selectBooleanCheckbox while another is changed during ajax request time (which change values in managed bean).
My simplified code :
<p:selectBooleanCheckbox id="..." value="..." widgetVar="abcde">
<p:ajax listener="..." update="..."/>
</p:selectBooleanCheckbox>
<p:selectBooleanCheckbox id="..." value="...">
<p:ajax listener="..." update="..." onstart="alert(document.getElementById('j_idt14:locationChoice2_input').disabled);document.getElementById('j_idt14:locationChoice2_input').disabled=true;alert(document.getElementById('j_idt14:locationChoice2_input').disabled)" />
</p:selectBooleanCheckbox>
j_idt14:locationChoice2_input id is the id of my first <p:selectBooleanCheckbox /> component.
alert() functions dsplay false and after true so my component is well disabled.
However, it stays with the same render event if it's disabled.
Is the only way to be changing manually CSS classes to match disabled state ? Can widgetVar help me ?
nb: I want to change immediately the aspect of the component so I don't use the JSF disabled attribute, I have to use JS.
I answer my own question.
I put inside simple panelGrid my 2 selectBooleanCheckbox and apply blockUI on this panelGrid :
<p:blockUI block="panelToBlock" widgetVar="block" />
<h:panelGrid id="panelToBlock">
<p:selectBooleanCheckbox id="..." value="..." widgetVar="abcde">
<p:ajax listener="..." update="..." onstart="block.show()" oncomplete="block.hide()" />
</p:selectBooleanCheckbox>
<p:selectBooleanCheckbox id="..." value="...">
<p:ajax listener="..." update="..." onstart="block.show()" oncomplete="block.hide()" />
</p:selectBooleanCheckbox>
</h:panelGrid>
blockUI has a default opacity value to 0.3 but I don't want to see it, I just want to disable my 2 selectBooleanCheckbox so I change the value of the generated id to 0 at runtime with JS :
$(window).load(function() {
$('#j_idt14\\:j_idt23_blocker').css('opacity', 0);
}
and that's all.
Now when ajax request is made, these 2 checkboxes values can not be changed.
Hope this helps
I've a form in which I'm iterating a datatable, each row has a set of components and one of them is:
<h:selectOneRadio id="chargeWaive" onclick="alert(this.id);" > <f:selectItem itemLabel="Charge" itemValue="charge" /> <f:selectItem itemLabel="Waive" itemValue="waive" />
</h:selectOneRadio>
I've added two links that triggers two similar functions :
<a href="#" onclick="selectAllCharge();">
<h:outputText value="Charge All" />
</a>
<a href="#" onclick="selectAllWaive();">
<h:outputText value="Waive All" />
</a>
So when the user clicks on one these links, all the Charge/Waive radiobuttons should be checked.
I've tried to check the first radio button (test purpose) by using one the following codes, but I always get the same error:
$('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', true); $('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', 'checked');
$('#frmResults:billingRecordId:0:chargeWaive:0').prop("checked", true);
The error that I'm getting is: Sintax error, unrecognized expression: billingRecordId
I do know the id is correct because when I look into the compiled JSF code the generated ID for the radio type is:
<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:0" value="charge" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:0"> Charge</label>
<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:1" value="waive" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:1"> Waive</label>
So at this point I don't know what I'm missing here. Any idea?
jQuery uses CSS selectors to select elements in the HTML DOM tree.
The : is a special character in the CSS selector representing the start of structural pseudo class. So if you use
$('#frmResults:billingRecordId')
then it's basically looking for a HTML element with ID of frmResults and having a pseudo class matching billingRecordId. However, as billingRecordId is not a valid pseudo class at all, nothing will be found.
You'd basically need to escape the colon in CSS selector syntax.
$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0')
Or, IMO cleaner, use the [id] attribute selector.
$('[id="frmResults:billingRecordId:0:chargeWaive:0"]')
Or, to get rid of the chained IDs and indexes.
$('[id$=":chargeWaive"]:first :radio:first')
("select elements with ID ending on :chargeWaive, get the first, then get the first radio button from it")
See also:
How to select JSF components using jQuery?
As a completely different alternative, you can also perform a JSF ajax call to preselect the desired radiobuttons by just setting the model value accordingly in the backing bean's ajax listener method.
Colons can cause problems within jquery selectors. Try escaping them with a double backslash ala:
$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0').attr('checked', true);
Did you try this way
Also use .prop() instead of .attr()
$('[id^="frmResults:billingRecordId:0:chargeWaive:"]').prop("checked", true);
So, i need to focus a richfaces tag when an option is selected in my suggestionBox. Normally this wouldnt be a problem but I have the following code:
<rich:suggestionbox fetchValue="#{cap.nom_comp}"
suggestionAction="#{gestionRankingBean.autocompleteMedicamento}"
var="cap"
for="statesinput" id="suggestion" tokens=","
onselect="lossFocus()">
<h:column>
<h:outputText value="#{cap.nom_comp}" />
</h:column>
<a4j:support event="onselect" ajaxSingle="true" reRender="target">
<f:setPropertyActionListener value="#{cap.id}"
target="#{gestionRankingBean.sugerencia}" />
</a4j:support>
</rich:suggestionbox>
My problem is the a4j:support tag is not going to work if i leave the onselect event on the line 5.It seems like i cannot use the same event in this way.
lossFocus() is a javascript function that just does what i want ( pure jquery). So any way to do this? I was thinking if there is some way to capture the onselect event of the suggestionBox with jquery an make my life easier. But i dont know how-
Try using oncomplete="lostFocus()" on a4j:support. You could also try onsubmit.