Edit on GitHub

# 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"/>