Render a submit button
Render a submit button. The submit tag is used together with the form tag to provide asynchronous form submissions. The submit can have three different types of rendering:
<a:submit value="%{'Submit'}" />
Render an image submit: <a:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>
Render an button submit: <a:submit type="button" value="%{'Submit'}" label="Submit the form"/>THE FOLLOWING IS ONLY VALID WHEN AJAX IS CONFIGURED
Remote form replacing another div: <div id='two' style="border: 1px solid yellow;">Initial content</div> <a:form id='theForm2' cssStyle="border: 1px solid green;" action='/AjaxRemoteForm.action' method='post' theme="ajax"> <input type='text' name='data' value='Struts User' /> <a:submit value="GO2" theme="ajax" resultDivId="two" /> </a: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. eg: notifyTopics="newPerson, dataChanged" . Here is an example of this approach:
<a:form id="frm1" action="newPersonWithXMLResult" theme="ajax" > <a:textfield label="Name" name="person.name" value="person.name" size="20" required="true" /> <a:submit id="submitBtn" value="Save" theme="ajax" cssClass="primary" notifyTopics="personUpdated, systemWorking" /> </a:form > <a:div href="/listPeople.action" theme="ajax" errorText="error opps" loadingText="loading..." id="cart-body" > <a:action namespace="" name="listPeople" executeResult="true" /> </a:div>Massage the results with JavaScript. Say that your result returns some h appy 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> <a:form id="frm1" action="newPersonWithXMLResult" theme="ajax" > <a:textfield label="Name" name="person.name" value="person.name" size="20" required="true" /> <a:submit id="submitBtn" value="Save" theme="ajax" cssClass="primary" onLoadJS="doGreatThings(data, type)" /> </a:form>
Name |
Required |
Default |
Type |
Description |
---|---|---|---|---|
resultDivId | false | String | The id of the HTML element to place the result (this can the the form's id or any id on the page. | |
onLoadJS | false | String | 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. | |
notifyTopics | false | String | Topic names to post an event to after the form has been submitted. | |
listenTopics | false | String | Set listenTopics attribute. | |
preInvokeJS | false | String | Javascript code that will be executed before invokation. The format is preInvokeJS='yourMethodName(data,type)'. | |
label | false | Object/String | Supply a submit button text apart from submit value. Will have no effect for input type submit, since button text will always be the value parameter. For the type image, alt parameter will be set to this value. | |
src | false | Object/String | Supply an image src for image type submit button. Will have no effect for types input and button. | |
action | false | String | Set action attribute. | |
method | false | String | Set method attribute. | |
align | false | String | HTML align attribute. | |
type | false | input | String | The type of submit to use. Valid values are input, button and image. |
templateDir | false | Object/String | The template directory. | |
theme | false | Object/String | The theme (other than default) to use for rendering the element | |
template | false | Object/String | The template (other than default) to use for rendering the element | |
cssClass | false | Object/String | The css class to use for element | |
cssStyle | false | Object/String | The css style definitions for element ro use | |
title | false | Object/String | Set the html title attribute on rendered html element | |
disabled | false | Object/String | Set the html disabled attribute on rendered html element | |
labelposition | false | Object/String | define label position of form element (top/left) | |
requiredposition | false | Object/String | define required position of required form element (left|right) | |
name | false | Object/String | The name to set for element | |
required | false | false | Boolean | If set to true, the rendered element will indicate that input is required |
tabindex | false | Object/String | Set the html tabindex attribute on rendered html element | |
value | false | Object/String | Preset the value of input element. | |
onclick | false | Object/String | Set the html onclick attribute on rendered html element | |
ondblclick | false | Object/String | Set the html ondblclick attribute on rendered html element | |
onmousedown | false | Object/String | Set the html onmousedown attribute on rendered html element | |
onmouseup | false | Object/String | Set the html onmouseup attribute on rendered html element | |
onmouseover | false | Object/String | Set the html onmouseover attribute on rendered html element | |
onmousemove | false | Object/String | Set the html onmousemove attribute on rendered html element | |
onmouseout | false | Object/String | Set the html onmouseout attribute on rendered html element | |
onfocus | false | Object/String | Set the html onfocus attribute on rendered html element | |
onblur | false | Object/String | Set the html onblur attribute on rendered html element | |
onkeypress | false | Object/String | Set the html onkeypress attribute on rendered html element | |
onkeydown | false | Object/String | Set the html onkeydown attribute on rendered html element | |
onkeyup | false | Object/String | Set the html onkeyup attribute on rendered html element | |
onselect | false | Object/String | Set the html onselect attribute on rendered html element | |
onchange | false | Object/String | Set the html onchange attribute on rendered html element | |
accesskey | false | Object/String | Set the html accesskey attribute on rendered html element | |
tooltip | false | String | Set the tooltip of this particular component | |
tooltipConfig | false | String | Set the tooltip configuration | |
id | false | Object/String | id for referencing element. For UI and form tags it will be used as HTML id attribute |