Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > Tag Reference > UI Tag Reference > bind |
![]() |
To use this tag, the head tag must be included on the page |
This tag will generate event listeners for multiple events on multiple sources, making an asynchronous request to the specified href, and updating multiple targets.
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 |
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"/>