Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > Ajax Tags > Ajax Recipes |
![]() |
This documentation refers to version 2.1 which has not been released yet. |
All examples on this page assume the following JSP fragment is on the same page as the example.
<%@ taglib prefix="s" uri="/struts-tags" %> <%@ taglib prefix="sx" uri="/struts-dojo-tags" %> <head> <sx:head /> </head> <s:url id="url" value="/MyAction.action" />
<s:submit value="Make Request" onclick="dojo.event.topic.publish('/request')" /> <sx:bind listenTopics="/request" href="%{#url}" />
<s:submit value="Make Request" id="submit" /> <sx:bind sources="submit" events="onclick" href="%{#url}" />
<s:submit value="Make Request" id="submit0" /> <s:submit value="Make Request" id="submit1" /> <sx:bind sources="submit0,submit1" events="onclick" href="%{#url}" />
<s:textarea id="area0" /> <s:textarea id="area1" /> <sx:bind sources="area0,area1" events="onfocus,onchange" href="%{#url}" />
<s:div id="div" /> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind targets="div" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit targets="div" value="Make Request" href="%{#url}" /> <!-- With an anchor tag --> <sx:a targets="div" value="Make Request" href="%{#url}" />
<s:div id="div0" /> <s:div id="div1" /> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind targets="div0,div1" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit targets="div0,div1" href="%{#url}" /> <!-- With an anchor tag --> <sx:a targets="div0,div1" href="%{#url}" />
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none" /> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind indicator="indicator" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit indicator="indicator" href="%{#url}" /> <!-- With an anchor tag --> <sx:a indicator="indicator" href="%{#url}" />
<s:div id="div" /> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind highlightColor="blue" highlightDuration="2000" targets="div" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit highlightColor="blue" highlightDuration="2000" targets="div" href="%{#url}" /> <!-- With an anchor tag --> <sx:a highlightColor="blue" highlightDuration="2000" targets="div" href="%{#url}" />
<s:div id="div" /> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind executeScripts="true" targets="div" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit executeScripts="true" targets="div" href="%{#url}" /> <!-- With an anchor tag --> <sx:a executeScripts="true" targets="div" href="%{#url}" />
<script type="text/javascript"> dojo.event.topic.subscribe("/before", function(event, widget){ alert('inside a topic event. before request'); //event: event object //widget: widget that published the topic }); </script> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind beforeNotifyTopics="/before" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit beforeNotifyTopics="/before" href="%{#url}" /> <!-- With an anchor tag --> <sx:a beforeNotifyTopics="/before" href="%{#url}" />
<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 //request: XMLHttpRequest object //widget: widget that published the topic }); </script> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind afterNotifyTopics="/after" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit afterNotifyTopics="/after" href="%{#url}" /> <!-- With an anchor tag --> <sx:a afterNotifyTopics="/after" href="%{#url}" />
<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> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind errorNotifyTopics="/error" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit errorNotifyTopics="/error" href="%{#url}" /> <!-- With an anchor tag --> <sx:a errorNotifyTopics="/error" href="%{#url}" />
<div id="div" /> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind errorText="Error Loading" targets="div" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit errorText="Error Loading" targets="div" href="%{#url}" /> <!-- With an anchor tag --> <sx:a errorText="Error Loading" targets="div" href="%{#url}" />
<script type="text/javascript"> dojo.event.topic.subscribe("/before", function(event, widget){ alert('I will stop this request'); event.cancel = true; }); </script> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind beforeNotifyTopics="/before" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit beforeNotifyTopics="/before" href="%{#url}" /> <!-- With an anchor tag --> <sx:a beforeNotifyTopics="/before" href="%{#url}" />
<form id="form"> <input type=textbox name="data"> </form> <!-- With a bind tag --> <s:submit value="Make Request" id="submit" /> <sx:bind formId="form" sources="submit" events="onclick" href="%{#url}" /> <!-- With a submit tag --> <sx:submit formId="form" href="%{#url}" /> <!-- With an anchor tag --> <sx:a formId="form" href="%{#url}" />
<!-- With a submit tag --> <s:form namespace="/mynamespace" action="MyAction"> <input type=textbox name="data"> <sx:submit /> </s:form> <!-- With an anchor tag --> <s:form namespace="/mynamespace" action="MyAction"> <input type=textbox name="data"> <sx:a /> </s:form>
<sx:div href="%{#url}"> Initial Content </sx:div>
<sx:div href="%{#url}" listenTopics="/refresh"> Initial Content </sx:div> <s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" />
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/> <sx:div href="%{#url}" updateFreq="2000"> Initial Content </sx:div>
<sx:div href="%{#url}" delay="2000"> Initial Content </sx:div>
<sx:div href="%{#url}" loadingText="reloading" showLoadingText="true"> Initial Content </sx:div>
<sx:div href="noaction" errorText="Error loading content"> Initial Content </sx:div>
<sx:div href="%{#url}" executeScripts="true"> Initial Content </sx:div>
<sx:div href="%{#url}" listenTopics="/refresh" startTimerListenTopics="/startTimer" stopTimerListenTopics="/stopTimer" updateFreq="3000"> Initial Content </sx:div> <s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" /> <s:submit value="Start refresh timer" onclick="dojo.event.topic.publish('/startTimer')" /> <s:submit value="Stop refresh timer" onclick="dojo.event.topic.publish('/stopTimer')" />
<sx:datetimepicker name="picker" />
<sx:datetimepicker type="time" name="picker" />
<sx:datetimepicker value="%{'2007-01-01'}" name="picker" />
<sx:datetimepicker value="date" name="picker" />
<script type="text/javascript"> function setValue() { var picker = dojo.widget.byId("picker"); //string value picker.setValue('2007-01-01'); //Date value picker.setValue(new Date()); } function showValue() { var picker = dojo.widget.byId("picker"); //string value var stringValue = picker.getValue(); alert(stringValue); //date value var dateValue = picker.getDate(); alert(dateValue); } </script> <sx:datetimepicker id="picker" />
<sx:datetimepicker id="picker" cssStye="background:red" cssClass="someclass"/>
<script type="text/javascript"> dojo.event.topic.subscribe("/value", function(textEntered, date, widget){ alert('value changed'); //textEntered: String enetered in the textbox //date: JavaScript Date object with the value selected //widet: widget that published the topic }); </script> <sx:datetimepicker label="Order Date" valueNotifyTopics="/value"/>
<sx:head extraLocales="en-us,nl-nl,de-de" /> <sx:datetimepicker label="In German" name="dddp7" value="%{'2006-06-28'}" language="de-de" /> <sx:datetimepicker label="In Dutch" name="dddp8" value="%{'2006-06-28'}" language="nl-nl" />
<sx:tabbedpanel> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel>
<sx:tabbedpanel> <sx:div label="Local Tab 1" > Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="%{#url}"> Remote Tab 2 </sx:div> </sx:tabbedpanel>
<sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel>
<sx:tabbedpanel> <sx:div label="Remote Tab 1" href="%{#url}"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="%{#url}" preload="false"> Remote Tab 1 </sx:div> </sx:tabbedpanel>
<sx:tabbedpanel> <sx:div label="Remote Tab 1" href="%{#url}" refreshOnShow="true"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="%{#url}" refreshOnShow="true"> Remote Tab 2 </sx:div> </sx:tabbedpanel>
<sx:tabbedpanel> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" disabled="true"> Local Tab 2 </sx:div> </sx:tabbedpanel>
<script type="text/javascript"> function enableTab(id) { var tabContainer = dojo.widget.byId('tabContainer'); tabContainer.enableTab(id); } function disableTab(index) { var tabContainer = dojo.widget.byId('tabContainer'); tabContainer.disableTab(index); } </script> <sx:tabbedpanel id="tabContainer"> <sx:div id="tab1" label="Tab 1" > Local Tab 1 </sx:div> <sx:div id="tab2" label="Tab 2" disabled="true"> Local Tab 2 </sx:div> </sx:tabbedpanel> <!-- By Tab Index --> <input type="button" onclick="enableTab(1)" value="Enable Tab 2 using Index" /> <input type="button" onclick="disableTab(1)" value="Disable Tab 2 using Index" /> <!-- By Tab Id --> <input type="button" onclick="enableTab('tab2')" value="Enable Tab 2 using Id" /> <input type="button" onclick="disableTab('tab2')" value="Disable Tab 2 using Id" /> <!-- By Widget --> <input type="button" onclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" /> <input type="button" onclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" />
<sx:tabbedpanel labelposition="bottom"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel>