<?xml version="1.0" encoding="ISO-8859-1"?><page xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance" xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
   
   

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    

    
    

    
    

    
    

    
    
    
    
    

    
    
    
    
    


    
    
    
    
    
    

    
    
    
    
    

  <h4 xmlns:bu="http://apache.org/cocoon/browser-update/1.0" class="samplesGroup">AJAX sample</h4>
  <title>Car selector</title>
  <para>This example illustrates:
     <ul>
        <li>how you can programmatically update the content of a selection list,</li>
        <li>the AJAX features that allow partial page reloads and the associated visual effects.</li>
     </ul>
  </para>
  <para>
    Event-handlers are defined in the form definition to update the selection lists and set
    the comment text below the table. This requires only a few lines of server-side JavaScript.
    Selection widgets also have a "submit-on-change" attribute set in the form template so that
    changes are considered immediately by the server.
  </para>
  <para>
    See "carselector_form.xml" and "carselector_template.xml" to see how this is done.
  </para>
  <content>
    <script type="text/javascript">
       var currentEffect = "fade";
       cocoon.ajax.BrowserUpdater.highlight = cocoon.ajax.Fader.fade;
       function setEffect(effect) {
           if (effect == "none") {
               cocoon.ajax.BrowserUpdater.highlight = null;
           } else if (effect == "fade") {
               cocoon.ajax.BrowserUpdater.highlight = cocoon.ajax.Fader.fade;
           } else if (effect == "blink") {
               cocoon.ajax.BrowserUpdater.highlight = cocoon.ajax.Blinker.blink;
           }
           
           document.getElementById(currentEffect).style.fontWeight = "";
           document.getElementById(effect).style.fontWeight = "bold";
           currentEffect = effect;
           return false;
       }
    </script>
    <para>
      Page update effect:
      <a id="none" href="#" onclick="return setEffect('none')">None</a> - 
      <a style="font-weight: bold" id="fade" href="#" onclick="return setEffect('fade')">Fade</a> - 
      <a id="blink" href="#" onclick="return setEffect('blink')">Blink</a>
    </para>
      
    
      
      
        <fi:form-template ajax="true" action="continue" method="POST">
        
        
        
      <fi:continuation-id>45357b015a1e4e073859664b284b0b50602e4d5d</fi:continuation-id>
    
      <fi:group>
        <fi:styling layout="columns"/>
        <fi:items>
          <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="carselector.make">
        
        <fi:field id="carselector.make" state="active" listening="true" required="true"><fi:label>Make:</fi:label><fi:value>Maserati</fi:value><cars>
  
       
  <make name="Audi">
    
    <type name="A2">
      <model name="1.4 75"/>
      <model name="1.4 TDI"/>
      <model name="1.4 75 Pack"/>
      <model name="1.4 TDI Pack"/>
      <model name="1.6 FSI 110 Pack"/>
      <model name="1.4 75 Pack Plus"/>
      <model name="1.6 FSI 110 Pack Plus"/>
    </type>
    <type name="A3">
      <model name="1.6 Attration 102"/>
      <model name="2.0 FSI Attractin 150"/>
      <model name="1.6 Ambiente 102"/>
      <model name="2.0 FSI Ambiente 150"/>
      <model name="2.0 FSI Ambiente 150 tiptronic"/>
      <model name="1.6 Ambition 102"/>
      <model name="2.0 FSI Ambition 150"/>
      <model name="2.0 FSI Ambition 150 tiptronic"/>
      <model name="2.0 FSI Ambition Luxe 150"/>
    </type>
    <type name="A4">
      <model name="Berline 1.9 TDI 101"/>
      <model name="Berline 2.5 TDI 163"/>
      <model name="Berline 2.5 TDI 163 multitronic"/>
      <model name="Berline 2.5 TDI 180 quattro"/>
      <model name="Berline 2.5 TDI 180 quattro tiptronic"/>
      <model name="Avant 1.9 TDI 101"/>
      <model name="Avant 1.9 TDI 130"/>
      <model name="Avant 2.5 TDI 163"/>
      <model name="Avant 2.5 TDI 163 multitronic"/>
      <model name="Avant 2.5 TDI 180 quattro"/>
      <model name="Avant 2.5 TDI 180 tiptronic quattro"/>
    </type>
    <type name="A6">
    </type>
    <type name="A8">
    </type>
    <type name="TT">
    </type>
    <type name="Allroad Quattro">
    </type>
  </make>
  <make name="Volkswagen">
    <type name="Golf">
    </type>
    <type name="Passat">
    </type>
    <type name="Bora">
    </type>
  </make>
  <make name="Mercedes">
    <type name="CLK">
    </type>
    <type name="SLK">
    </type>
  </make>
  <make name="Renault">
    <type name="Twingo">
    </type>
    <type name="Scenic">
    </type>
    <type name="Espace">
    </type>
  </make>
  <make name="Maserati">
    <type name="Quattroporte">
    </type>
    <type name="Coupe">
    </type>
    <type name="Spyder">
    </type>
  </make>
</cars><fi:datatype type="string"/>
        
        </fi:field></bu:replace>
      
    
          <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="carselector.type">
        
        <fi:field id="carselector.type" state="active" listening="true" required="true"><fi:label>Type:</fi:label><cars>
  
       
  <make name="Audi">
    
    <type name="A2">
      <model name="1.4 75"/>
      <model name="1.4 TDI"/>
      <model name="1.4 75 Pack"/>
      <model name="1.4 TDI Pack"/>
      <model name="1.6 FSI 110 Pack"/>
      <model name="1.4 75 Pack Plus"/>
      <model name="1.6 FSI 110 Pack Plus"/>
    </type>
    <type name="A3">
      <model name="1.6 Attration 102"/>
      <model name="2.0 FSI Attractin 150"/>
      <model name="1.6 Ambiente 102"/>
      <model name="2.0 FSI Ambiente 150"/>
      <model name="2.0 FSI Ambiente 150 tiptronic"/>
      <model name="1.6 Ambition 102"/>
      <model name="2.0 FSI Ambition 150"/>
      <model name="2.0 FSI Ambition 150 tiptronic"/>
      <model name="2.0 FSI Ambition Luxe 150"/>
    </type>
    <type name="A4">
      <model name="Berline 1.9 TDI 101"/>
      <model name="Berline 2.5 TDI 163"/>
      <model name="Berline 2.5 TDI 163 multitronic"/>
      <model name="Berline 2.5 TDI 180 quattro"/>
      <model name="Berline 2.5 TDI 180 quattro tiptronic"/>
      <model name="Avant 1.9 TDI 101"/>
      <model name="Avant 1.9 TDI 130"/>
      <model name="Avant 2.5 TDI 163"/>
      <model name="Avant 2.5 TDI 163 multitronic"/>
      <model name="Avant 2.5 TDI 180 quattro"/>
      <model name="Avant 2.5 TDI 180 tiptronic quattro"/>
    </type>
    <type name="A6">
    </type>
    <type name="A8">
    </type>
    <type name="TT">
    </type>
    <type name="Allroad Quattro">
    </type>
  </make>
  <make name="Volkswagen">
    <type name="Golf">
    </type>
    <type name="Passat">
    </type>
    <type name="Bora">
    </type>
  </make>
  <make name="Mercedes">
    <type name="CLK">
    </type>
    <type name="SLK">
    </type>
  </make>
  <make name="Renault">
    <type name="Twingo">
    </type>
    <type name="Scenic">
    </type>
    <type name="Espace">
    </type>
  </make>
  <make name="Maserati">
    <type name="Quattroporte">
    </type>
    <type name="Coupe">
    </type>
    <type name="Spyder">
    </type>
  </make>
</cars><fi:datatype type="string"/>
        
        </fi:field></bu:replace>
      
    
          <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="carselector.model"><fi:placeholder id="carselector.model"/></bu:replace>
    
          <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="carselector.message">
        
        <fi:output id="carselector.message" state="active" listening="true"><fi:value>Good. Maserati makes good cars!</fi:value>
        
        </fi:output></bu:replace>
      
    
          <bu:replace xmlns:bu="http://apache.org/cocoon/browser-update/1.0" id="carselector.buy">
        
        <fi:action id="carselector.buy" state="disabled"><fi:label>Buy it!</fi:label>
        
        </fi:action></bu:replace>
      
    
        </fi:items>
      </fi:group>
    
        </fi:form-template>
      
    
    <p>
      <a href="./">Back to Forms samples</a>
    </p>
  </content>
</page>