Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > Tag Reference > UI Tag Reference > bind
Added by Musachy Barroso, last edited by Musachy Barroso on Sep 20, 2007

To use this tag, the head tag must be included on the page

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.

Parameters

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 calidation. 'ajaxValidation' interceptor must be applied to action

Examples

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

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

Attached to event 'onclick' on submit button:

<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>

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

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

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

rutsTag(name="bind", tldTagClass="org.apache.struts2.dojo.views.jsp.ui.BindTag", description="Attach event listeners to elements to make AJAX calls")
rutsTagSkipInheritance
lic class Bind extends AbstractValidateBean {
 public static final String TEMPLATE = "bind-close";
 public static final String OPEN_TEMPLATE = "bind";

 protected String targets;
 protected String sources;
 protected String events;

 public Bind(ValueStack stack, HttpServletRequest request, HttpServletResponse response) {
     super(stack, request, response);
 }

 public String getDefaultOpenTemplate() {
     return OPEN_TEMPLATE;
 }

 protected String getDefaultTemplate() {
     return TEMPLATE;
 }

 public void evaluateExtraParams() {
     super.evaluateExtraParams();

     if (targets != null)
         addParameter("targets", findString(targets));
     if (sources != null)
         addParameter("sources", findString(sources));
     if (events != null)
         addParameter("events", findString(events));
 }
 
 @StrutsTagAttribute(description="Comma delimited list of event names to attach to")
 public void setEvents(String events) {
     this.events = events;
 }

 @StrutsTagAttribute(description="Comma delimited list of ids of the elements to attach to")
 public void setSources(String sources) {
     this.sources = sources;
 }

 @StrutsTagAttribute(description="Comma delimited list of ids of the elements whose content will be updated")
 public void setTargets(String targets) {
     this.targets = targets;
 }
 
 @Override
 @StrutsTagSkipInheritance
 public void setTheme(String theme) {
     super.setTheme(theme);
 }
 
 @Override
 public String getTheme() {
     return "ajax";
 }

 //these attributes are overwritten here just for the TLD generation
 
 @StrutsTagAttribute(description="Topic that will trigger the remote call")
 public void setListenTopics(String listenTopics) {
     this.listenTopics = listenTopics;
 }

 @StrutsTagAttribute(description="The URL to call to obtain the content. Note: If used with ajax context, the value must be set as an url tag value.")
 public void setHref(String href) {
     this.href = href;
 }


 @StrutsTagAttribute(description="The text to display to the user if the is an error fetching the content")
 public void setErrorText(String errorText) {
     this.errorText = errorText;
 }

 @StrutsTagAttribute(description="Javascript code in the fetched content will be executed", type="Boolean", defaultValue="false")
 public void setExecuteScripts(String executeScripts) {
     this.executeScripts = executeScripts;
 }

 @StrutsTagAttribute(description="Text to be shown while content is being fetched", defaultValue="Loading...")
 public void setLoadingText(String loadingText) {
     this.loadingText = loadingText;
 }


 @StrutsTagAttribute(description="Javascript function name that will make the request")
 public void setHandler(String handler) {
     this.handler = handler;
 }


 @StrutsTagAttribute(description="Function name used to filter the fields of the form.")
 public void setFormFilter(String formFilter) {
     this.formFilter = formFilter;
 }

 @StrutsTagAttribute(description="Form id whose fields will be serialized and passed as parameters")
 public void setFormId(String formId) {
     this.formId = formId;
 }

 @StrutsTagAttribute(description="Comma delimmited list of topics that will published before and after the request, and on errors")
 public void setNotifyTopics(String notifyTopics) {
     this.notifyTopics = notifyTopics;
 }

 @StrutsTagAttribute(description="Set whether errors will be shown or not", type="Boolean", defaultValue="true")
 public void setShowErrorTransportText(String showError) {
     this.showErrorTransportText = showError;
 }

 @StrutsTagAttribute(description="Id of element that will be shown while making request")
 public void setIndicator(String indicator) {
     this.indicator = indicator;
 }

 @StrutsTagAttribute(description="Show loading text on targets", type="Boolean", defaultValue="false")
 public void setShowLoadingText(String showLoadingText) {
     this.showLoadingText = showLoadingText;
 }

 @StrutsTagSkipInheritance
 public void setCssClass(String cssClass) {
     super.setCssClass(cssClass);
 }

 @StrutsTagSkipInheritance
 public void setCssStyle(String cssStyle) {
     super.setCssStyle(cssStyle);
 }

 @StrutsTagSkipInheritance
 public void setName(String name) {
     super.setName(name);
 }

 @StrutsTagAttribute(description="Comma delimmited list of topics that will published after the request(if the request succeeds)")
 public void setAfterNotifyTopics(String afterNotifyTopics) {
     this.afterNotifyTopics = afterNotifyTopics;
 }

 @StrutsTagAttribute(description="Comma delimmited list of topics that will published before the request")
 public void setBeforeNotifyTopics(String beforeNotifyTopics) {
     this.beforeNotifyTopics = beforeNotifyTopics;
 }

 @StrutsTagAttribute(description="Comma delimmited list of topics that will published after the request(if the request fails)")
 public void setErrorNotifyTopics(String errorNotifyTopics) {
     this.errorNotifyTopics = errorNotifyTopics;
 }
 
 @StrutsTagAttribute(description="The id to use for the element")
 public void setId(String id) {
     super.setId(id);
 }
 
 @StrutsTagAttribute(description = "Color used to perform a highlight effect on the elements specified in the 'targets' attribute", 
     defaultValue = "none")
 public void setHighlightColor(String highlightColor) {
     this.highlightColor = highlightColor;
 }

 @StrutsTagAttribute(description = "Duration of highlight effect in milliseconds. Only valid if 'highlightColor' attribute is set", 
     defaultValue = "2000", type="Integer")
 public void setHighlightDuration(String highlightDuration) {
     this.highlightDuration = highlightDuration;
 }
 
 @StrutsTagAttribute(description = "Perform Ajax calidation. 'ajaxValidation' interceptor must be applied to action", type="Boolean", 
     defaultValue = "false")
 public void setValidate(String validate) {
     this.validate = validate;
 }
 
 @StrutsTagAttribute(description = "Make an asynchronous request if validation succeeds. Only valid is 'validate' is 'true'", type="Boolean", 
     defaultValue = "false")
 public void setAjaxAfterValidation(String ajaxAfterValidation) {
     this.ajaxAfterValidation = ajaxAfterValidation;
 }
 
 @StrutsTagAttribute(description="Run scripts in a separate scope, unique for each tag", defaultValue="true")
 public void setSeparateScripts(String separateScripts) {
     this.separateScripts = separateScripts;
 }
 
 @StrutsTagAttribute(description="Transport used by Dojo to make the request", defaultValue="XMLHTTPTransport")
 public void setTransport(String transport) {
     this.transport = transport;
 }

Submit 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 insicator:

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