form

Talk generally about the form, behaviors, etc. Mention theme-specific notes as well.

form

The remote form allows the form to be submitted without the page being refreshed. The results from the form can be inserted into any HTML element on the page.

Remote Form Validation

Attributes

To ajax enable the form, the ww:form component must be used, specifying a theme="ajax". Additionally, the ww:submit component must be used. The ajax-specific attributes of ww:submit are:

The remote form has three basic modes of use, using the resultDivId, the notifyTopics, or the onLoadJS. You can mix and match any combination of them to get your desired result. All of these examples are contained in the Ajax example webapp. Lets go through some scenarios to see how you might use it:

• Show the results in another div. If you want your results to be shown in a div, us the resultDivId where the id is the id of the div you want them shown in. This is an inner HTML approah. Your results get jammed into the div for you. Here is a sample of this approach:

  Remote form replacing another div:
  <div id='two' style="border: 1px solid yellow;">Initial content</div>
  <ww:form
          id='theForm2'
          cssStyle="border: 1px solid green;"
          action='/AjaxRemoteForm.action'
          method='post'
          theme="ajax">
  
      <input type='text' name='data' value='WebWork User'>
      <ww:submit value="GO2" theme="ajax" resultDivId="two"/>
  
  </ww:form>
  
  

• Notify other controls(divs) of a change. Using an pub-sub model you can notify others that your control changed and they can take the appropriate action. Most likely they will execute some action to refresh. The notifyTopics does this for you. You can have many topic names in a comma delimited list. IE: notifyTopics="newPerson, dataChanged" .
  Here is an example of this approach:

    <ww:form id="frm1" action="newPersonWithXMLResult" theme="ajax"  >
        <ww:textfield label="'Name'" name="'person.name'" value="person.name" size="20" required="true" />
        <ww:submit id="submitBtn" value="Save" theme="ajax"  cssClass="primary"  notifyTopics="personUpdated, systemWorking" />
    </ww:form>
    
    <ww:div href="/listPeople.action" theme="ajax" errorText="error opps"
            loadingText="loading..." id="cart-body" >
        <ww:action namespace="" name="listPeople" executeResult="true" />
    </ww:div>
  
  

• Massage the results with JavaScript. Say that your result returns some happy XML and you want to parse it and do lots of cool things with it. The way to do this is with a onLoadJS handler. Here you provide the name of a JavaScript function to be called back with the result and the event type. The only key is that you must use the variable names 'data' and 'type' when defining the callback. For example: onLoadJS="myFancyDancyFunction(data, type)". While I talked about XML in this example, your not limited to XML, the data in the callback will be exactly whats returned as your result.
  Here is an example of this approach:

    <script language="JavaScript" type="text/javascript">
        function doGreatThings(data, type) {
            //Do whatever with your returned fragment... 
            //Perhapps.... if xml...
                  var xml = dojo.xml.domUtil.createDocumentFromText(data);
                  var people = xml.getElementsByTagName("person");
                  for(var i = 0;i < people.length; i ++){
                      var person = people[i];
                      var name = person.getAttribute("name")
                      var id = person.getAttribute("id")
                      alert('Thanks dude. Person: ' + name + ' saved great!!!');
                  }
  
        }
    </script>
  
    <ww:form id="frm1" action="newPersonWithXMLResult" theme="ajax"  >
        <ww:textfield label="'Name'" name="'person.name'" value="person.name" size="20" required="true" />
        <ww:submit id="submitBtn" value="Save" theme="ajax"  cssClass="primary"  onLoadJS="doGreatThings(data, type)" />
    </ww:form>