Fork me on GitHub
Edit on GitHub

dojo submit

NOTE: Ajax template (Dojo plugin) is deprecated and won’t be supported any longer.

Description

Renders a submit button that can submit a form asynchronously. The submit can have three different types of rendering:

Please note that the button type has advantages by adding the possibility to seperate the submitted value from the text shown on the button face, but has issues with Microsoft Internet Explorer at least up to 6.0

There’s a bug in IE6/IE7 which makes impossible to use the target’s attribute with a parent Div, because such Div’s content’s are overwritten with the tag’s loadingText . Resulting in an “undefined” message in the content’s, instead of the result of the request.

One possible alternative is to set showLoadingText=”false” (the default) and set the indicator attribute to an element showing the desired loading text or image (outside the div).


<img id="loadingImage" src="images/loadingAnimation.gif" style="display:none"/>
<s:div id="parentDiv">
    <s:form action="actionName">
        <sx:submit  targets="parentDiv" showLoadingText="false" indicator="loadingImage"/>
    </s:form>
</s:div>

Parameters

Dynamic Attributes Allowed:

false
 

Name

Required

Default

Evaluated

Type

Description

accesskey false false String Set the html accesskey attribute on rendered html element
afterNotifyTopics false false String Comma delimmited list of topics that will published after the request(if the request succeeds)
ajaxAfterValidation false false false Boolean Make an asynchronous request if validation succeeds. Only valid if 'validate' is 'true'
align false false String HTML align attribute.
beforeNotifyTopics false false String Comma delimmited list of topics that will published before the request
cssClass false false String The css class to use for element
cssErrorClass false false String The css error class to use for element
cssErrorStyle false false String The css error style definitions for element to use
cssStyle false false String The css style to use for element
disabled false false String Set the html disabled attribute on rendered html element
errorNotifyTopics false false String Comma delimmited list of topics that will published after the request(if the request fails)
errorPosition false false String Define error position of form element (top|bottom)
errorText false false String The text to display to the user if the is an error fetching the content
executeScripts false false false Boolean Javascript code in the fetched content will be executed
formFilter false false String Function name used to filter the fields of the form.
formId false false String Form id whose fields will be serialized and passed as parameters
handler false false String Javascript function name that will make the request
highlightColor false none false String Color used to perform a highlight effect on the elements specified in the 'targets' attribute
highlightDuration false 1000 false String Duration of highlight effect in milliseconds. Only valid if 'highlightColor' attribute is set
href false false String The URL to call to obtain the content. Note: If used with ajax context, the value must be set as an url tag value.
id false false String The id to use for the element
indicator false false String Set indicator
javascriptTooltip false false false Boolean Use JavaScript to generate tooltips
key false false String Set the key (name, value, label) for this particular component
label false false String Label expression used for rendering a element specific label
labelSeparator false : false String String that will be appended to the label
labelposition false false String Define label position of form element (top/left)
listenTopics false false String Topic that will trigger the remote call
loadingText false Loading... false String Text to be shown while content is being fetched
method false false String Set method attribute.
name false false String The name to set for element
notifyTopics false false String Comma delimmited list of topics that will published before and after the request, and on errors
onblur false false String Set the html onblur attribute on rendered html element
onchange false false String Set the html onchange attribute on rendered html element
onclick false false String Set the html onclick attribute on rendered html element
ondblclick false false String Set the html ondblclick attribute on rendered html element
onfocus false false String Set the html onfocus attribute on rendered html element
onkeydown false false String Set the html onkeydown attribute on rendered html element
onkeypress false false String Set the html onkeypress attribute on rendered html element
onkeyup false false String Set the html onkeyup attribute on rendered html element
onmousedown false false String Set the html onmousedown attribute on rendered html element
onmousemove false false String Set the html onmousemove attribute on rendered html element
onmouseout false false String Set the html onmouseout attribute on rendered html element
onmouseover false false String Set the html onmouseover attribute on rendered html element
onmouseup false false String Set the html onmouseup attribute on rendered html element
onselect false false String Set the html onselect attribute on rendered html element
openTemplate false false String Set template to use for opening the rendered html.
parseContent false true false Boolean Parse returned HTML for Dojo widgets
requiredLabel false false false Boolean If set to true, the rendered element will indicate that input is required
requiredPosition false false String Define required position of required form element (left|right)
separateScripts false true false String Run scripts in a separate scope, unique for each tag
showErrorTransportText false true false Boolean Set whether errors will be shown or not
showLoadingText false false false Boolean Show loading text on targets
src false false String Supply an image src for image type submit button. Will have no effect for types input and button.
style false false String The css style definitions for element to use - it's an alias of cssStyle attribute.
tabindex false false String Set the html tabindex attribute on rendered html element
targets false false String Comma delimited list of ids of the elements whose content will be updated
template false false String The template (other than default) to use for rendering the element
templateDir false false String The template directory.
title false false String Set the html title attribute on rendered html element
tooltip false false String Set the tooltip of this particular component
tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips
tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath false false String Icon path used for image that will have the tooltip
transport false XMLHTTPTransport false String Transport used by Dojo to make the request
type false input false String The type of submit to use. Valid values are input, button and image.
validate false false false Boolean Perform Ajax validation. 'ajaxValidation' interceptor must be applied to action
value false false String Preset the value of input element.

Examples

 <sx:submit value="%{'Submit'}" />

Render an image submit:

 <sx:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>

Render a button submit:

 <sx:submit type="button" value="%{'Submit'}" label="Submit the form"/>

Update target content with html returned from an action:

 <div id="div1">Div 1</div>
 <s:url id="ajaxTest" value="/AjaxTest.action"/>

 <sx:submit id="link1" href="%{ajaxTest}" target="div1" />

Submit form(inside the form):

 <s:form id="form" action="AjaxTest">
      <input type="textbox" name="data">
      <sx:submit />
 </s:form>

Submit form(outside the form):

 <s:form id="form" action="AjaxTest">
      <input type="textbox" name="data">
 </s:form>

 <sx:submit formId="form" />

Using beforeNotifyTopics:

 <script type="text/javascript">
 dojo.event.topic.subscribe("/before", function(event, widget){
     alert('inside a topic event. before request');
     //event: set event.cancel = true, to cancel request
     //widget: widget that published the topic
 });
 </script>

 <sx:submit beforeNotifyTopics="/before" />

Using afterNotifyTopics and highlight target:

 <script type="text/javascript">
 dojo.event.topic.subscribe("/after", function(data, request, widget){
     alert('inside a topic event. after request');
     //data : text returned from request(the html)
     //request: XMLHttpRequest object
     //widget: widget that published the topic
 });
 </script>

 <sx:submit afterNotifyTopics="/after" highlightColor="red" href="%{#ajaxTest}" />

Using errorNotifyTopics and indicator:

 <script type="text/javascript">
 dojo.event.topic.subscribe("/error", function(error, request, widget){
     alert('inside a topic event. on error');
     //error : error object (error.message has the error message)
     //request: XMLHttpRequest object
     //widget: widget that published the topic
 });
 </script>

 <img id="ind1" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/>
 <sx:submit errorNotifyTopics="/error" indicator="ind1" href="%{#ajaxTest}" />