bind

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

Description

This tag will generate event listeners for multiple events on multiple sources, making an asynchronous request to the specified href, and updating multiple targets.

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” 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">
        <s:submit id="btn" />
        <sx:bind sources="btn" events="onclick" targets="parentDiv" showLoadingText="false" indicator="loadingImage"/>
    </s:form>
</s:div>

Parameters

Name	Required	Default	Evaluated	Type	Description
Dynamic Attributes Allowed: false

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 is 'validate' is 'true'
beforeNotifyTopics	false		false	String	Comma delimmited list of topics that will published before the request
errorNotifyTopics	false		false	String	Comma delimmited list of topics that will published after the request(if the request fails)
errorText	false		false	String	The text to display to the user if the is an error fetching the content
events	false		false	String	Comma delimited list of event names to attach to
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	2000	false	Integer	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	Id of element that will be shown while making request
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
notifyTopics	false		false	String	Comma delimmited list of topics that will published before and after the request, and on errors
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
sources	false		false	String	Comma delimited list of ids of the elements to attach to
targets	false		false	String	Comma delimited list of ids of the elements whose content will be updated
transport	false	XMLHTTPTransport	false	String	Transport used by Dojo to make the request
validate	false	false	false	Boolean	Perform Ajax validation. 'ajaxValidation' interceptor must be applied to action

Examples

Without attaching to an event, listening to a topic (used to make an Ajax call):

 <sx:bind href="%{#ajaxTest}" listenTopics="/makecall"/>
 <s:submit onclick="dojo.event.topic.publish('/makecall')"/>

Attached to event ‘onclick’ on submit button:

 <img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
 <sx:bind id="ex1" href="%{#ajaxTest}" sources="button" targets="div1" events="onclick" indicator="indicator" />
 <s:submit theme="simple" type="submit" value="submit" id="button"/>

Submit form:

 <sx:bind id="ex3" href="%{#ajaxTest}" sources="chk1" targets="div1" events="onchange" formId="form1" />
 <form id="form1">
     <s:checkbox name="data" label="Hit me" id="chk1"/>
 </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>         
 
 <input type="button" id="button"> 
 <sx:bind id="ex1" href="%{#ajaxTest}" beforeNotifyTopics="/before" sources="button" events="onclick"/> 

Using afterNotifyTopics and highlight:

 <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>        
 
 <input type="button" id="button">
 <sx:bind id="ex1" href="%{#ajaxTest}" highlightColor="red" afterNotifyTopics="/after" sources="button" events="onclick"/>

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>         
 
 <input type="button" id="button">
 <img id="ind1" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/>
 <sx:bind href="%{#ajaxTest}" indicator="ind1" errorNotifyTopics="/error" sources="button" events="onclick"/>

bind

Dynamic Attributes Allowed:

Name

Required

Default

Evaluated

Type

Description