display dialogue immediately after selecting value in selectonemenu - primefaces

Question

I have a requirement with p:selectonemenu when I am using inside dataTable.
<p:selectOneMenu value="#{buyerInProcessBean.subject}"
id="buyerResponseId" >
<f:selectItems
value="#{buyerInProcessBean.subjectMap[trans.decisionrule.ruleId]}"
var="subject" itemLabel="#{subject}" itemValue="#{subject}"></f:selectItems>
<f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
</p:selectOneMenu>
If I choose 'other' a dialogue must compulsory get popup. otherwise it is not mandatory.
How can I achieve this type of requirement?

Answer 1

You should bind a function to an onchange event of your <p:selectOneMenu>, find out if the value of the desired option matches the value that should open the dialog, and trigger dialog.open() in that case.
Note, that Primefaces' component wraps the <select> tag within some divs and outputs the selected <option> in an intermediary component, therefore attachment of event to the hidden <select> element won't work. On the other hand, for example, JSF <h:selectOneMenu> tag renders a <select> element, so binding behaviour to the onchange will trigger the desired behaviour.
The view:
<h:form id="form">
<p:selectOneMenu value="#{buyerInProcessBean.subject}" id="buyerResponseId" onchange="changeEvent(this)">
<f:selectItems value="#{buyerInProcessBean.subjectMap[trans.decisionrule.ruleId]}"
var="subject" itemLabel="#{subject}" itemValue="#{subject}" />
<f:selectItem itemLabel="Other" itemValue="Other" />
</p:selectOneMenu>
</h:form>
<p:dialog widgetVar="dialog">
<h:outputText value="Additional Data" />
</p:dialog>
The JavaScript:
function changeEvent(element) {
var val = $(element).find('option:selected').text();
if(val === 'Other') {
dialog.show();
}
}