Page History

This documentation refers to version 2.1 which has not been released yet.

Warning

title	Dojo plugin is deprecated

The Dojo plugin will be deprecated on Struts 2.1

2.1

Table of Contents

minLevel	3
indent	20px
style	none

Common

All examples on this page assume the following JSP fragment is on the same page as the example.

Code Block

	HTML
	HTML

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

<head>
    <sx:head />
</head>

<s:url id="url" value="/MyAction.action" />

Requests

Request is triggered by a topic

Code Block

	HTML
	HTML

<s:submit value="Make Request" onclick="dojo.event.topic.publish('/request')" />
<sx:bind listenTopics="/request" href="%{#url}" />

Attached to an event

Code Block

	HTML
	HTML

<s:submit value="Make Request" id="submit" />
<sx:bind sources="submit" events="onclick" href="%{#url}" />

Attached to an event on multiple sources

Code Block

	HTML
	HTML

<s:submit value="Make Request" id="submit0" />
<s:submit value="Make Request" id="submit1" />
<sx:bind sources="submit0,submit1" events="onclick" href="%{#url}" />

Attached to multiple events on multiple sources

Code Block

	HTML
	HTML

<s:textarea id="area0" />
<s:textarea id="area1" />
<sx:bind sources="area0,area1" events="onfocus,onchange" href="%{#url}" />

Update target element with content returned from url

Code Block

	HTML
	HTML

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

Update multiple target elements with content returned from url

Code Block

	HTML
	HTML

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

Show indicator while request is in progress

Code Block

	HTML
	HTML

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

Highlight content of target with blue color, for 2 seconds

Code Block

	HTML
	HTML

<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

	HTML
	HTML

<script<s:div typeid="textdiv" /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" >

<!-- 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 beforeNotifyTopics executeScripts="true" targets="/beforediv" href="%{#url}" />

<!-- With an anchor tag -->
<sx:a beforeNotifyTopicsexecuteScripts="/beforetrue" targets="div" href="%{#url}" />

Publish a topic

...

before the request

Code Block

	HTML
	HTML

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

	HTML
	HTML

<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

	HTML
	HTML

<div<script idtype="divtext/javascript" />

<!-- Withdojo.event.topic.subscribe("/error", function(error, request, widget){
   alert('inside a bindtopic 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

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

	HTML
	HTML


<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

	HTML
	HTML


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

Submit a form (plain form)

Code Block

	HTML
	HTML


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

Submit a form (using s:form tag)

Code Block

	HTML
	HTML


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

Code Block

	HTML
	HTML


<sx:div href="%{#url}">
  Initial Content
</sx:div>

Reloads content when topic is published

Code Block

	HTML
	HTML


<sx:div href="%{#url}" listenTopics="/refresh">
  Initial Content
</sx:div>

<s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" />

Updates its content every 2 seconds, shows indicator while loading content

Code Block

	HTML
	HTML


<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

	HTML
	HTML


<sx:div href="%{#url}" delay="2000">
  Initial Content
</sx:div>

Show some text while content is loaded

Code Block

	HTML
	HTML


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

Execute JavaScript in the returned content

Code Block

	HTML
	HTML


<sx:div href="%{#url}" executeScripts="true">
  Initial Content
</sx:div>

Control refresh timer using topics

Code Block

	HTML
	HTML


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

Date and Time picker

Date picker

Code Block

	HTML
	HTML


<sx:datetimepicker name="picker" />

Time picker

Code Block

	HTML
	HTML


<sx:datetimepicker type="time" name="picker" />

Set value from an String

Code Block

	HTML
	HTML


<sx:datetimepicker value="%{'2007-01-01'}" name="picker" />

Set value from stack (value must evaluate to either a Date, Calendar, or an String that can be parsed using the formats defined in SimpleDateFormat, and RFC 3339)

Code Block

	HTML
	HTML


<sx:datetimepicker value="date" name="picker" />

Set/Get value using JavaScript

Code Block

	HTML
	HTML


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

Style the textbox

Code Block

	HTML
	HTML


<sx:datetimepicker id="picker" cssStye="background:red" cssClass="someclass"/>

Publish topic when value changes

Code Block

	HTML
	HTML


<script type="text/javascript">
  dojo.event.topic.subscribe("/value", function(text, date, widget){
      alert('value changed');
      //textEntered: String entered in the textbox
      //date: JavaScript Date object with the value selected
      //widget: widget that published the topic 
  });
</script> 

<sx:datetimepicker label="Order Date" valueNotifyTopics="/value"/>

Use other locales.

Warning
Locales must be specified in the sx:head tag.

Code Block

	HTML
	HTML


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

Tabbed Panel

Local Tabs

Code Block

	HTML
	HTML


<sx:tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" >
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Local and remote tabs

Code Block

	HTML
	HTML


<sx:tabbedpanel id="tabContainer">
   <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>

Fixed size (size does not adjust to current tab)

Code Block

	HTML
	HTML


<sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true" id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" >
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Do not load tab 2 when page loads (it will be loaded when selected)

Code Block

	HTML
	HTML


<sx:tabbedpanel id="tabContainer">
   <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>

Reload tabs content when selected

Code Block

	HTML
	HTML


<sx:tabbedpanel id="tabContainer">
   <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>

Disabled tabs

Code Block

	HTML
	HTML


<sx:tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" disabled="true">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Enable/Disable tabs using JavaScript

Code Block

	HTML
	HTML


<script type="text/javascript">
   function enableTab(param) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.enableTab(param);
   }
    
   
   function disableTab(param) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.disableTab(param);
   }
</script>

<sx:tabbedpanel id="tabContainer" 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" />

Set Tab labels position to bottom (can be: top, right, bottom, left)

Code Block

	HTML
	HTML


<sx:tabbedpanel labelposition="bottom" id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" >
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Allow tab 2 to be removed(closed)

Code Block

	HTML
	HTML


<sx:tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" >
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2"  closable="true">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Publish topics when tab is selected

Code Block

	HTML
	HTML


<script type="text/javascript">
   dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) {
      alert("Before selecting tab");
   });

   dojo.event.topic.subscribe('/after', function(tab, tabContainer) {
      alert("After tab was selected");
   });
</script>
<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" afterSelectTabNotifyTopics="/after" id="tabContainer">
   <sx:div label="Tab 1">
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Select tab using JavaScript

Code Block

	HTML
	HTML


<script type="text/javascript">
   function selectTab(id) {
     var tabContainer = dojo.widget.byId("tabContainer");
     tabContainer.selectTab(id);
   }
</script>
<sx:tabbedpanel id="tabContainer">
   <sx:div label="Tab 1" id="tab1">
       Local Tab 1
   </sx:div>   
   <sx:div label="Tab 2" id="tab2">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

<input type="button" onclick="selectTab('tab1')" value="Select tab 1" />
<input type="button" onclick="selectTab('tab2')" value="Select tab 2" />

Prevent tab 2 from being selected

Code Block

	HTML
	HTML


<script type="text/javascript">
   dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) {
      event.cancel = tab.widgetId == "tab2" ;
   });
</script>
<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" id="tabContainer">
   <sx:div id="tab1" label="Tab 1">
       Local Tab 1
   </sx:div>   
   <sx:div id="tab2" label="Tab 2">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Customize template css path (Dojo widget template css)

Code Block

	HTML
	HTML


<sx:tabbedpanel templateCssPath="%{#cssUrl}" id="tabContainer">
   <sx:div id="tab1" label="Tab 1">
       Local Tab 1
   </sx:div>   
   <sx:div id="tab2" label="Tab 2">
       Local Tab 2
   </sx:div>   
</sx:tabbedpanel>

Autocompleter

Fixed list

Code Block

	HTML
	HTML


<sx:autocompleter list="{'apple','banana','grape','pear'}" />

Set initial value

Code Block

	HTML
	HTML


<sx:autocompleter list="{'apple','banana','grape','pear'}" value="apple"/>

Force valid option (restore option when focus is lost)

Code Block

	HTML
	HTML


<sx:autocompleter list="{'apple','banana','grape','pear'}" forceValidOption="true"/>

Using the JSON plugin to generate the values (one of the possible ways)

The action

Code Block

	Java
	Java
title	AutocompleterExample.java


public class AutocompleterExample extends ActionSupport {

   public Map<String, String> getOptions() {
      Map<String,String> options = new HashMap<String,String>();
      options.put("Florida", "FL");
      options.put("Alabama", "AL");

      return options;
   }
}

The mapping:

Code Block

	XML
	XML
title	struts.xml


<struts>
...
   <package name="autocompleter" namespace="/autocompleter" extends="json-default">
       <action name="getStates" class="AutocompleterExample">
           <result type="json">
               <param name="root">options</param></result>
       </action>
   </package>
...
</struts>

The JSP (fragment):

Code Block

	HTML
	HTML
1	JSP page


<s:url id="optionsUrl" namespace="/autocompleter" action="getStates" />

<sx:autocompleter href="%{#optionsUrl}" />

Example action

When a form containing an autocompleter is submitted, two values will be submitted for each autocompleter, one for the selected value, and one for its associated key.

The action:

Code Block

	java
	java
title	MyAction.java


public MyAction extends ActionSupport {
    private String optionsKey;
    private String options;

    ...    
}

The JSP:

Code Block

	HTML
	HTML


<s:form id="form">
  <sx:autocompleter name="options" label="Options" />
</s:form>

Set initial key and value

Code Block

	HTML
	HTML
1	JSP page


<s:url id="optionsUrl" namespace="/autocompleter" action="getStates" />

<sx:autocompleter href="%{#optionsUrl}" value="Florida" keyValue="FL"/>

Change default key name

The action:

Code Block

	java
	java
title	MyAction.java


public MyAction extends ActionSupport {
    private String superKey;
    private String options;

    ...    
}

The JSP:

Code Block

	HTML
	HTML


<s:form id="form">
  <sx:autocompleter keyName="superKey" name="options" label="Options" />
</s:form>

JSON accepted

for this autocompleter:

Code Block

	HTML
	HTML


<sx:autocompleter name="state" />

The following JSON will be accepted:

Code Block

	javascript
	javascript
title	Map(recommended as it is the easiest one to generate)


{
    "Alabama" : "AL",
    "Alaska" : "AK"
}

Code Block

	javascript
	javascript
title	Array of arrays


[
    ["Alabama", "AL"],
    ["Alaska", "AK"]
]

Code Block

	javascript
	javascript
title	Array inside object, same name as field


{
    "state" : [
        ["Alabama","AL"],
        ["Alaska","AK"]
    ]
}

Code Block

	javascript
	javascript
title	Map inside object, same name as field


{
    "state" : {
        "Alabama" : "Alabama",
        "Alaska" : "AK"
    }
}

Code Block

	javascript
	javascript
title	Array inside object, field in response starts with the name of the autocompleter("state" in this example)


{
    "states" : [
        ["Alabama","AL"],
        ["Alaska","AK"]
    ]
}

Code Block

	javascript
	javascript
title	No name match, use first array found, and hope for the best


{
    "Australopithecus" : [
       ["Alabama","AL"],
       ["Alaska","AK"]
    ]
}

Load characters while user types (when text size >= 3)

Code Block

	HTML
	HTML


<sx:autocompleter href="%{#url}" loadOnTextChange="true" loadMinimumCount="3" />

Hide dropdown arrow

Code Block

	HTML
	HTML


<sx:autocompleter href="%{#url}" showDownArrow="false" />

Limit options shown to 3

Code Block

	HTML
	HTML


<sx:autocompleter href="%{#url}" resultsLimit="3" />

All matching options are shown

Code Block

	HTML
	HTML


<sx:autocompleter href="%{#url}" resultsLimit="-1" />

Set dropdown height and width, in pixels

Code Block

	HTML
	HTML


<sx:autocompleter href="%{#url}" dropdownHeight="180" dropdownWidth="200" />

Disable it when page is loaded

Code Block

	HTML
	HTML


<sx:autocompleter

Code Block

HTML


<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}" disabled="true" />

...

Disable it/enable it using JavaScript

Code Block

	HTML
	HTML

<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<script type="text/javascript">
  function enableit() {
     var autoCompleter = dojo.widget.byId("auto");
     autoCompleter.enable();
  }

  function disableit() {
     var autoCompleter = dojo.widget.byId("auto");
     autoCompleter.disable();
  }
</script>

<sx:autocompleter id="auto" href="%{#url}" />

<!-- With a submit tag -->
<sx:submit formId="form

Reload options when topic is published

Code Block

	HTML
	HTML


<sx:autocompleter listenTopics="/reload" href="%{#url}" />

Submit form when options are loaded

Code Block

	HTML
	HTML


<s:form id="form">
  <input type="textbox" name="data">
</s:form>

<sx:autocompleter
<!-- With an anchor tag -->
<sx:a formId="form" href="%{#url}"  />

...

Filter fields top be submitted when options are loaded (return true to include)

Code Block

	HTML
	HTML

<!-- With a submit tag -->
<s:form namespace="/mynamespace" action="MyAction"<script type="text/javascript">
  <input type=textbox name="data">
  <sx:submit />
</s:form>

<!-- With an anchor tag -->function filter(input) {
     return input.name == "data1";
  }
</script>

<s:form namespaceid="/mynamespace" action="MyAction"form">
  <input type="textbox" name="datadata0">
  <sx:a /<input type="textbox" name="data1">
</s:form>

Div

Loads its content after page is loaded

Code Block
HTML	HTML	<sx:divautocompleter formId="form" formFilter="filter" href="%{#url}"> Initial Content </sx:div>

...

/>

Link two autocompleters, using topics

Code Block

	HTML
	HTML

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

HTML


<sx:divselectForm">
   <sx:autocompleter  name="select" list="{'fruits','colors'}"  valueNotifyTopics="/changed" />
</form>

<sx:autocompleter  href="%{#url}" delayformId="2000selectForm">
  Initial Content
</sx:div>

...

 listenTopics="/changed" />

Show options, but don't make suggestion (autocomple) in the textbox

Code Block

	HTML
	HTML

<sx:divautocompleter autoComplete="false" href="%{#url}" loadingText="reloading" showLoadingText="true">
  Initial Content
</sx:div>

...

/>

Prevent options from loading when page loads

Code Block

	HTML
	HTML

<sx:divautocompleter hrefpreload="noactionfalse" errorTexthref="Error loading content">
  Initial Content
</sx:div>%{#url}" />

Child pages

Page History

Versions Compared

Old Version 9

New Version Current

Key

Common

Requests

Request is triggered by a topic

Attached to an event

Attached to an event on multiple sources

Attached to multiple events on multiple sources

Update target element with content returned from url

Update multiple target elements with content returned from url

Show indicator while request is in progress

Highlight content of target with blue color, for 2 seconds

Execute JavaScript in the returned content

Publish a topic

before the request

Publish a topic

after the request

Publish a

topic on error

Prevent a request

Show a fixed error message on error

Prevent a request

Submit a form (plain form)

Submit a form (using s:form tag)

Div

Loads its content after page is loaded

Reloads content when topic is published

Updates its content every 2 seconds, shows indicator while loading content

Loads its content after a delay of 2 seconds

Show some text while content is loaded

Fixed error message

Execute JavaScript in the returned content

Control refresh timer using topics

Date and Time picker

Date picker

Time picker

Set value from an String

Set value from stack (value must evaluate to either a Date, Calendar, or an String that can be parsed using the formats defined in SimpleDateFormat, and RFC 3339)

Set/Get value using JavaScript

Style the textbox

Publish topic when value changes

Use other locales.

Tabbed Panel

Local Tabs

Local and remote tabs

Fixed size (size does not adjust to current tab)

Do not load tab 2 when page loads (it will be loaded when selected)

Reload tabs content when selected

Disabled tabs

Enable/Disable tabs using JavaScript

Set Tab labels position to bottom (can be: top, right, bottom, left)

Allow tab 2 to be removed(closed)

Publish topics when tab is selected

Select tab using JavaScript

Prevent tab 2 from being selected

Customize template css path (Dojo widget template css)

Autocompleter

Fixed list

Set initial value

Force valid option (restore option when focus is lost)

Using the JSON plugin to generate the values (one of the possible ways)

Example action

Set initial key and value

Change default key name

JSON accepted

Load characters while user types (when text size >= 3)

Hide dropdown arrow

Limit options shown to 3

All matching options are shown

Set dropdown height and width, in pixels

Disable it when page is loaded

Disable it/enable it using JavaScript

Reload options when topic is published

Submit form when options are loaded

Filter fields top be submitted when options are loaded (return true to include)

Div