AJAX on an included page through AJAX

Question

I have a page in which through AJAX I include other pages conditionally. On one included page I would like to do another ajax call.

My initial page:

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

I select from the radio buttons the pages which I want to include through an ajax listener. That works well. On one included page (on 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>

I want to select from the select one menu an item and click on the command button and I want the whole selectonemenu and the command button to disaper and the last form (name="frmPaymentRedirect")to appear.

Now the problem:

I include the mobilPay.xhtml page and the whole page with the radiobuttons and the mobilPay.xhtml page appears, BUT when I click on the command button the hole mobilPay.xhtml disappears and so does the selection in the radio button.

Thank you for your time.

There are several issues to look for: (1) nested forms, (2) possibly incorrect usage of templating/includes, (3) wrong id in ajax tag, (4) possible return of a non-null string from button's action method and (5) clumsy structure of code in general. You need to correct (1) and (3) as they are plain wrong and the symptoms you describe make me think that (4) is the problem as well, so just return null/void from action method. — skuntsel, Jul 10 '13 at 16:12

score 0 · Answer 1 · answered Jul 10 '13 at 18:31

It was the nested forms!!! I used a master template -> child template -> included page. In the child template a had a form and inside the form I inserted the pages and in the one inserted page I had another set of form.

Thank you for pointing that obvious thing out!!!

AJAX on an included page through AJAX

1 Answers1