bind
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
Dynamic Attributes Allowed:false |
|||||
Name |
Required |
Default |
Evaluated |
Type |
Description |
---|---|---|---|---|---|
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"/>