Child pages
  • Ajax and JavaScript Recipes

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
This documentation refers to version 2.1 which has not been released yet.
Warning
2.12.1
titleDojo plugin is deprecated

The Dojo plugin will be deprecated on Struts 2.1

Table of Contents
minLevel3
indent20px
stylenone

...

Code Block
HTML
HTML
<script type="text/javascript">
  dojo.event.topic.subscribe("/value", function(textEnteredtext, date, widget){
      alert('value changed');
      //textEntered: String eneteredentered in the textbox
      //date: JavaScript Date object with the value selected
      //widetwidget: 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" />

...

Local Tabs
Code Block
HTML
HTML
<sx:tabbedpanel>
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>
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>

...

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

...

Code Block
HTML
HTML
<script type="text/javascript">
   function enableTab(idparam) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.enableTab(idparam);
   }
    
   
   function disableTab(indexparam) {
      var tabContainer = dojo.widget.byId('tabContainer');
      tabContainer.disableTab(indexparam);
   }
</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>
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>

...

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) {
      if(event.cancel = tab.widgetId == "tab1tab2") {
         event.cancel = true;
      }
   });
</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>

...

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>

...

Code Block
HTML
HTML
<sx:autocompleter list="{'apple','banana','grape','pear'}" value="apple" />
Force valid option (restore option when focus is lost)

...

Code Block
Java
Java
titleAutocompleterExample.java
public class AutocompleterExample extends ActionSupport {

   public Map<String, String> getOptions() {
      Map<String,String> options = new HashMap<String,String>();
      options.put("FLFlorida", "FloridaFL");
      options.put("ALAlabama", "AlabamaAL");

      return options;
   }
}

The mapping:

...

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
1JSP 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
javascript
javascript
titleMap(recommended as it is the easiest one to generate)
{
    "Alabama" : "AL",
    "Alaska"  : "AK"
}
Code Block
javascript
javascript
titleArray of arrays
[
    ["Alabama", "AL"],
    ["FloridaAlaska", "FLAK"]
]
Code Block
javascript
javascript
titleArray inside object, same name as field
{
    "state" : [
        ["Alabama","AL"],
        ["Alaska","AK"]
    ]
}     
Code Block
javascript
javascript
titleMap inside object, same name as field
{
    "state" : {
        "Alabama" : "ALAlabama",
        "Alaska"  : "AK"
    }
}    

Code Block
javascript
javascript
titleArray inside object, field in response starts with the name of the autocompleter("state" in this example)
{
    "states" : [
        ["Alabama","AL"],
        ["Alaska","AK"]
    ]
}     

...

Code Block
HTML
HTML
<sx:autocompleter autoComplete="false" href="%{#url}" />
Prevent options from loading when page loads
Code Block
HTML
HTML

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