tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/20-ajax/Ajax.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->

<ui:composition template="/main.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">

  <p>The <code class="language-markup">&lt;f:ajax execute="..." render="..."/></code> tag ignore the
    <code class="language-markup">&lt;tc:form></code> tag.
    The form is only used as a naming container.</p>

  <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
           link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/form.html"/>

  <tc:section label="Example">
    <p>The structure of this example is similar to the
      <tc:link label="Form Required" link="/content/30-concept/08-form/10-required/form-required.xhtml"/>
      example.
      Every form in this example is surrounded by a content box.
      The submit buttons in the inner forms only put the inner value into the model.
      The submit button in the outer form put all values into the model.
      The validation for the inner value 2 and for the outer value is activated, both fields are required.</p>
    <p>There are also two more submit buttons in the outer form.
      The 'Inner Forms' button submit both values in the inner forms.
      The 'Outer Value' button only submit the outer value.
      Please notice, that all buttons use the
      <code class="language-markup">&lt;f:ajax execute="..." render="..."/></code> tag.</p>
    <p>Also note, that the <code class="language-markup">&lt;tc:message/></code> tag has to be rerendered
      to show error messages.</p>

    <pre><code class="language-markup">&lt;tc:box label="Outer Form">
  &lt;tc:form>
    &lt;tc:box label="Inner Form 1">
      &lt;tc:form>
        &lt;tc:in label="Inner Value 1"/>
        &lt;tc:out label="Inner Value 1 in Model"/>
        &lt;tc:button label="Submit">
          &lt;f:ajax execute="in" render="out :page:messages"/>
        &lt;/tc:button>
      &lt;/tc:form>
    &lt;/tc:box>
    &lt;tc:box label="Inner Form 2">
      ...
    &lt;/tc:box>
    &lt;tc:separator/>
    &lt;tc:in label="Outer Value" required="true"/>
    &lt;tc:out label="Outer Value in Model"/>
    &lt;tc:button label="Submit">
      &lt;f:ajax execute="::form1:in ::form2:in in"
              render="::form1:out ::form2:out out :page:messages"/>
    &lt;/tc:button>
    ...
  &lt;/tc:form>
&lt;/tc:box></code></pre>

    <tc:box label="Outer Form">
      <tc:form id="outerForm">
        <tc:box label="Inner Form 1">
          <tc:form id="form1">
            <tc:in id="in1" label="Inner Value 1" value="#{formAjaxController.innerValue1}"/>
            <tc:out id="out1" label="Inner Value 1 in Model" value="#{formAjaxController.innerValue1}"/>
            <tc:button id="submit1" label="Submit">
              <f:ajax execute="in1" render="out1 :page:messages"/>
            </tc:button>
          </tc:form>
        </tc:box>
        <tc:box label="Inner Form 2">
          <tc:form id="form2">
            <tc:in id="in2" label="Inner Value 2" required="true"
                   value="#{formAjaxController.innerValue2}"/>
            <tc:out id="out2" label="Inner Value 2 in Model" value="#{formAjaxController.innerValue2}"/>
            <tc:button id="submit2" label="Submit">
              <f:ajax execute="in2" render="out2 :page:messages"/>
            </tc:button>
          </tc:form>
        </tc:box>
        <tc:separator/>
        <tc:in id="in" label="Outer Value" required="true" value="#{formAjaxController.outerValue}"/>
        <tc:out id="out" label="Outer Value in Model" value="#{formAjaxController.outerValue}"/>
        <tc:button id="submit" label="Submit">
          <f:ajax execute="::form1:in1 ::form2:in2 in"
                  render="::form1:out1 ::form2:out2 out :page:messages"/>
        </tc:button>

        <tc:separator/>
        Submit only:
        <tc:buttons>
          <tc:button id="submitInnerForms" label="Inner Forms">
            <f:ajax execute="::form1:in1 ::form2:in2"
                    render="::form1:out1 ::form2:out2 :page:messages"/>
          </tc:button>
          <tc:button id="submitOuterValue" label="Outer Value">
            <f:ajax execute="in" render="out :page:messages"/>
          </tc:button>
        </tc:buttons>
      </tc:form>
    </tc:box>
  </tc:section>
</ui:composition>