在 JSF 中使用 jquery 对话框答案

【问题标题】：Using jquery dialog in JSF [duplicate]在 JSF 中使用 jquery 对话框
【发布时间】：2012-09-20 13:09:25
【问题描述】：

我目前在 JSF 2.0 和 jquery 中运行我的 Web 应用程序。此外，我添加了 jquery 对话框。模型对话框正常打开，没有任何错误。但是，当我尝试通过 ajax 提交时，对话框上的输入值不会发布到服务器端。

请参考下面的输入文本和按钮提交值。

输入：

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

按钮：

<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>

【问题讨论】：

标签： jsf-2

【解决方案1】：

JS/CSS 模态对话框的设计通常重新定位到正文的末尾（以防止可能出现的浏览器特定布局/呈现/zindex 问题）。因此，如果您将表示对话框的 HTML 元素放在 <h:form> 中，那么对话框最终将被放置在任何 HTML <form> 之外，因此无法向服务器提交任何内容。

您需要确保将<h:form> 放置在对话框内。

与具体问题无关，请考虑查看 JSF 组件库，它在幕后使用 jQuery UI，而不是自制/重新发明所有 JSF+jQuery 事务。例如，PrimeFaces 有一个 <p:dialog> component 作为用于此目的的一体化解决方案。

【讨论】：