Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block

<set field="layoutSettings.javaScripts\[+0\]" value="/images/prototypejs/validation.js" global="true"/>
<set field="layoutSettings.javaScripts\[\]" value="/images/prototypejs/prototype.js" global="true"/>

...

Code Block

<h2>${uiLabelMap.PartyCreateNewPerson}</h2>
<div id="createPersonError" style="display:none"></div>
<form method="post" id="createPersonForm" action="<@ofbizUrl>createPracticePersonByAjax</@ofbizUrl>">
  <div>
    <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>
  </div>
</form>

  • Click on "Ajax" menu to observe the PersonFormByAjax screen.

...

  • Here again div's id will be used in PracticeApp.js file
    Code Block
    <#if persons?has_content>
      <div id="personList">
        <h2>Some of the people who visited our site are:</h2>
        <br>
        <ul>
          <#list persons as person>
            <li>${person.firstName!} ${person.lastName!}<li></li>
          </#list>
        </ul>
      </div>
    </#if>
    

...

Code Block

Event.observe(window, 'load', function() {
    var validateForm = new Validation('createPersonForm', {immediate: true, onSubmit: false});
    Event.observe('createPerson', 'click', function() {
       if (validateForm.validate()) {
           createPerson();
       }
    });
});

function createPerson() {
    var request = $('createPersonForm').action;
    new Ajax.Request(request, {
        asynchronous: falsetrue,
        onSuccessonComplete: function(transport) {
            var data = transport.responseText.evalJSON(true);
            var serverError = getServerError(data);
            if (serverError != "") {
                Effect.Appear('createPersonError', {duration: 0.0});
                $('createPersonError').update(serverError);
            } else {
                Effect.Fade('createPersonError', {duration: 0.0});
                new Ajax.Updater($('personList'), 'UpdatedPersonList', {evalScripts: true});
            }
        }, parameters: $('createPersonForm').serialize(), requestHeaders: {Accept: 'application/json'}
    });
}

getServerError = function (data) {
    var serverErrorHash = [];
    var serverError = "";
    if (data._ERROR_MESSAGE_LIST_ != undefined) {
        serverErrorHash = data._ERROR_MESSAGE_LIST_;

        serverErrorHash.each(function(error) {
            if (error.message != undefined) {
                serverError += error.message;
            }
        });
        if (serverError == "") {
            serverError = serverErrorHash;
        }
    }
    if (data._ERROR_MESSAGE_ != undefined) {
        serverError += data._ERROR_MESSAGE_;
    }
    return serverError;
};

...