...
| Code Block |
|---|
|
<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}" />
|
...
Execute JavaScript in the returned content
| Code Block |
|---|
|
<script<s:div typeid="div"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 executeScripts="true" targets="div" sources="submit" events="onclick" href="%{#url}" />
<!-- With a bindsubmit tag -->
<s<sx:submit valueexecuteScripts="true"Make Requesttargets="div" idhref="submit%{#url}" />
<sx:bind beforeNotifyTopics="/before" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit
<!-- With an anchor tag -->
<sx:submit beforeNotifyTopicsa executeScripts="true" targets="/beforediv" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a beforeNotifyTopics="/before" href="%{#url}" />
|
...
Publish a topic before the request
| Code Block |
|---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/afterbefore", function(data, requestevent, widget){
alert('inside a topic event. afterbefore request');
//data event: text returned from request
//request: XMLHttpRequest event object
//widget: widget that published the topic
});
</script>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind afterNotifyTopicsbeforeNotifyTopics="/afterbefore" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit afterNotifyTopicsbeforeNotifyTopics="/afterbefore" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a afterNotifyTopicsbeforeNotifyTopics="/afterbefore" href="%{#url}" />
|
Publish a topic
...
after the request
| Code Block |
|---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/errorafter", function(errordata, request, widget){
alert('inside a topic event. onafter errorrequest');
//errordata : errortext object (error.message has the error message)
/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 errorNotifyTopicsafterNotifyTopics="/errorafter" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit errorNotifyTopicsafterNotifyTopics="/errorafter" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a errorNotifyTopicsafterNotifyTopics="/errorafter" href="%{#url}" />
|
...
Publish a
...
topic on error
| Code Block |
|---|
|
<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}" />
|
Show a fixed error message on error
| Code Block |
|---|
|
<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}" />
|
Prevent a request
| Code Block |
|---|
|
<script type="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
alert('I will stop this request');
event.cancel = true;
});
</script>
<div id="div" />
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind errorTextbeforeNotifyTopics="Error Loading" targets="div/before" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit errorTextbeforeNotifyTopics="Error Loading/before" targets="div" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a errorTextbeforeNotifyTopics="Error Loading/before" targets="div" href="%{#url}" />
|
...
Submit a form (plain form)
| Code Block |
|---|
|
<script<form typeid="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
alert('I will stop this request');
event.cancel = true;
});
</script>
form">
<input type=textbox name="data">
</form>
<!-- With a bind tag -->
<s:submit value="Make Request" id="submit" />
<sx:bind beforeNotifyTopicsformId="/beforeform" sources="submit" events="onclick" href="%{#url}" />
<!-- With a submit tag -->
<sx:submit beforeNotifyTopicsformId="/beforeform" href="%{#url}" />
<!-- With an anchor tag -->
<sx:a beforeNotifyTopicsformId="/beforeform" href="%{#url}" />
|
Submit a form (
...
using s:form tag)
| Code Block |
|---|
|
<!-- With a submit tag -->
<s:form namespace="/mynamespace" action="MyAction
<form id="form">
<input type=textbox name="data">
<sx:submit />
</s:form>
<!-- With aan bindanchor tag -->
<s:submitform namespace="/mynamespace" action="MyAction">
<input type=textbox name="data">
<sx:a />
</s:form>
|
Div
Loads its content after page is loaded
| Code Block |
|---|
|
<sx:div 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}" />
|
...
Initial Content
</sx:div>
|
Updates its content every 2 seconds, shows indicator while loading content
| Code Block |
|---|
|
<!-- 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>
|
Div
Loads its content after page is loaded
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/>
<sx:div href="%{#url}" updateFreq="2000">
Initial Content
</sx:div>
|
Loads its content after a delay of 2 seconds
| Code Block |
|---|
|
<sx:div href="%{#url}" delay="2000">
Initial Content
</sx:div>
|
Show some text while content is loaded
| Code Block |
|---|
|
<sx:div href="%{#url}" loadingText="reloading" showLoadingText="true">
Initial Content
</sx:div>
|
Fixed error message
| Code Block |
|---|
|
<sx:div href="noaction" errorText="%{#url}Error loading content">
Initial Content
</sx:div>
|
...
Execute JavaScript in the returned content
| Code Block |
|---|
|
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/>
<sx:div href="%{#url}" updateFreqexecuteScripts="2000true">
Initial Content
</sx:div>
|
Loads its content after a delay of 2 seconds
Control refresh timer using topics
| Code Block |
|---|
|
<sx:div href="%{#url}"
listenTopics="/refresh"
startTimerListenTopics="/startTimer"
stopTimerListenTopics="/stopTimer"
updateFreq="3000 |
| Code Block |
|---|
| HTML | HTML |
<sx:div href="%{#url}" delay="2000">
Initial Content
</sx:div>
|
Show some text while content is loaded
...
<sx:div href="%{#url}" loadingText="reloading" showLoadingText="true">
Initial Content
</sx:div>
Fixed error message
| Code Block |
|---|
| HTML | HTML |
<sx:div href="noaction" errorText="Error loading content">
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')" />
|
