Using jquery dialog in JSF

Question

I am currently running my web application in JSF 2.0 and jquery. Moreover i have added jquery dialog. Model dialog is opening properly without any errors. However when i try to submit by ajax input vales on the dialog are not posting to server side.

Please refer below input text and button to submit the values.

Input:

<h:inputText id="routingNumber_1" required="true" class="routingNo"
    value="#{paymentInfoController.modelBankInfo.routingNumber}"
    valueChangeListener="#{paymentInfoController.getBankByRoutingNumber}">
</h:inputText>

Button:

<h:commandLink styleClass="fll btn2 btnOff mr savepannextbutton" 
    id="savepannextbutton" style=" align:left;height: 40px; width: 70px;"
    value="Confirm" title="Confirm">
    <f:attribute name="bank" 
        value="#{paymentInfoController.modelBankInfo.routingNumber}">
    </f:attribute>
    <f:ajax execute="@form" onevent="addBankshowSuccessMessage" event="click"
        render=":formPaymentInformation:paymentInformationDataTable"
        listener="#{paymentInfoController.addBank}">
    </f:ajax>
</h:commandLink>

score 1 · Answer 1 · answered Sep 20 '12 at 16:26

A JS/CSS modal dialog is by design usually repositioned to end of body (to prevent possible browser specific layout/presentation/zindex problems). So, if you have placed the HTML element representing the dialog inside a <h:form>, then the dialog will end up being placed outside any HTML <form> and thus not being able to submit anything to the server.

You need to ensure that the <h:form> is been placed inside the dialog.

Unrelated to the concrete problem, consider looking at a JSF component library which is using jQuery UI under the covers instead of homebrewing/reinventing all the JSF+jQuery matters. PrimeFaces, for example, has a <p:dialog> component as all-in-one solution for this purpose.

Using jquery dialog in JSF

Input:

Button:

1 Answers1