output/tag-developers/ajax-and-javascript-recipes.html - struts-site - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <meta name="Date-Revision-yyyymmdd" content="20140918"/>
   <meta http-equiv="Content-Language" content="en"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

   <title>Ajax and JavaScript Recipes</title>

   <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css">
   <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
   <link href="/css/main.css" rel="stylesheet">
   <link href="/css/custom.css" rel="stylesheet">
   <link href="/css/syntax.css" rel="stylesheet">

   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
   <script type="text/javascript" src="/js/community.js"></script>

   <!-- Matomo -->
   <script>
     var _paq = window._paq = window._paq || [];
     /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
     /* We explicitly disable cookie tracking to avoid privacy issues */
     _paq.push(['disableCookies']);
     _paq.push(['trackPageView']);
     _paq.push(['enableLinkTracking']);
     (function() {
       var u="//analytics.apache.org/";
       _paq.push(['setTrackerUrl', u+'matomo.php']);
       _paq.push(['setSiteId', '41']);
       var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
       g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
     })();
   </script>
   <!-- End Matomo Code -->
 </head>
 <body>

 <a href="https://github.com/apache/struts" class="github-ribbon">
   <img decoding="async" loading="lazy" style="position: absolute; right: 0; border: 0;" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
 </a>

 <header>
   <nav>
     <div role="navigation" class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle">
             Menu
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a>
         </div>
         <div id="struts-menu" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="dropdown">
               <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                 Home<b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                 <li><a href="/index.html">Welcome</a></li>
                 <li><a href="/download.cgi">Download</a></li>
                 <li><a href="/releases.html">Releases</a></li>
                 <li><a href="/announce-2024.html">Announcements</a></li>
                 <li><a href="http://www.apache.org/licenses/">License</a></li>
                 <li><a href="https://www.apache.org/foundation/thanks.html">Thanks!</a></li>
                 <li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
                 <li><a href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy Policy</a></li>
               </ul>
             </li>
             <li class="dropdown">
               <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                 Support<b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                 <li><a href="/mail.html">User Mailing List</a></li>
                 <li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li>
                 <li><a href="/security.html">Reporting Security Issues</a></li>
                 <li><a href="/commercial-support.html">Commercial Support</a></li>
                 <li class="divider"></li>
                 <li><a href="https://cwiki.apache.org/confluence/display/WW/Migration+Guide">Version Notes</a></li>
                 <li><a href="https://cwiki.apache.org/confluence/display/WW/Security+Bulletins">Security Bulletins</a></li>
                 <li class="divider"></li>
                 <li><a href="/maven/project-info.html">Maven Project Info</a></li>
                 <li><a href="/maven/struts2-core/dependencies.html">Struts Core Dependencies</a></li>
                 <li><a href="/maven/struts2-plugins/modules.html">Plugin Dependencies</a></li>
               </ul>
             </li>
             <li class="dropdown">
               <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                 Documentation<b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                 <li><a href="/birdseye.html">Birds Eye</a></li>
                 <li><a href="/primer.html">Key Technologies</a></li>
                 <li><a href="/kickstart.html">Kickstart FAQ</a></li>
                 <li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li>
                 <li class="divider"></li>
                 <li><a href="/getting-started/">Getting Started</a></li>
                 <li><a href="/security/">Security Guide</a></li>
                 <li><a href="/core-developers/">Core Developers Guide</a></li>
                 <li><a href="/tag-developers/">Tag Developers Guide</a></li>
                 <li><a href="/maven-archetypes/">Maven Archetypes</a></li>
                 <li><a href="/plugins/">Plugins</a></li>
                 <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li>
                 <li><a href="/tag-developers/tag-reference.html">Tag reference</a></li>
                 <li><a href="https://cwiki.apache.org/confluence/display/WW/FAQs">FAQs</a></li>
                 <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li>
               </ul>
             </li>
             <li class="dropdown">
               <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                 Contributing<b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                 <li><a href="/youatstruts.html">You at Struts</a></li>
                 <li><a href="/helping.html">How to Help FAQ</a></li>
                 <li><a href="/dev-mail.html">Development Lists</a></li>
                 <li class="divider"></li>
                 <li><a href="/submitting-patches.html">Submitting patches</a></li>
                 <li><a href="/builds.html">Source Code and Builds</a></li>
                 <li><a href="/coding-standards.html">Coding standards</a></li>
                 <li><a href="/contributors/">Contributors Guide</a></li>
                 <li class="divider"></li>
                 <li><a href="/release-guidelines.html">Release Guidelines</a></li>
                 <li><a href="/bylaws.html">PMC Charter</a></li>
                 <li><a href="/volunteers.html">Volunteers</a></li>
                 <li><a href="https://gitbox.apache.org/repos/asf?p=struts.git">Source Repository</a></li>
                 <li><a href="/updating-website.html">Updating the website</a></li>
               </ul>
             </li>
             <li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li>
           </ul>
         </div>
       </div>
     </div>
   </nav>
 </header>


 <article class="container">
   <section class="col-md-12">
     <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/ajax-and-javascript-recipes.md" title="Edit this page on GitHub">Edit on GitHub</a>

     <a href="index" title="back to Tag Developers Guide"><< back to Tag Developers Guide</a>

     <h1 class="no_toc" id="ajax-and-javascript-recipes">Ajax and JavaScript Recipes</h1>

 <ul id="markdown-toc">
   <li><a href="#common" id="markdown-toc-common">Common</a></li>
   <li><a href="#requests" id="markdown-toc-requests">Requests</a>    <ul>
       <li><a href="#request-is-triggered-by-a-topic" id="markdown-toc-request-is-triggered-by-a-topic">Request is triggered by a topic</a></li>
       <li><a href="#attached-to-an-event" id="markdown-toc-attached-to-an-event">Attached to an event</a></li>
       <li><a href="#attached-to-an-event-on-multiple-sources" id="markdown-toc-attached-to-an-event-on-multiple-sources">Attached to an event on multiple sources</a></li>
       <li><a href="#attached-to-multiple-events-on-multiple-sources" id="markdown-toc-attached-to-multiple-events-on-multiple-sources">Attached to multiple events on multiple sources</a></li>
       <li><a href="#update-target-element-with-content-returned-from-url" id="markdown-toc-update-target-element-with-content-returned-from-url">Update target element with content returned from url</a></li>
       <li><a href="#update-multiple-target-elements-with-content-returned-from-url" id="markdown-toc-update-multiple-target-elements-with-content-returned-from-url">Update multiple target elements with content returned from url</a></li>
       <li><a href="#show-indicator-while-request-is-in-progress" id="markdown-toc-show-indicator-while-request-is-in-progress">Show indicator while request is in progress</a></li>
       <li><a href="#highlight-content-of-target-with-blue-color-for-2-seconds" id="markdown-toc-highlight-content-of-target-with-blue-color-for-2-seconds">Highlight content of target with blue color, for 2 seconds</a></li>
       <li><a href="#execute-javascript-in-the-returned-content" id="markdown-toc-execute-javascript-in-the-returned-content">Execute JavaScript in the returned content</a></li>
       <li><a href="#publish-a-topic-before-the-request" id="markdown-toc-publish-a-topic-before-the-request">Publish a topic before the request</a></li>
       <li><a href="#publish-a-topic-after-the-request" id="markdown-toc-publish-a-topic-after-the-request">Publish a topic after the request</a></li>
       <li><a href="#publish-a-topic-on-error" id="markdown-toc-publish-a-topic-on-error">Publish a topic on error</a></li>
       <li><a href="#show-a-fixed-error-message-on-error" id="markdown-toc-show-a-fixed-error-message-on-error">Show a fixed error message on error</a></li>
       <li><a href="#prevent-a-request" id="markdown-toc-prevent-a-request">Prevent a request</a></li>
       <li><a href="#submit-a-form-plain-form" id="markdown-toc-submit-a-form-plain-form">Submit a form (plain form)</a></li>
       <li><a href="#submit-a-form-using-sform-tag" id="markdown-toc-submit-a-form-using-sform-tag">Submit a form (using s:form tag)</a></li>
     </ul>
   </li>
   <li><a href="#div" id="markdown-toc-div">Div</a>    <ul>
       <li><a href="#loads-its-content-after-page-is-loaded" id="markdown-toc-loads-its-content-after-page-is-loaded">Loads its content after page is loaded</a></li>
       <li><a href="#reloads-content-when-topic-is-published" id="markdown-toc-reloads-content-when-topic-is-published">Reloads content when topic is published</a></li>
       <li><a href="#updates-its-content-every-2-seconds-shows-indicator-while-loading-content" id="markdown-toc-updates-its-content-every-2-seconds-shows-indicator-while-loading-content">Updates its content every 2 seconds, shows indicator while loading content</a></li>
       <li><a href="#loads-its-content-after-a-delay-of-2-seconds" id="markdown-toc-loads-its-content-after-a-delay-of-2-seconds">Loads its content after a delay of 2 seconds</a></li>
       <li><a href="#show-some-text-while-content-is-loaded" id="markdown-toc-show-some-text-while-content-is-loaded">Show some text while content is loaded</a></li>
       <li><a href="#fixed-error-message" id="markdown-toc-fixed-error-message">Fixed error message</a></li>
       <li><a href="#execute-javascript-in-the-returned-content-1" id="markdown-toc-execute-javascript-in-the-returned-content-1">Execute JavaScript in the returned content</a></li>
       <li><a href="#control-refresh-timer-using-topics" id="markdown-toc-control-refresh-timer-using-topics">Control refresh timer using topics</a></li>
     </ul>
   </li>
   <li><a href="#date-and-time-picker" id="markdown-toc-date-and-time-picker">Date and Time picker</a>    <ul>
       <li><a href="#date-picker" id="markdown-toc-date-picker">Date picker</a></li>
       <li><a href="#time-picker" id="markdown-toc-time-picker">Time picker</a></li>
       <li><a href="#set-value-from-an-string" id="markdown-toc-set-value-from-an-string">Set value from an String</a></li>
       <li><a href="#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" id="markdown-toc-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 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)</a></li>
       <li><a href="#setget-value-using-javascript" id="markdown-toc-setget-value-using-javascript">Set/Get value using JavaScript</a></li>
       <li><a href="#style-the-textbox" id="markdown-toc-style-the-textbox">Style the textbox</a></li>
       <li><a href="#publish-topic-when-value-changes" id="markdown-toc-publish-topic-when-value-changes">Publish topic when value changes</a></li>
       <li><a href="#use-other-locales" id="markdown-toc-use-other-locales">Use other locales</a></li>
     </ul>
   </li>
   <li><a href="#tabbed-panel" id="markdown-toc-tabbed-panel">Tabbed Panel</a>    <ul>
       <li><a href="#local-tabs" id="markdown-toc-local-tabs">Local Tabs</a></li>
       <li><a href="#local-and-remote-tabs" id="markdown-toc-local-and-remote-tabs">Local and remote tabs</a></li>
       <li><a href="#fixed-size-size-does-not-adjust-to-current-tab" id="markdown-toc-fixed-size-size-does-not-adjust-to-current-tab">Fixed size (size does not adjust to current tab)</a></li>
       <li><a href="#do-not-load-tab-2-when-page-loads-it-will-be-loaded-when-selected" id="markdown-toc-do-not-load-tab-2-when-page-loads-it-will-be-loaded-when-selected">Do not load tab 2 when page loads (it will be loaded when selected)</a></li>
       <li><a href="#reload-tabs-content-when-selected" id="markdown-toc-reload-tabs-content-when-selected">Reload tabs content when selected</a></li>
       <li><a href="#disabled-tabs" id="markdown-toc-disabled-tabs">Disabled tabs</a></li>
       <li><a href="#enabledisable-tabs-using-javascript" id="markdown-toc-enabledisable-tabs-using-javascript">Enable/Disable tabs using JavaScript</a></li>
       <li><a href="#set-tab-labels-position-to-bottom-can-be-top-right-bottom-left" id="markdown-toc-set-tab-labels-position-to-bottom-can-be-top-right-bottom-left">Set Tab labels position to bottom (can be: top, right, bottom, left)</a></li>
       <li><a href="#allow-tab-2-to-be-removedclosed" id="markdown-toc-allow-tab-2-to-be-removedclosed">Allow tab 2 to be removed(closed)</a></li>
       <li><a href="#publish-topics-when-tab-is-selected" id="markdown-toc-publish-topics-when-tab-is-selected">Publish topics when tab is selected</a></li>
       <li><a href="#select-tab-using-javascript" id="markdown-toc-select-tab-using-javascript">Select tab using JavaScript</a></li>
       <li><a href="#prevent-tab-2-from-being-selected" id="markdown-toc-prevent-tab-2-from-being-selected">Prevent tab 2 from being selected</a></li>
       <li><a href="#customize-template-css-path-dojo-widget-template-css" id="markdown-toc-customize-template-css-path-dojo-widget-template-css">Customize template css path (Dojo widget template css)</a></li>
     </ul>
   </li>
   <li><a href="#autocompleter" id="markdown-toc-autocompleter">Autocompleter</a>    <ul>
       <li><a href="#fixed-list" id="markdown-toc-fixed-list">Fixed list</a></li>
       <li><a href="#set-initial-value" id="markdown-toc-set-initial-value">Set initial value</a></li>
       <li><a href="#force-valid-option-restore-option-when-focus-is-lost" id="markdown-toc-force-valid-option-restore-option-when-focus-is-lost">Force valid option (restore option when focus is lost)</a></li>
       <li><a href="#using-the-json-plugin-to-generate-the-values-one-of-the-possible-ways" id="markdown-toc-using-the-json-plugin-to-generate-the-values-one-of-the-possible-ways">Using the JSON plugin to generate the values (one of the possible ways)</a></li>
       <li><a href="#example-action" id="markdown-toc-example-action">Example action</a></li>
       <li><a href="#set-initial-key-and-value" id="markdown-toc-set-initial-key-and-value">Set initial key and value</a></li>
       <li><a href="#change-default-key-name" id="markdown-toc-change-default-key-name">Change default key name</a></li>
       <li><a href="#json-accepted" id="markdown-toc-json-accepted">JSON accepted</a></li>
       <li><a href="#load-characters-while-user-types-when-text-size--3" id="markdown-toc-load-characters-while-user-types-when-text-size--3">Load characters while user types (when text size &gt;= 3)</a></li>
       <li><a href="#hide-dropdown-arrow" id="markdown-toc-hide-dropdown-arrow">Hide dropdown arrow</a></li>
       <li><a href="#limit-options-shown-to-3" id="markdown-toc-limit-options-shown-to-3">Limit options shown to 3</a></li>
       <li><a href="#all-matching-options-are-shown" id="markdown-toc-all-matching-options-are-shown">All matching options are shown</a></li>
       <li><a href="#set-dropdown-height-and-width-in-pixels" id="markdown-toc-set-dropdown-height-and-width-in-pixels">Set dropdown height and width, in pixels</a></li>
       <li><a href="#disable-it-when-page-is-loaded" id="markdown-toc-disable-it-when-page-is-loaded">Disable it when page is loaded</a></li>
       <li><a href="#disable-itenable-it-using-javascript" id="markdown-toc-disable-itenable-it-using-javascript">Disable it/enable it using JavaScript</a></li>
       <li><a href="#reload-options-when-topic-is-published" id="markdown-toc-reload-options-when-topic-is-published">Reload options when topic is published</a></li>
       <li><a href="#submit-form-when-options-are-loaded" id="markdown-toc-submit-form-when-options-are-loaded">Submit form when options are loaded</a></li>
       <li><a href="#filter-fields-top-be-submitted-when-options-are-loaded-return-true-to-include" id="markdown-toc-filter-fields-top-be-submitted-when-options-are-loaded-return-true-to-include">Filter fields top be submitted when options are loaded (return true to include)</a></li>
       <li><a href="#link-two-autocompleters-using-topics" id="markdown-toc-link-two-autocompleters-using-topics">Link two autocompleters, using topics</a></li>
       <li><a href="#show-options-but-dont-make-suggestion-autocomple-in-the-textbox" id="markdown-toc-show-options-but-dont-make-suggestion-autocomple-in-the-textbox">Show options, but don’t make suggestion (autocomple) in the textbox</a></li>
       <li><a href="#prevent-options-from-loading-when-page-loads" id="markdown-toc-prevent-options-from-loading-when-page-loads">Prevent options from loading when page loads</a></li>
     </ul>
   </li>
 </ul>

 <blockquote>
   <p>NOTE: Ajax template (Dojo plugin) is deprecated and won’t be supported any longer.</p>
 </blockquote>

 <h2 id="common">Common</h2>

 <p>All examples on this page assume the following JSP fragment is on the same page as the example.</p>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;%@ taglib </span><span class="na">prefix=</span><span class="s">"s"</span><span class="na"> uri=</span><span class="s">"/struts-tags"</span> <span class="nt">%&gt;</span>
 <span class="nt">&lt;%@ taglib </span><span class="na">prefix=</span><span class="s">"sx"</span><span class="na"> uri=</span><span class="s">"/struts-dojo-tags"</span> <span class="nt">%&gt;</span>

 <span class="nt">&lt;head&gt;</span>
     <span class="nt">&lt;sx:head /&gt;</span>
 <span class="nt">&lt;/head&gt;</span>

 <span class="nt">&lt;s:url </span><span class="na">id=</span><span class="s">"url"</span><span class="na"> value=</span><span class="s">"/MyAction.action"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h2 id="requests">Requests</h2>

 <h3 id="request-is-triggered-by-a-topic">Request is triggered by a topic</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> onclick=</span><span class="s">"dojo.event.topic.publish('/request')"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">listenTopics=</span><span class="s">"/request"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="attached-to-an-event">Attached to an event</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="attached-to-an-event-on-multiple-sources">Attached to an event on multiple sources</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit0"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit1"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">sources=</span><span class="s">"submit0,submit1"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="attached-to-multiple-events-on-multiple-sources">Attached to multiple events on multiple sources</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:textarea </span><span class="na">id=</span><span class="s">"area0"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;s:textarea </span><span class="na">id=</span><span class="s">"area1"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">sources=</span><span class="s">"area0,area1"</span><span class="na"> events=</span><span class="s">"onfocus,onchange"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="update-target-element-with-content-returned-from-url">Update target element with content returned from url</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:div </span><span class="na">id=</span><span class="s">"div"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">targets=</span><span class="s">"div"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">targets=</span><span class="s">"div"</span><span class="na"> value=</span><span class="s">"Make Request"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">targets=</span><span class="s">"div"</span><span class="na"> value=</span><span class="s">"Make Request"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="update-multiple-target-elements-with-content-returned-from-url">Update multiple target elements with content returned from url</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:div </span><span class="na">id=</span><span class="s">"div0"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;s:div </span><span class="na">id=</span><span class="s">"div1"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">targets=</span><span class="s">"div0,div1"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">targets=</span><span class="s">"div0,div1"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">targets=</span><span class="s">"div0,div1"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="show-indicator-while-request-is-in-progress">Show indicator while request is in progress</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;img</span> <span class="na">id=</span><span class="s">"indicator"</span> <span class="na">src=</span><span class="s">"${pageContext.request.contextPath}/images/indicator.gif"</span> <span class="na">style=</span><span class="s">"display:none"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">indicator=</span><span class="s">"indicator"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">indicator=</span><span class="s">"indicator"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">indicator=</span><span class="s">"indicator"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="highlight-content-of-target-with-blue-color-for-2-seconds">Highlight content of target with blue color, for 2 seconds</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:div </span><span class="na">id=</span><span class="s">"div"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">highlightColor=</span><span class="s">"blue"</span><span class="na"> highlightDuration=</span><span class="s">"2000"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">highlightColor=</span><span class="s">"blue"</span><span class="na"> highlightDuration=</span><span class="s">"2000"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">highlightColor=</span><span class="s">"blue"</span><span class="na"> highlightDuration=</span><span class="s">"2000"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="execute-javascript-in-the-returned-content">Execute JavaScript in the returned content</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:div </span><span class="na">id=</span><span class="s">"div"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">executeScripts=</span><span class="s">"true"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">executeScripts=</span><span class="s">"true"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">executeScripts=</span><span class="s">"true"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="publish-a-topic-before-the-request">Publish a topic before the request</h3>

 <p>``html
 <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></p>

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

 <p>``</p>

 <h3 id="publish-a-topic-after-the-request">Publish a topic after the request</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
 <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">"</span><span class="s2">/after</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">widget</span><span class="p">){</span>
    <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">inside a topic event. after request</span><span class="dl">'</span><span class="p">);</span>
    <span class="c1">//data : text returned from request</span>
    <span class="c1">//request: XMLHttpRequest object</span>
    <span class="c1">//widget: widget that published the topic</span>
 <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">afterNotifyTopics=</span><span class="s">"/after"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">afterNotifyTopics=</span><span class="s">"/after"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">afterNotifyTopics=</span><span class="s">"/after"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="publish-a-topic-on-error">Publish a topic on error</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
 <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">"</span><span class="s2">/error</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">request</span><span class="p">,</span> <span class="nx">widget</span><span class="p">){</span>
    <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">inside a topic event. on error</span><span class="dl">'</span><span class="p">);</span>
    <span class="c1">//error : error object (error.message has the error message)</span>
    <span class="c1">//request: XMLHttpRequest object</span>
    <span class="c1">//widget: widget that published the topic</span>
 <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">errorNotifyTopics=</span><span class="s">"/error"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">errorNotifyTopics=</span><span class="s">"/error"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">errorNotifyTopics=</span><span class="s">"/error"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="show-a-fixed-error-message-on-error">Show a fixed error message on error</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"div"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">errorText=</span><span class="s">"Error Loading"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">errorText=</span><span class="s">"Error Loading"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">errorText=</span><span class="s">"Error Loading"</span><span class="na"> targets=</span><span class="s">"div"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="prevent-a-request">Prevent a request</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
 <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">"</span><span class="s2">/before</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">widget</span><span class="p">){</span>
    <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">I will stop this request</span><span class="dl">'</span><span class="p">);</span>
    <span class="nx">event</span><span class="p">.</span><span class="nx">cancel</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
 <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>


 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">beforeNotifyTopics=</span><span class="s">"/before"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">beforeNotifyTopics=</span><span class="s">"/before"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">beforeNotifyTopics=</span><span class="s">"/before"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="submit-a-form-plain-form">Submit a form (plain form)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">"form"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">textbox</span> <span class="na">name=</span><span class="s">"data"</span><span class="nt">&gt;</span>
 <span class="nt">&lt;/form&gt;</span>

 <span class="c">&lt;!-- With a bind tag --&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Make Request"</span><span class="na"> id=</span><span class="s">"submit"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:bind </span><span class="na">formId=</span><span class="s">"form"</span><span class="na"> sources=</span><span class="s">"submit"</span><span class="na"> events=</span><span class="s">"onclick"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;sx:submit </span><span class="na">formId=</span><span class="s">"form"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;sx:a </span><span class="na">formId=</span><span class="s">"form"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="submit-a-form-using-sform-tag">Submit a form (using s:form tag)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- With a submit tag --&gt;</span>
 <span class="nt">&lt;s:form </span><span class="na">namespace=</span><span class="s">"/mynamespace"</span><span class="na"> action=</span><span class="s">"MyAction"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">textbox</span> <span class="na">name=</span><span class="s">"data"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;sx:submit /&gt;</span>
 <span class="nt">&lt;/s:form&gt;</span>

 <span class="c">&lt;!-- With an anchor tag --&gt;</span>
 <span class="nt">&lt;s:form </span><span class="na">namespace=</span><span class="s">"/mynamespace"</span><span class="na"> action=</span><span class="s">"MyAction"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">textbox</span> <span class="na">name=</span><span class="s">"data"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;sx:a /&gt;</span>
 <span class="nt">&lt;/s:form&gt;</span>
 </code></pre></div></div>

 <h2 id="div">Div</h2>

 <h3 id="loads-its-content-after-page-is-loaded">Loads its content after page is loaded</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>
 </code></pre></div></div>

 <h3 id="reloads-content-when-topic-is-published">Reloads content when topic is published</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> listenTopics=</span><span class="s">"/refresh"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>

 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Refresh"</span><span class="na"> onclick=</span><span class="s">"dojo.event.topic.publish('/refresh')"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="updates-its-content-every-2-seconds-shows-indicator-while-loading-content">Updates its content every 2 seconds, shows indicator while loading content</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;img</span> <span class="na">id=</span><span class="s">"indicator"</span> <span class="na">src=</span><span class="s">"${pageContext.request.contextPath}/images/indicator.gif"</span> <span class="na">style=</span><span class="s">"display:none"</span><span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> updateFreq=</span><span class="s">"2000"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>
 </code></pre></div></div>

 <h3 id="loads-its-content-after-a-delay-of-2-seconds">Loads its content after a delay of 2 seconds</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> delay=</span><span class="s">"2000"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>
 </code></pre></div></div>

 <h3 id="show-some-text-while-content-is-loaded">Show some text while content is loaded</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> loadingText=</span><span class="s">"reloading"</span><span class="na"> showLoadingText=</span><span class="s">"true"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>
 </code></pre></div></div>

 <h3 id="fixed-error-message">Fixed error message</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"noaction"</span><span class="na"> errorText=</span><span class="s">"Error loading content"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>
 </code></pre></div></div>

 <h3 id="execute-javascript-in-the-returned-content-1">Execute JavaScript in the returned content</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> executeScripts=</span><span class="s">"true"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>
 </code></pre></div></div>

 <h3 id="control-refresh-timer-using-topics">Control refresh timer using topics</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:div </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na">
         listenTopics=</span><span class="s">"/refresh"</span><span class="na">
 	startTimerListenTopics=</span><span class="s">"/startTimer"</span><span class="na">
 	stopTimerListenTopics=</span><span class="s">"/stopTimer"</span><span class="na">
 	updateFreq=</span><span class="s">"3000"</span><span class="nt">&gt;</span>
   Initial Content
 <span class="nt">&lt;/sx:div&gt;</span>

 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Refresh"</span><span class="na"> onclick=</span><span class="s">"dojo.event.topic.publish('/refresh')"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Start refresh timer"</span><span class="na"> onclick=</span><span class="s">"dojo.event.topic.publish('/startTimer')"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;s:submit </span><span class="na">value=</span><span class="s">"Stop refresh timer"</span><span class="na"> onclick=</span><span class="s">"dojo.event.topic.publish('/stopTimer')"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h2 id="date-and-time-picker">Date and Time picker</h2>

 <h3 id="date-picker">Date picker</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:datetimepicker </span><span class="na">name=</span><span class="s">"picker"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="time-picker">Time picker</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:datetimepicker </span><span class="na">type=</span><span class="s">"time"</span><span class="na"> name=</span><span class="s">"picker"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="set-value-from-an-string">Set value from an String</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:datetimepicker </span><span class="na">value=</span><span class="s">"%{'2007-01-01'}"</span><span class="na"> name=</span><span class="s">"picker"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="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 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)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:datetimepicker </span><span class="na">value=</span><span class="s">"date"</span><span class="na"> name=</span><span class="s">"picker"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="setget-value-using-javascript">Set/Get value using JavaScript</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
   <span class="kd">function</span> <span class="nf">setValue</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">picker</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">"</span><span class="s2">picker</span><span class="dl">"</span><span class="p">);</span>

      <span class="c1">//string value</span>
      <span class="nx">picker</span><span class="p">.</span><span class="nf">setValue</span><span class="p">(</span><span class="dl">'</span><span class="s1">2007-01-01</span><span class="dl">'</span><span class="p">);</span>

      <span class="c1">//Date value</span>
      <span class="nx">picker</span><span class="p">.</span><span class="nf">setValue</span><span class="p">(</span><span class="k">new</span> <span class="nc">Date</span><span class="p">());</span>
   <span class="p">}</span>

   <span class="kd">function</span> <span class="nf">showValue</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">picker</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">"</span><span class="s2">picker</span><span class="dl">"</span><span class="p">);</span>

      <span class="c1">//string value</span>
      <span class="kd">var</span> <span class="nx">stringValue</span> <span class="o">=</span> <span class="nx">picker</span><span class="p">.</span><span class="nf">getValue</span><span class="p">();</span>
      <span class="nf">alert</span><span class="p">(</span><span class="nx">stringValue</span><span class="p">);</span>

      <span class="c1">//date value</span>
      <span class="kd">var</span> <span class="nx">dateValue</span> <span class="o">=</span> <span class="nx">picker</span><span class="p">.</span><span class="nf">getDate</span><span class="p">();</span>
      <span class="nf">alert</span><span class="p">(</span><span class="nx">dateValue</span><span class="p">);</span>
   <span class="p">}</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="nt">&lt;sx:datetimepicker </span><span class="na">id=</span><span class="s">"picker"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="style-the-textbox">Style the textbox</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:datetimepicker </span><span class="na">id=</span><span class="s">"picker"</span><span class="na"> cssStye=</span><span class="s">"background:red"</span><span class="na"> cssClass=</span><span class="s">"someclass"</span><span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="publish-topic-when-value-changes">Publish topic when value changes</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
   <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">"</span><span class="s2">/value</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">text</span><span class="p">,</span> <span class="nx">date</span><span class="p">,</span> <span class="nx">widget</span><span class="p">){</span>
       <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">value changed</span><span class="dl">'</span><span class="p">);</span>
       <span class="c1">//textEntered: String entered in the textbox</span>
       <span class="c1">//date: JavaScript Date object with the value selected</span>
       <span class="c1">//widget: widget that published the topic </span>
   <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="nt">&lt;sx:datetimepicker </span><span class="na">label=</span><span class="s">"Order Date"</span><span class="na"> valueNotifyTopics=</span><span class="s">"/value"</span><span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="use-other-locales">Use other locales</h3>

 <p>Locales must be specified in the sx:head tag.</p>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:head </span><span class="na">extraLocales=</span><span class="s">"en-us,nl-nl,de-de"</span> <span class="nt">/&gt;</span>

 <span class="nt">&lt;sx:datetimepicker </span><span class="na">label=</span><span class="s">"In German"</span><span class="na"> name=</span><span class="s">"dddp7"</span><span class="na"> value=</span><span class="s">"%{'2006-06-28'}"</span><span class="na"> language=</span><span class="s">"de-de"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;sx:datetimepicker </span><span class="na">label=</span><span class="s">"In Dutch"</span><span class="na">  name=</span><span class="s">"dddp8"</span><span class="na"> value=</span><span class="s">"%{'2006-06-28'}"</span><span class="na"> language=</span><span class="s">"nl-nl"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h2 id="tabbed-panel">Tabbed Panel</h2>

 <h3 id="local-tabs">Local Tabs</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span> <span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span> <span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="local-and-remote-tabs">Local and remote tabs</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Local Tab 1"</span> <span class="nt">&gt;</span>
        Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Remote Tab 2"</span><span class="na"> href=</span><span class="s">"%{#url}"</span><span class="nt">&gt;</span>
        Remote Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="fixed-size-size-does-not-adjust-to-current-tab">Fixed size (size does not adjust to current tab)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">cssStyle=</span><span class="s">"width: 500px; height: 300px;"</span><span class="na"> doLayout=</span><span class="s">"true"</span><span class="na"> id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span> <span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span> <span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="do-not-load-tab-2-when-page-loads-it-will-be-loaded-when-selected">Do not load tab 2 when page loads (it will be loaded when selected)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Remote Tab 1"</span><span class="na"> href=</span><span class="s">"%{#url}"</span><span class="nt">&gt;</span>
        Remote Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Remote Tab 2"</span><span class="na"> href=</span><span class="s">"%{#url}"</span><span class="na"> preload=</span><span class="s">"false"</span><span class="nt">&gt;</span>
        Remote Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="reload-tabs-content-when-selected">Reload tabs content when selected</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Remote Tab 1"</span><span class="na"> href=</span><span class="s">"%{#url}"</span><span class="na"> refreshOnShow=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        Remote Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Remote Tab 2"</span><span class="na"> href=</span><span class="s">"%{#url}"</span><span class="na"> refreshOnShow=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        Remote Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="disabled-tabs">Disabled tabs</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span> <span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span><span class="na"> disabled=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="enabledisable-tabs-using-javascript">Enable/Disable tabs using JavaScript</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
    <span class="kd">function</span> <span class="nf">enableTab</span><span class="p">(</span><span class="nx">param</span><span class="p">)</span> <span class="p">{</span>
       <span class="kd">var</span> <span class="nx">tabContainer</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">'</span><span class="s1">tabContainer</span><span class="dl">'</span><span class="p">);</span>
       <span class="nx">tabContainer</span><span class="p">.</span><span class="nf">enableTab</span><span class="p">(</span><span class="nx">param</span><span class="p">);</span>
    <span class="p">}</span>


    <span class="kd">function</span> <span class="nf">disableTab</span><span class="p">(</span><span class="nx">param</span><span class="p">)</span> <span class="p">{</span>
       <span class="kd">var</span> <span class="nx">tabContainer</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">'</span><span class="s1">tabContainer</span><span class="dl">'</span><span class="p">);</span>
       <span class="nx">tabContainer</span><span class="p">.</span><span class="nf">disableTab</span><span class="p">(</span><span class="nx">param</span><span class="p">);</span>
    <span class="p">}</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="na"> id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">id=</span><span class="s">"tab1"</span><span class="na"> label=</span><span class="s">"Tab 1"</span><span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">id=</span><span class="s">"tab2"</span><span class="na"> label=</span><span class="s">"Tab 2"</span><span class="na"> disabled=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>

 <span class="c">&lt;!-- By Tab Index --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"enableTab(1)"</span> <span class="na">value=</span><span class="s">"Enable Tab 2 using Index"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"disableTab(1)"</span> <span class="na">value=</span><span class="s">"Disable Tab 2 using Index"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- By Tab Id --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"enableTab('tab2')"</span> <span class="na">value=</span><span class="s">"Enable Tab 2 using Id"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"disableTab('tab2')"</span> <span class="na">value=</span><span class="s">"Disable Tab 2 using Id"</span> <span class="nt">/&gt;</span>

 <span class="c">&lt;!-- By Widget --&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"enableTab(dojo.widget.byId('tab2'))"</span> <span class="na">value=</span><span class="s">"Enable Tab 2 using widget"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"disableTab(dojo.widget.byId('tab2'))"</span> <span class="na">value=</span><span class="s">"Disable Tab 2 using widget"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="set-tab-labels-position-to-bottom-can-be-top-right-bottom-left">Set Tab labels position to bottom (can be: top, right, bottom, left)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">labelposition=</span><span class="s">"bottom"</span><span class="na"> id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span> <span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span> <span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="allow-tab-2-to-be-removedclosed">Allow tab 2 to be removed(closed)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span> <span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span><span class="na">  closable=</span><span class="s">"true"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="publish-topics-when-tab-is-selected">Publish topics when tab is selected</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
    <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">'</span><span class="s1">/before</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">tab</span><span class="p">,</span> <span class="nx">tabContainer</span><span class="p">)</span> <span class="p">{</span>
       <span class="nf">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">Before selecting tab</span><span class="dl">"</span><span class="p">);</span>
    <span class="p">});</span>

    <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">'</span><span class="s1">/after</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tab</span><span class="p">,</span> <span class="nx">tabContainer</span><span class="p">)</span> <span class="p">{</span>
       <span class="nf">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">After tab was selected</span><span class="dl">"</span><span class="p">);</span>
    <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>
 <span class="nt">&lt;sx:tabbedpanel </span><span class="na">beforeSelectTabNotifyTopics=</span><span class="s">"/before"</span><span class="na"> afterSelectTabNotifyTopics=</span><span class="s">"/after"</span><span class="na"> id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span><span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="select-tab-using-javascript">Select tab using JavaScript</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
    <span class="kd">function</span> <span class="nf">selectTab</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">tabContainer</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">"</span><span class="s2">tabContainer</span><span class="dl">"</span><span class="p">);</span>
      <span class="nx">tabContainer</span><span class="p">.</span><span class="nf">selectTab</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span>
    <span class="p">}</span>
 <span class="nt">&lt;/script&gt;</span>
 <span class="nt">&lt;sx:tabbedpanel </span><span class="na">id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 1"</span><span class="na"> id=</span><span class="s">"tab1"</span><span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">label=</span><span class="s">"Tab 2"</span><span class="na"> id=</span><span class="s">"tab2"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>

 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"selectTab('tab1')"</span> <span class="na">value=</span><span class="s">"Select tab 1"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"selectTab('tab2')"</span> <span class="na">value=</span><span class="s">"Select tab 2"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="prevent-tab-2-from-being-selected">Prevent tab 2 from being selected</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
    <span class="nx">dojo</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">topic</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">(</span><span class="dl">'</span><span class="s1">/before</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">tab</span><span class="p">,</span> <span class="nx">tabContainer</span><span class="p">)</span> <span class="p">{</span>
       <span class="nx">event</span><span class="p">.</span><span class="nx">cancel</span> <span class="o">=</span> <span class="nx">tab</span><span class="p">.</span><span class="nx">widgetId</span> <span class="o">==</span> <span class="dl">"</span><span class="s2">tab2</span><span class="dl">"</span> <span class="p">;</span>
    <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>
 <span class="nt">&lt;sx:tabbedpanel </span><span class="na">beforeSelectTabNotifyTopics=</span><span class="s">"/before"</span><span class="na"> id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">id=</span><span class="s">"tab1"</span><span class="na"> label=</span><span class="s">"Tab 1"</span><span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">id=</span><span class="s">"tab2"</span><span class="na"> label=</span><span class="s">"Tab 2"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h3 id="customize-template-css-path-dojo-widget-template-css">Customize template css path (Dojo widget template css)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:tabbedpanel </span><span class="na">templateCssPath=</span><span class="s">"%{#cssUrl}"</span><span class="na"> id=</span><span class="s">"tabContainer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">id=</span><span class="s">"tab1"</span><span class="na"> label=</span><span class="s">"Tab 1"</span><span class="nt">&gt;</span>
        Local Tab 1
    <span class="nt">&lt;/sx:div&gt;</span>
    <span class="nt">&lt;sx:div </span><span class="na">id=</span><span class="s">"tab2"</span><span class="na"> label=</span><span class="s">"Tab 2"</span><span class="nt">&gt;</span>
        Local Tab 2
    <span class="nt">&lt;/sx:div&gt;</span>
 <span class="nt">&lt;/sx:tabbedpanel&gt;</span>
 </code></pre></div></div>

 <h2 id="autocompleter">Autocompleter</h2>

 <h3 id="fixed-list">Fixed list</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">list=</span><span class="s">"{'apple','banana','grape','pear'}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="set-initial-value">Set initial value</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">list=</span><span class="s">"{'apple','banana','grape','pear'}"</span><span class="na"> value=</span><span class="s">"apple"</span><span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="force-valid-option-restore-option-when-focus-is-lost">Force valid option (restore option when focus is lost)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">list=</span><span class="s">"{'apple','banana','grape','pear'}"</span><span class="na"> forceValidOption=</span><span class="s">"true"</span><span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="using-the-json-plugin-to-generate-the-values-one-of-the-possible-ways">Using the JSON plugin to generate the values (one of the possible ways)</h3>

 <p>The action</p>

 <p><strong>AutocompleterExample.java</strong></p>

 <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">AutocompleterExample</span> <span class="kd">extends</span> <span class="nc">ActionSupport</span> <span class="o">{</span>

    <span class="kd">public</span> <span class="nc">Map</span><span class="o">&lt;</span><span class="nc">String</span><span class="o">,</span> <span class="nc">String</span><span class="o">&gt;</span> <span class="nf">getOptions</span><span class="o">()</span> <span class="o">{</span>
       <span class="nc">Map</span><span class="o">&lt;</span><span class="nc">String</span><span class="o">,</span><span class="nc">String</span><span class="o">&gt;</span> <span class="n">options</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">HashMap</span><span class="o">&lt;</span><span class="nc">String</span><span class="o">,</span><span class="nc">String</span><span class="o">&gt;();</span>
       <span class="n">options</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="s">"Florida"</span><span class="o">,</span> <span class="s">"FL"</span><span class="o">);</span>
       <span class="n">options</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="s">"Alabama"</span><span class="o">,</span> <span class="s">"AL"</span><span class="o">);</span>

       <span class="k">return</span> <span class="n">options</span><span class="o">;</span>
    <span class="o">}</span>
 <span class="o">}</span>
 </code></pre></div></div>

 <p>The mapping:</p>

 <p><strong>struts.xml</strong></p>

 <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;struts&gt;</span>
 ...
    <span class="nt">&lt;package</span> <span class="na">name=</span><span class="s">"autocompleter"</span> <span class="na">namespace=</span><span class="s">"/autocompleter"</span> <span class="na">extends=</span><span class="s">"json-default"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;action</span> <span class="na">name=</span><span class="s">"getStates"</span> <span class="na">class=</span><span class="s">"AutocompleterExample"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;result</span> <span class="na">type=</span><span class="s">"json"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;param</span> <span class="na">name=</span><span class="s">"root"</span><span class="nt">&gt;</span>options<span class="nt">&lt;/param&gt;&lt;/result&gt;</span>
        <span class="nt">&lt;/action&gt;</span>
    <span class="nt">&lt;/package&gt;</span>
 ...
 <span class="nt">&lt;/struts&gt;</span>
 </code></pre></div></div>

 <p>The JSP (fragment):</p>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:url </span><span class="na">id=</span><span class="s">"optionsUrl"</span><span class="na"> namespace=</span><span class="s">"/autocompleter"</span><span class="na"> action=</span><span class="s">"getStates"</span> <span class="nt">/&gt;</span>

 <span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#optionsUrl}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="example-action">Example action</h3>

 <p>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.</p>

 <p>The action:</p>

 <p><strong>MyAction.java</strong></p>

 <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">public</span> <span class="nc">MyAction</span> <span class="kd">extends</span> <span class="nc">ActionSupport</span> <span class="o">{</span>
     <span class="kd">private</span> <span class="nc">String</span> <span class="n">optionsKey</span><span class="o">;</span>
     <span class="kd">private</span> <span class="nc">String</span> <span class="n">options</span><span class="o">;</span>

     <span class="o">...</span>
 <span class="o">}</span>
 </code></pre></div></div>

 <p>The JSP:</p>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:form </span><span class="na">id=</span><span class="s">"form"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;sx:autocompleter </span><span class="na">name=</span><span class="s">"options"</span><span class="na"> label=</span><span class="s">"Options"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;/s:form&gt;</span>
 </code></pre></div></div>

 <h3 id="set-initial-key-and-value">Set initial key and value</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:url </span><span class="na">id=</span><span class="s">"optionsUrl"</span><span class="na"> namespace=</span><span class="s">"/autocompleter"</span><span class="na"> action=</span><span class="s">"getStates"</span> <span class="nt">/&gt;</span>

 <span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#optionsUrl}"</span><span class="na"> value=</span><span class="s">"Florida"</span><span class="na"> keyValue=</span><span class="s">"FL"</span><span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="change-default-key-name">Change default key name</h3>

 <p>The action:</p>

 <p><strong>MyAction.java</strong></p>

 <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">public</span> <span class="nc">MyAction</span> <span class="kd">extends</span> <span class="nc">ActionSupport</span> <span class="o">{</span>
     <span class="kd">private</span> <span class="nc">String</span> <span class="n">superKey</span><span class="o">;</span>
     <span class="kd">private</span> <span class="nc">String</span> <span class="n">options</span><span class="o">;</span>

     <span class="o">...</span>
 <span class="o">}</span>
 </code></pre></div></div>

 <p>The JSP:</p>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:form </span><span class="na">id=</span><span class="s">"form"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;sx:autocompleter </span><span class="na">keyName=</span><span class="s">"superKey"</span><span class="na"> name=</span><span class="s">"options"</span><span class="na"> label=</span><span class="s">"Options"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;/s:form&gt;</span>
 </code></pre></div></div>

 <h3 id="json-accepted">JSON accepted</h3>

 <p>for this autocompleter:</p>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">name=</span><span class="s">"state"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <p>The following JSON will be accepted:</p>

 <p><strong>Map(recommended as it is the easiest one to generate)</strong></p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
     </span><span class="nl">"Alabama"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"AL"</span><span class="p">,</span><span class="w">
     </span><span class="nl">"Alaska"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"AK"</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p><strong>Array of arrays</strong></p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="w">
     </span><span class="p">[</span><span class="s2">"Alabama"</span><span class="p">,</span><span class="w"> </span><span class="s2">"AL"</span><span class="p">],</span><span class="w">
     </span><span class="p">[</span><span class="s2">"Alaska"</span><span class="p">,</span><span class="w"> </span><span class="s2">"AK"</span><span class="p">]</span><span class="w">
 </span><span class="p">]</span><span class="w">
 </span></code></pre></div></div>

 <p><strong>Array inside object, same name as field</strong></p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
     </span><span class="nl">"state"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
         </span><span class="p">[</span><span class="s2">"Alabama"</span><span class="p">,</span><span class="s2">"AL"</span><span class="p">],</span><span class="w">
         </span><span class="p">[</span><span class="s2">"Alaska"</span><span class="p">,</span><span class="s2">"AK"</span><span class="p">]</span><span class="w">
     </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p><strong>Map inside object, same name as field</strong></p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
     </span><span class="nl">"state"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
         </span><span class="nl">"Alabama"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"Alabama"</span><span class="p">,</span><span class="w">
         </span><span class="nl">"Alaska"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"AK"</span><span class="w">
     </span><span class="p">}</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p><strong>Array inside object, field in response starts with the name of the autocompleter(“state” in this example)</strong></p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
     </span><span class="nl">"states"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
         </span><span class="p">[</span><span class="s2">"Alabama"</span><span class="p">,</span><span class="s2">"AL"</span><span class="p">],</span><span class="w">
         </span><span class="p">[</span><span class="s2">"Alaska"</span><span class="p">,</span><span class="s2">"AK"</span><span class="p">]</span><span class="w">
     </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <p><strong>No name match, use first array found, and hope for the best</strong></p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
     </span><span class="nl">"Australopithecus"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
        </span><span class="p">[</span><span class="s2">"Alabama"</span><span class="p">,</span><span class="s2">"AL"</span><span class="p">],</span><span class="w">
        </span><span class="p">[</span><span class="s2">"Alaska"</span><span class="p">,</span><span class="s2">"AK"</span><span class="p">]</span><span class="w">
     </span><span class="p">]</span><span class="w">
 </span><span class="p">}</span><span class="w">
 </span></code></pre></div></div>

 <h3 id="load-characters-while-user-types-when-text-size--3">Load characters while user types (when text size &gt;= 3)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> loadOnTextChange=</span><span class="s">"true"</span><span class="na"> loadMinimumCount=</span><span class="s">"3"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="hide-dropdown-arrow">Hide dropdown arrow</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> showDownArrow=</span><span class="s">"false"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="limit-options-shown-to-3">Limit options shown to 3</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> resultsLimit=</span><span class="s">"3"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="all-matching-options-are-shown">All matching options are shown</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> resultsLimit=</span><span class="s">"-1"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="set-dropdown-height-and-width-in-pixels">Set dropdown height and width, in pixels</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> dropdownHeight=</span><span class="s">"180"</span><span class="na"> dropdownWidth=</span><span class="s">"200"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="disable-it-when-page-is-loaded">Disable it when page is loaded</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> disabled=</span><span class="s">"true"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="disable-itenable-it-using-javascript">Disable it/enable it using JavaScript</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
   <span class="kd">function</span> <span class="nf">enableit</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">autoCompleter</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">"</span><span class="s2">auto</span><span class="dl">"</span><span class="p">);</span>
      <span class="nx">autoCompleter</span><span class="p">.</span><span class="nf">enable</span><span class="p">();</span>
   <span class="p">}</span>

   <span class="kd">function</span> <span class="nf">disableit</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">autoCompleter</span> <span class="o">=</span> <span class="nx">dojo</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nf">byId</span><span class="p">(</span><span class="dl">"</span><span class="s2">auto</span><span class="dl">"</span><span class="p">);</span>
      <span class="nx">autoCompleter</span><span class="p">.</span><span class="nf">disable</span><span class="p">();</span>
   <span class="p">}</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="nt">&lt;sx:autocompleter </span><span class="na">id=</span><span class="s">"auto"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="reload-options-when-topic-is-published">Reload options when topic is published</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">listenTopics=</span><span class="s">"/reload"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="submit-form-when-options-are-loaded">Submit form when options are loaded</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;s:form </span><span class="na">id=</span><span class="s">"form"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"textbox"</span> <span class="na">name=</span><span class="s">"data"</span><span class="nt">&gt;</span>
 <span class="nt">&lt;/s:form&gt;</span>

 <span class="nt">&lt;sx:autocompleter </span><span class="na">formId=</span><span class="s">"form"</span><span class="na"> href=</span><span class="s">"%{#url}"</span>  <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="filter-fields-top-be-submitted-when-options-are-loaded-return-true-to-include">Filter fields top be submitted when options are loaded (return true to include)</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
   <span class="kd">function</span> <span class="nf">filter</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="nx">input</span><span class="p">.</span><span class="nx">name</span> <span class="o">==</span> <span class="dl">"</span><span class="s2">data1</span><span class="dl">"</span><span class="p">;</span>
   <span class="p">}</span>
 <span class="nt">&lt;/script&gt;</span>

 <span class="nt">&lt;s:form </span><span class="na">id=</span><span class="s">"form"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"textbox"</span> <span class="na">name=</span><span class="s">"data0"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"textbox"</span> <span class="na">name=</span><span class="s">"data1"</span><span class="nt">&gt;</span>
 <span class="nt">&lt;/s:form&gt;</span>

 <span class="nt">&lt;sx:autocompleter </span><span class="na">formId=</span><span class="s">"form"</span><span class="na"> formFilter=</span><span class="s">"filter"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="link-two-autocompleters-using-topics">Link two autocompleters, using topics</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">"selectForm"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;sx:autocompleter  </span><span class="na">name=</span><span class="s">"select"</span><span class="na"> list=</span><span class="s">"{'fruits','colors'}"</span><span class="na">  valueNotifyTopics=</span><span class="s">"/changed"</span> <span class="nt">/&gt;</span>
 <span class="nt">&lt;/form&gt;</span>

 <span class="nt">&lt;sx:autocompleter  </span><span class="na">href=</span><span class="s">"%{#url}"</span><span class="na"> formId=</span><span class="s">"selectForm"</span><span class="na"> listenTopics=</span><span class="s">"/changed"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="show-options-but-dont-make-suggestion-autocomple-in-the-textbox">Show options, but don’t make suggestion (autocomple) in the textbox</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">autoComplete=</span><span class="s">"false"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

 <h3 id="prevent-options-from-loading-when-page-loads">Prevent options from loading when page loads</h3>

 <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;sx:autocompleter </span><span class="na">preload=</span><span class="s">"false"</span><span class="na"> href=</span><span class="s">"%{#url}"</span> <span class="nt">/&gt;</span>
 </code></pre></div></div>

   </section>
 </article>


 <footer class="container">
   <div class="col-md-12">
     Copyright &copy; 2000-2022 <a href="https://www.apache.org/">The Apache Software Foundation</a>.
     Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are
     trademarks of The Apache Software Foundation. All Rights Reserved.
   </div>
   <div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div>
 </footer>

 <script>!function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (!d.getElementById(id)) {
     js = d.createElement(s);
     js.id = id;
     js.src = "//platform.twitter.com/widgets.js";
     fjs.parentNode.insertBefore(js, fjs);
   }
 }(document, "script", "twitter-wjs");</script>
 <script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>

 <div id="fb-root"></div>

 <script>(function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s);
   js.id = id;
   js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>


 </body>
 </html>