通过 AJAX 在包含页面上的 AJAX答案

【问题标题】：AJAX on an included page through AJAX通过 AJAX 在包含页面上的 AJAX
【发布时间】：2013-07-08 15:34:58
【问题描述】：

我有一个页面，通过 AJAX 我有条件地包含其他页面。在一个包含的页面上，我想做另一个 ajax 调用。

我的初始页面：

<ui:composition template="../../templates/template.xhtml">
<ui:define name="title">
    Pay
</ui:define>
<ui:define name="content">

    <h:form>
        <div id="loginDiv">
            <div class="homeDiv" style="text-align: left;">
                <h:form>
                    <h:outputText value="#{strings.paymentMainSpeech} " />
                    <ul id="grileList">
                        <li><a href="http://www.platiprinsms.ro">#{strings.payThroughSMS}</a></li>
                        <li><a href="http://www.mobilpay.ro">#{strings.payThroughCard}</a></li>
                        <li><a href="http://www.paypal.com">#{strings.payThroughPayPal}</a></li>
                    </ul>
                    <h:outputText value="#{strings.bellowYouHavePaymentOptions}" />
                </h:form>
            </div>
            <h:selectOneRadio value="#{payment.option}" immediate="true">
                <f:selectItem itemValue="#{strings.payThroughSMS}"
                    itemLabel="#{strings.payThroughSMS}" />
                <f:selectItem itemValue="#{strings.payThroughCard}"
                    itemLabel="#{strings.payThroughCard}" />
                <f:selectItem itemValue="#{strings.payThroughPayPal}"
                    itemLabel="#{strings.payThroughPayPal}" />
                <f:ajax event="change" listener="#{payment.changeListener()}"
                    render="payment" />
            </h:selectOneRadio>
        </div>

        <h:panelGroup id="payment">

            <!-- PayPal -->
            <h:panelGroup rendered="#{payment.option == 'PayPal'}">
                <ui:include src="../payments/paypal/paypal.xhtml" />
            </h:panelGroup>

            <!-- CARD -->
            <h:panelGroup rendered="#{payment.option == 'Card'}">
                <ui:include src="../payments/card/mobilPay.xhtml" />
            </h:panelGroup>
        </h:panelGroup>

    </h:form>


</ui:define>

我从单选按钮中选择要通过 ajax 侦听器包含的页面。效果很好。在一个包含的页面上（在 mobilPay.xhtml 上）

<ui:composition>
<ui:define name="title">
    Pay Card Mobil Pay
</ui:define>
<div id="loginDiv">

    <h:panelGroup id="next">

        <h:panelGroup rendered="#{not mobilPayInitBean.forward}">

            <h:outputText value="#{strings.paymentSpeech} " />
            <h:outputText value="#{strings.paymentSpeech} " />

            <h:outputText value=" #{strings.paymentSpeech2}" />
            <br />
            <br />
            <h:form>
                <h:selectOneMenu value="#{mobilPayInitBean.options}">
                    <f:selectItem itemValue="five" itemLabel="#{strings.fiveEuro}" />
                    <f:selectItem itemValue="seven" itemLabel="#{strings.sevenEuro}" />
                    <f:selectItem itemValue="ten" itemLabel="#{strings.tenEuro}" />
                </h:selectOneMenu>
                <br />
                <br />
                <f:ajax render="next">
                    <h:commandButton value="#{strings.nextStep}"
                        action="#{mobilPayInitBean.nextStep()}"
                        rendered="#{not mobilPayInitBean.forward}" />
                </f:ajax>       
            </h:form>
        </h:panelGroup>

        <h:panelGroup rendered="#{mobilPayInitBean.forward}">
            <div id="loginDiv">


                <form name="frmPaymentRedirect" method="post"
                    action="#{mobilPayInitBean.paymentURL}">
                    <input type="hidden" name="env_key"
                        value="#{mobilPayInitBean.paymentURL}" /> <input type="hidden"
                        name="data" value="#{mobilPayInitBean.paymentURL}" />

                    <p>
                        If not reditect in 5 seconds <input type="image"
                            src="images/12792_mobilpay-96x30.gif" />
                    </p>
                </form>

            </div>
            <script type="text/javascript" language="javascript">
                window.setTimeout(document.frmPaymentRedirect.submit(), 3000);
            </script>
        </h:panelGroup>

    </h:panelGroup>
</div>

我想从选择一个菜单中选择一个项目，然后单击命令按钮，我希望整个 selectonemenu 和命令按钮消失，最后一个表单 (name="frmPaymentRedirect") 出现。

现在的问题：

我将 mobilPay.xhtml 页面和带有单选按钮的整个页面包括在内，然后出现 mobilPay.xhtml 页面，但是当我单击命令按钮时，mobilPay.xhtml 孔消失了，单选按钮中的选择也消失了。

感谢您的宝贵时间。

【问题讨论】：

有几个问题需要寻找：(1) 嵌套表单，(2) 可能不正确地使用模板/包含，(3) ajax 标记中的错误 id，(4) 可能返回非- 来自按钮操作方法的空字符串和 (5) 笨拙的代码结构。您需要更正 (1) 和 (3)，因为它们是完全错误的，并且您描述的症状让我认为 (4) 也是问题，所以只需从操作方法返回 null/void。

标签： ajax jsf-2 include render selectonemenu

【解决方案1】：

这是嵌套形式！！！我使用了主模板 -> 子模板 -> 包含页面。在子模板中有一个表单，在表单内我插入了页面，在一个插入的页面中我有另一组表单。

感谢您指出这个显而易见的事情！！！

【讨论】：