The ajax-specific attributes of ww:submit are:
Attribute | Type | Required | Default | Description | |
---|---|---|---|---|---|
id resultDivId | string | FALSE TRUE |
|
| The id of the HTML element to place the result (this can the the form's id or any id on the page |
notifyTopics align | string | FALSE | right |
| |
value | string | FALSE | Submit |
| |
Topic names to post an event to after the form has been submitted | |||||
onLoadJS resultDivId | string | FALSE |
|
| |
onLoadJS | string | FALSE |
|
| |
notifyTopics | string | FALSE |
|
| |
listenTopics | string | FALSE |
|
| |
name | string | TRUE |
|
| |
value | string | FALSE |
|
| |
required | boolean | FALSE |
|
| |
disabled | boolean | FALSE |
|
| |
theme | string | FALSE |
|
| |
template | string | FALSE |
|
| |
cssClass | string | FALSE |
|
| |
cssStyle | string | FALSE |
|
| |
label | string | FALSE |
|
| |
labelposition | string | FALSE |
|
| |
tabindex | string | FALSE |
|
| |
onclick | string | FALSE |
|
| |
ondblclick | string | FALSE |
|
| |
onmousedown | string | FALSE |
|
| |
onmouseup | string | FALSE |
|
| |
onmouseover | string | FALSE |
|
| |
onmousemove | string | FALSE |
|
| |
onmouseout | string | FALSE |
|
| |
onfocus | string | FALSE |
|
| |
onblur | string | FALSE |
|
| |
onkeypress | string | FALSE |
|
| |
onkeydown | string | FALSE |
|
| |
onselect | string | FALSE |
|
| onchange | string | FALSE |
|
Javascript code that will be executed after the form has been submitted. The format is onLoadJS='yourMethodName(data,type)'. NOTE: the words data and type must be left like that if you want the event type and the returned data. |
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:
Code Block 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:Code Block <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:Code Block <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>