Update Primefaces selectOneMenu from JavaScript

Question

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?

score 5 · Accepted Answer · answered Aug 13 '13 at 07:51

5

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.

answered Aug 13 '13 at 07:51

Cagatay Civici

6,406
1
29
34

score 1 · Answer 2 · answered Aug 13 '13 at 01:35

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.

Update Primefaces selectOneMenu from JavaScript

2 Answers2