CODEWITHSUNDEEP
jsfprimefacesrenderselectonemenu
Jonathan Viccary
Jonathan Viccary

Reputation: 732

Update Primefaces selectOneMenu from JavaScript

I have a JSF form, that contains some JavaScript. When a specific input changes to a value >= 10 a selectOneMenu needs to dynamically change its option (which is yes or no).

My jQuery:

if ($("input[id*='inputBox']").val() >= 10) {
    $("select[id*='selectOneMenu']").val("No");
    } else {
    $("select[id*='selectOneMenu']").val("Yes");
}

When I debug, the value in the selectOneMenu is changed correctly, but the UI component doesn't change its option. How do I tell the selectOneMenu to update its rendered value?

Upvotes: 0

Views: 2054

Answers (2)

Cagatay Civici
Cagatay Civici

Reputation: 6504

PrimeFaces SelectOneMenu is not a trivial select tag, it is a collection of divs put together to make it look like a select tag, use widgetVar.selectValue(val);

select tag is hidden inside the visible UI parts so that's why it is not working for you.

Upvotes: 5

patstuart
patstuart

Reputation: 1988

Your best bet will be to call a p:remoteCommand once the value should toggle. You will need to have the remoteCommand update your selectOneMenu ID (or IDs).

<p:remoteCommand name="setNo" actionListener="#{myBean.setNo}"
    update="selectOneMenu" />
<p:remoteCommand name="setYes" actionListener="#{myBean.setYes}" 
    update="selectOneMenu" />
<SCRIPT>
var val="No"; //I'm assuming your initial value is "No"
if ($("input[id*='inputBox']").val() >= 10) {
    if (val==="Yes") {
        setNo();
        val="No";
    }
} else {
    if (val==="No") {
        setYes();
        val="Yes";
    }
}
</SCRIPT>

Then in your backing bean:

Map<String, String> selectBoxValues = ...
public void setNo() {
    selectBoxValues.put("No", index);
}
[ditto for yes]

Of course, I've made up a bunch of variable names; you will have to change the text to suit your real variables.

Upvotes: 1

Related Questions