Page History

...

<h2>${uiLabelMap.PartyCreateNewPerson}</h2>
<div id="createPersonError" style="display:none"></div>
<form method="post" id="createPersonForm" action="<@ofbizUrl>createPracticePersonByAjax</@ofbizUrl>">
    <fieldset>
      <div>
        <label>${uiLabelMap.FormFieldTitle_salutation}</label>
        <input type="text" name="salutation" value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartyFirstName}*</label>
        <input type="text" name="firstName"  value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartyMiddleName}</label>
        <input type="text" name="middleName" value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartyLastName}*</label>


        <input type="text" name="lastName" class="required" value=""/>
      </div>
      <div>
        <label>${uiLabelMap.PartySuffix}</label>
        <input type="text" name="suffix" value=""/>
      </div>
      <div>
        <a id="createPerson" href="javascript:void(0);" class="buttontext">${uiLabelMap.CommonCreate}</a>
      </div>
    </fieldset>
</form>

...

• Here on first line, Event.observe(element, eventName, handler), registers an event handler on a DOM element.
  • Argument 1: The DOM element you want to observe; as always in Prototype, this can be either an actual DOM reference, or the ID string for the element.
  • Argument 2: The standardized event name, as per the DOM level supported by your browser. This can be as simple as 'click'.
  • Argument 3: The handler function. This can be an anonymous function you create on-the-fly, a vanilla function.
• So here on window load, on-the-fly function is called. where form validations and request calling is done.
• Important thing to notice is why we write other observation code on window load event, and answer is here we keep restriction, that on window load, all the elements of the form will get activated and then we put observation on form's elements.
• In CreatePerson.ftl you see that class="required" are used on forms's input element, You then activate validation by passing the form or form's id attribute as done in second line. More on this can be learned from learn validation
• On third line, observer is on "createPerson" which is id of anchor tag (button) in CreatePerson.ftl,
• so that when end user clicks "create button" , the instance method, validate(), will return true or false. This will activate client side validation.
• And then createPerson function is called which is out of the scope of window load observer.
• In request variable, createPersonForm's action is stored. $('createPersonForm') is again a id of form in CreatePerson.ftl.
• new Ajax.Request(url) : Initiates and processes an AJAX request.
• The only proper way to create a requester is through the new operator. As soon as the object is created, it initiates the request, then goes on processing it throughout its life-cyle.
• Request life cycle:
  • Created
  • Initialized
  • Request sent
  • Response being received (can occur many times, as packets come in)
  • Response received, request complete
• So here createPracticePersonByAjax request will be called from controller.xml, which will call createPracticePerson service and do needful entries.
• Form's elements are serialized and passed as a parameter in ajax request. This is represented in last line of createPerson function.
• Now if response is successful and server has not returned an error, "new Ajax.Updater($('personList'), 'UpdatedPersonList'" will be executed.
• Ajax updater, performs an AJAX request and updates a container's contents based on the response text. To get more on this please read : ajax updater
• So "personList" is the id of div in person.ftl, which will be replaced by response of UpdatedPersonList request.

...

Step - 8: Now do required controller.xml entries :

• Here you may see that after service invocation request is chained and and is redirected to json request.
• json request is in common-controller.xml which invokes common json reponse events and send back json reponses.

<request-map uri="createPracticePersonByAjax">
    <security https="true" auth="true"/>
    <event type="service" invoke="createPracticePerson"/>
    <response name="success" type="request" value="json"/>
    <response name="error" type="request" value="json"/>
</request-map>
<request-map uri="UpdatedPersonList">
    <security https="true" auth="true"/>
    <response name="success" type="view" value="UpdatedPersonList"/>
</request-map>
<!--View Mappings -->
<view-map name="UpdatedPersonList" type="screen" page="component://practice/widget/PracticeScreens.xml#UpdatedPersonList"/>

...