CODEWITHSUNDEEP
jsf-2primefaces
Boiler Bill
Boiler Bill

Reputation: 1940

How to get an ajax event to fire from within a p:dialog

So I have been stumped most of the day today trying to call a method in my backing bean when a component changes values. Everything works correctly if my components are outside of a <p:dialog>, however when nested inside a dialog the server side never happens. Originally I was working with the <p:calendar> control, but noticed it also didn't work with a simple inputText. The following example works:

<h:panelGrid columns="3">
    <h:outputText value="Start"/>
    <p:inputText id="startOfRange" value="#{myBean.startRange}" valueChangeListener="#{myBean.startChanged}">
        <p:ajax event="change" update="play"/>
    </p:inputText>
    <h:outputText id="play" style="margin-left: 10px;" value="#{myBean.startRange}"/>
</h:panelGrid>

My backing bean method looks like

public void startChanged(ValueChangeEvent event) { }

This method is invoked after a tab out of the inputText, however when wrapped like the following the method never gets invoked:

<p:dialog widgetVar="efDlg" zindex="10" appendToBody="true" header="Create Custom Date Range"
      modal="true" height="375" width="450" resizable="false" closable="false" >
<h:panelGrid columns="4">
    <h:outputText value="Start"/>
    <p:inputText id="startOfRange" value="#{myBean.startRange}" valueChangeListener="#{myBean.startChanged}">
        <p:ajax event="change" update="play"/>
    </p:inputText>
    <h:outputText id="play" style="margin-left: 10px;" value="#{myBean.startRange}"/>
    <p:inputText id="endOfRange" value="#{myBean.endRange}" valueChangeListener="#{myBean.endChanged}"/>
</h:panelGrid>
<div class="customRangeButtons">
    <span>
        <p:commandButton value="Cancel" onstart="efDlg.hide();" actionListener="#{myBean.cancelCustomDateRange}" update="pGraphs"/>
    </span>
    <span style="margin-left: 300px;">
        <p:commandButton  value="Ok" type="submit" onstart="efDlg.hide();" action="#{myBean.saveCustomDateRange()}" update="pGraphs"/>
    </span>
</div>    
</p:dialog>

Note I am using Primefaces 2.2.1 with Mojarra 2.1.0. Any ideas as to why I can't get the startChanged method to be called when the value has changed?

Upvotes: 1

Views: 4325

Answers (2)

Gunjan Kalra
Gunjan Kalra

Reputation: 437

I have also come across the same problem. I am also using a single form and no form inside the dialog. As long as I do not have the appendToBody="true" for my dialog the input values and ajax and submit happens correctly. As soon as I add that attribute with true, for better/correct rendering, the input values are not accepted.

Upvotes: 0

Jim Tough
Jim Tough

Reputation: 15210

Maybe I'm wrong about this (I don't have my project code at home to verify) but isn't this:

<p:ajax event="change" update="play"/>

supposed to be:

<p:ajax event="valueChange" update="play"/>

I know that most of the Ajax event values are like the JavaScript event handlers with the 'on' removed, but valueChange is a special value in JSF Ajax tags.

For the record, I sometimes pair up two Ajax child tags inside an inputText, like:

<p:ajax event="valueChange" process="@this" update="whatever"/>
<p:ajax event="keyUp" process="@this" update="whatever"/>

This will deal with each keystroke at it is entered as well as copy-and-paste and loss of focus on the parent input text.

Upvotes: 3

Related Questions