http://git-wip-us.apache.org/repos/asf/struts-site/blob/2b2ec9b3/content/tag-developers/ajax-and-javascript-recipes.html ---------------------------------------------------------------------- diff --git a/content/tag-developers/ajax-and-javascript-recipes.html b/content/tag-developers/ajax-and-javascript-recipes.html new file mode 100644 index 0000000..fd3a533 --- /dev/null +++ b/content/tag-developers/ajax-and-javascript-recipes.html @@ -0,0 +1,1162 @@ +<!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>Tag Developers Guide (WIP)</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="/highlighter/github-theme.css" rel="stylesheet"> + + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script> + <script type="text/javascript" src="/js/community.js"></script> +</head> +<body> + +<a href="http://github.com/apache/struts"; class="github-ribbon"> + <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"; alt="Fork me on GitHub"> +</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="/downloads.html">Downloads</a></li> + <li><a href="/announce.html">Announcements</a></li> + <li><a href="http://www.apache.org/licenses/";>License</a></li> + <li><a href="http://apache.org/foundation/thanks.html";>Thanks!</a></li> + <li><a href="http://apache.org/foundation/sponsorship.html";>Sponsorship</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 class="divider"></li> + <li><a href="/maven/project-info.html">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 class="divider"></li> + <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li> + <li><a href="/docs/plugins.html">Plugin APIs</a></li> + <li><a href="/docs/tag-reference.html">Tag reference</a></li> + <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html";>Plugin registry</a></li> + <li class="divider"></li> + <li><a href="/docs/tutorials.html">Tutorials - DEPRECATED</a></li> + <li><a href="/docs/faqs.html">FAQs - DEPRECATED</a></li> + <li><a href="/docs/guides.html">Guides - DEPRECATED</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</a></li> + <li><a href="/coding-standards.html">Coding standards</a></li> + <li class="divider"></li> + <li><a href="/releases.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://git-wip-us.apache.org/repos/asf?p=struts.git";>Source Repository</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> + <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 >= 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> + +<p><strong>Dojo plugin is deprecated</strong></p> + +<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> + +<pre><code class="language-jsp"><%@ taglib prefix="s" uri="/struts-tags" %> +<%@ taglib prefix="sx" uri="/struts-dojo-tags" %> + +<head> + <sx:head /> +</head> + +<s:url id="url" value="/MyAction.action" /> +</code></pre> + +<h2 id="requests">Requests</h2> + +<h3 id="request-is-triggered-by-a-topic">Request is triggered by a topic</h3> + +<pre><code class="language-jsp"><s:submit value="Make Request" onclick="dojo.event.topic.publish('/request')" /> +<sx:bind listenTopics="/request" href="%{#url}" /> +</code></pre> + +<h3 id="attached-to-an-event">Attached to an event</h3> + +<pre><code class="language-jsp"><s:submit value="Make Request" id="submit" /> +<sx:bind sources="submit" events="onclick" href="%{#url}" /> +</code></pre> + +<h3 id="attached-to-an-event-on-multiple-sources">Attached to an event on multiple sources</h3> + +<pre><code class="language-jsp"><s:submit value="Make Request" id="submit0" /> +<s:submit value="Make Request" id="submit1" /> +<sx:bind sources="submit0,submit1" events="onclick" href="%{#url}" /> +</code></pre> + +<h3 id="attached-to-multiple-events-on-multiple-sources">Attached to multiple events on multiple sources</h3> + +<pre><code class="language-jsp"><s:textarea id="area0" /> +<s:textarea id="area1" /> +<sx:bind sources="area0,area1" events="onfocus,onchange" href="%{#url}" /> +</code></pre> + +<h3 id="update-target-element-with-content-returned-from-url">Update target element with content returned from url</h3> + +<pre><code class="language-jsp"><s:div id="div" /> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind targets="div" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit targets="div" value="Make Request" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a targets="div" value="Make Request" href="%{#url}" /> +</code></pre> + +<h3 id="update-multiple-target-elements-with-content-returned-from-url">Update multiple target elements with content returned from url</h3> + +<pre><code class="language-jsp"><s:div id="div0" /> +<s:div id="div1" /> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind targets="div0,div1" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit targets="div0,div1" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a targets="div0,div1" href="%{#url}" /> +</code></pre> + +<h3 id="show-indicator-while-request-is-in-progress">Show indicator while request is in progress</h3> + +<pre><code class="language-jsp"><img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none" /> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind indicator="indicator" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit indicator="indicator" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a indicator="indicator" href="%{#url}" /> +</code></pre> + +<h3 id="highlight-content-of-target-with-blue-color-for-2-seconds">Highlight content of target with blue color, for 2 seconds</h3> + +<pre><code class="language-jsp"><s:div id="div" /> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind highlightColor="blue" highlightDuration="2000" targets="div" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit highlightColor="blue" highlightDuration="2000" targets="div" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a highlightColor="blue" highlightDuration="2000" targets="div" href="%{#url}" /> +</code></pre> + +<h3 id="execute-javascript-in-the-returned-content">Execute JavaScript in the returned content</h3> + +<pre><code class="language-jsp"><s:div id="div" /> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind executeScripts="true" targets="div" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit executeScripts="true" targets="div" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a executeScripts="true" targets="div" href="%{#url}" /> +</code></pre> + +<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> + +<pre><code class="language-jsp"><script type="text/javascript"> +dojo.event.topic.subscribe("/after", function(data, request, widget){ + alert('inside a topic event. after request'); + //data : text returned from request + //request: XMLHttpRequest object + //widget: widget that published the topic +}); +</script> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind afterNotifyTopics="/after" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit afterNotifyTopics="/after" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a afterNotifyTopics="/after" href="%{#url}" /> +</code></pre> + +<h3 id="publish-a-topic-on-error">Publish a topic on error</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> +dojo.event.topic.subscribe("/error", function(error, request, widget){ + alert('inside a topic event. on error'); + //error : error object (error.message has the error message) + //request: XMLHttpRequest object + //widget: widget that published the topic +}); +</script> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind errorNotifyTopics="/error" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit errorNotifyTopics="/error" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a errorNotifyTopics="/error" href="%{#url}" /> +</code></pre> + +<h3 id="show-a-fixed-error-message-on-error">Show a fixed error message on error</h3> + +<pre><code class="language-jsp"><div id="div" /> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind errorText="Error Loading" targets="div" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit errorText="Error Loading" targets="div" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a errorText="Error Loading" targets="div" href="%{#url}" /> +</code></pre> + +<h3 id="prevent-a-request">Prevent a request</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> +dojo.event.topic.subscribe("/before", function(event, widget){ + alert('I will stop this request'); + event.cancel = true; +}); +</script> + + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind beforeNotifyTopics="/before" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit beforeNotifyTopics="/before" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a beforeNotifyTopics="/before" href="%{#url}" /> +</code></pre> + +<h3 id="submit-a-form-plain-form">Submit a form (plain form)</h3> + +<pre><code class="language-jsp"><form id="form"> + <input type=textbox name="data"> +</form> + +<!-- With a bind tag --> +<s:submit value="Make Request" id="submit" /> +<sx:bind formId="form" sources="submit" events="onclick" href="%{#url}" /> + +<!-- With a submit tag --> +<sx:submit formId="form" href="%{#url}" /> + +<!-- With an anchor tag --> +<sx:a formId="form" href="%{#url}" /> +</code></pre> + +<h3 id="submit-a-form-using-sform-tag">Submit a form (using s:form tag)</h3> + +<pre><code class="language-jsp"><!-- With a submit tag --> +<s:form namespace="/mynamespace" action="MyAction"> + <input type=textbox name="data"> + <sx:submit /> +</s:form> + +<!-- With an anchor tag --> +<s:form namespace="/mynamespace" action="MyAction"> + <input type=textbox name="data"> + <sx:a /> +</s:form> +</code></pre> + +<h2 id="div">Div</h2> + +<h3 id="loads-its-content-after-page-is-loaded">Loads its content after page is loaded</h3> + +<pre><code class="language-jsp"><sx:div href="%{#url}"> + Initial Content +</sx:div> +</code></pre> + +<h3 id="reloads-content-when-topic-is-published">Reloads content when topic is published</h3> + +<pre><code class="language-jsp"><sx:div href="%{#url}" listenTopics="/refresh"> + Initial Content +</sx:div> + +<s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" /> +</code></pre> + +<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> + +<pre><code class="language-jsp"><img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/> +<sx:div href="%{#url}" updateFreq="2000"> + Initial Content +</sx:div> +</code></pre> + +<h3 id="loads-its-content-after-a-delay-of-2-seconds">Loads its content after a delay of 2 seconds</h3> + +<pre><code class="language-jsp"><sx:div href="%{#url}" delay="2000"> + Initial Content +</sx:div> +</code></pre> + +<h3 id="show-some-text-while-content-is-loaded">Show some text while content is loaded</h3> + +<pre><code class="language-jsp"><sx:div href="%{#url}" loadingText="reloading" showLoadingText="true"> + Initial Content +</sx:div> +</code></pre> + +<h3 id="fixed-error-message">Fixed error message</h3> + +<pre><code class="language-jsp"><sx:div href="noaction" errorText="Error loading content"> + Initial Content +</sx:div> +</code></pre> + +<h3 id="execute-javascript-in-the-returned-content-1">Execute JavaScript in the returned content</h3> + +<pre><code class="language-jsp"><sx:div href="%{#url}" executeScripts="true"> + Initial Content +</sx:div> +</code></pre> + +<h3 id="control-refresh-timer-using-topics">Control refresh timer using topics</h3> + +<pre><code class="language-jsp"><sx:div href="%{#url}" + listenTopics="/refresh" + startTimerListenTopics="/startTimer" + stopTimerListenTopics="/stopTimer" + updateFreq="3000"> + Initial Content +</sx:div> + +<s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" /> +<s:submit value="Start refresh timer" onclick="dojo.event.topic.publish('/startTimer')" /> +<s:submit value="Stop refresh timer" onclick="dojo.event.topic.publish('/stopTimer')" /> +</code></pre> + +<h2 id="date-and-time-picker">Date and Time picker</h2> + +<h3 id="date-picker">Date picker</h3> + +<pre><code class="language-jsp"><sx:datetimepicker name="picker" /> +</code></pre> + +<h3 id="time-picker">Time picker</h3> + +<pre><code class="language-jsp"><sx:datetimepicker type="time" name="picker" /> +</code></pre> + +<h3 id="set-value-from-an-string">Set value from an String</h3> + +<pre><code class="language-jsp"><sx:datetimepicker value="%{'2007-01-01'}" name="picker" /> +</code></pre> + +<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> + +<pre><code class="language-jsp"><sx:datetimepicker value="date" name="picker" /> +</code></pre> + +<h3 id="setget-value-using-javascript">Set/Get value using JavaScript</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + function setValue() { + var picker = dojo.widget.byId("picker"); + + //string value + picker.setValue('2007-01-01'); + + //Date value + picker.setValue(new Date()); + } + + function showValue() { + var picker = dojo.widget.byId("picker"); + + //string value + var stringValue = picker.getValue(); + alert(stringValue); + + //date value + var dateValue = picker.getDate(); + alert(dateValue); + } +</script> + +<sx:datetimepicker id="picker" /> +</code></pre> + +<h3 id="style-the-textbox">Style the textbox</h3> + +<pre><code class="language-jsp"><sx:datetimepicker id="picker" cssStye="background:red" cssClass="someclass"/> +</code></pre> + +<h3 id="publish-topic-when-value-changes">Publish topic when value changes</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + dojo.event.topic.subscribe("/value", function(text, date, widget){ + alert('value changed'); + //textEntered: String entered in the textbox + //date: JavaScript Date object with the value selected + //widget: widget that published the topic + }); +</script> + +<sx:datetimepicker label="Order Date" valueNotifyTopics="/value"/> +</code></pre> + +<h3 id="use-other-locales">Use other locales</h3> + +<p>Locales must be specified in the sx:head tag.</p> + +<pre><code class="language-jsp"><sx:head extraLocales="en-us,nl-nl,de-de" /> + +<sx:datetimepicker label="In German" name="dddp7" value="%{'2006-06-28'}" language="de-de" /> +<sx:datetimepicker label="In Dutch" name="dddp8" value="%{'2006-06-28'}" language="nl-nl" /> +</code></pre> + +<h2 id="tabbed-panel">Tabbed Panel</h2> + +<h3 id="local-tabs">Local Tabs</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel id="tabContainer"> + <sx:div label="Tab 1" > + Local Tab 1 + </sx:div> + <sx:div label="Tab 2" > + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="local-and-remote-tabs">Local and remote tabs</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel id="tabContainer"> + <sx:div label="Local Tab 1" > + Tab 1 + </sx:div> + <sx:div label="Remote Tab 2" href="%{#url}"> + Remote Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="fixed-size-size-does-not-adjust-to-current-tab">Fixed size (size does not adjust to current tab)</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel cssStyle="width: 500px; height: 300px;" doLayout="true" id="tabContainer"> + <sx:div label="Tab 1" > + Local Tab 1 + </sx:div> + <sx:div label="Tab 2" > + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<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> + +<pre><code class="language-jsp"><sx:tabbedpanel id="tabContainer"> + <sx:div label="Remote Tab 1" href="%{#url}"> + Remote Tab 1 + </sx:div> + <sx:div label="Remote Tab 2" href="%{#url}" preload="false"> + Remote Tab 1 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="reload-tabs-content-when-selected">Reload tabs content when selected</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel id="tabContainer"> + <sx:div label="Remote Tab 1" href="%{#url}" refreshOnShow="true"> + Remote Tab 1 + </sx:div> + <sx:div label="Remote Tab 2" href="%{#url}" refreshOnShow="true"> + Remote Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="disabled-tabs">Disabled tabs</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel id="tabContainer"> + <sx:div label="Tab 1" > + Local Tab 1 + </sx:div> + <sx:div label="Tab 2" disabled="true"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="enabledisable-tabs-using-javascript">Enable/Disable tabs using JavaScript</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + function enableTab(param) { + var tabContainer = dojo.widget.byId('tabContainer'); + tabContainer.enableTab(param); + } + + + function disableTab(param) { + var tabContainer = dojo.widget.byId('tabContainer'); + tabContainer.disableTab(param); + } +</script> + +<sx:tabbedpanel id="tabContainer" id="tabContainer"> + <sx:div id="tab1" label="Tab 1"> + Local Tab 1 + </sx:div> + <sx:div id="tab2" label="Tab 2" disabled="true"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> + +<!-- By Tab Index --> +<input type="button" onclick="enableTab(1)" value="Enable Tab 2 using Index" /> +<input type="button" onclick="disableTab(1)" value="Disable Tab 2 using Index" /> + +<!-- By Tab Id --> +<input type="button" onclick="enableTab('tab2')" value="Enable Tab 2 using Id" /> +<input type="button" onclick="disableTab('tab2')" value="Disable Tab 2 using Id" /> + +<!-- By Widget --> +<input type="button" onclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" /> +<input type="button" onclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" /> +</code></pre> + +<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> + +<pre><code class="language-jsp"><sx:tabbedpanel labelposition="bottom" id="tabContainer"> + <sx:div label="Tab 1" > + Local Tab 1 + </sx:div> + <sx:div label="Tab 2" > + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="allow-tab-2-to-be-removedclosed">Allow tab 2 to be removed(closed)</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel id="tabContainer"> + <sx:div label="Tab 1" > + Local Tab 1 + </sx:div> + <sx:div label="Tab 2" closable="true"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="publish-topics-when-tab-is-selected">Publish topics when tab is selected</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) { + alert("Before selecting tab"); + }); + + dojo.event.topic.subscribe('/after', function(tab, tabContainer) { + alert("After tab was selected"); + }); +</script> +<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" afterSelectTabNotifyTopics="/after" id="tabContainer"> + <sx:div label="Tab 1"> + Local Tab 1 + </sx:div> + <sx:div label="Tab 2"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="select-tab-using-javascript">Select tab using JavaScript</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + function selectTab(id) { + var tabContainer = dojo.widget.byId("tabContainer"); + tabContainer.selectTab(id); + } +</script> +<sx:tabbedpanel id="tabContainer"> + <sx:div label="Tab 1" id="tab1"> + Local Tab 1 + </sx:div> + <sx:div label="Tab 2" id="tab2"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> + +<input type="button" onclick="selectTab('tab1')" value="Select tab 1" /> +<input type="button" onclick="selectTab('tab2')" value="Select tab 2" /> +</code></pre> + +<h3 id="prevent-tab-2-from-being-selected">Prevent tab 2 from being selected</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + dojo.event.topic.subscribe('/before', function(event, tab, tabContainer) { + event.cancel = tab.widgetId == "tab2" ; + }); +</script> +<sx:tabbedpanel beforeSelectTabNotifyTopics="/before" id="tabContainer"> + <sx:div id="tab1" label="Tab 1"> + Local Tab 1 + </sx:div> + <sx:div id="tab2" label="Tab 2"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h3 id="customize-template-css-path-dojo-widget-template-css">Customize template css path (Dojo widget template css)</h3> + +<pre><code class="language-jsp"><sx:tabbedpanel templateCssPath="%{#cssUrl}" id="tabContainer"> + <sx:div id="tab1" label="Tab 1"> + Local Tab 1 + </sx:div> + <sx:div id="tab2" label="Tab 2"> + Local Tab 2 + </sx:div> +</sx:tabbedpanel> +</code></pre> + +<h2 id="autocompleter">Autocompleter</h2> + +<h3 id="fixed-list">Fixed list</h3> + +<pre><code class="language-jsp"><sx:autocompleter list="{'apple','banana','grape','pear'}" /> +</code></pre> + +<h3 id="set-initial-value">Set initial value</h3> + +<pre><code class="language-jsp"><sx:autocompleter list="{'apple','banana','grape','pear'}" value="apple"/> +</code></pre> + +<h3 id="force-valid-option-restore-option-when-focus-is-lost">Force valid option (restore option when focus is lost)</h3> + +<pre><code class="language-jsp"><sx:autocompleter list="{'apple','banana','grape','pear'}" forceValidOption="true"/> +</code></pre> + +<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="highlighter-rouge"><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="n">ActionSupport</span> <span class="o">{</span> + + <span class="kd">public</span> <span class="n">Map</span><span class="o"><</span><span class="n">String</span><span class="o">,</span> <span class="n">String</span><span class="o">></span> <span class="n">getOptions</span><span class="o">()</span> <span class="o">{</span> + <span class="n">Map</span><span class="o"><</span><span class="n">String</span><span class="o">,</span><span class="n">String</span><span class="o">></span> <span class="n">options</span> <span class="o">=</span> <span class="k">new</span> <span class="n">HashMap</span><span class="o"><</span><span class="n">String</span><span class="o">,</span><span class="n">String</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">"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> + +<p>The mapping:</p> + +<p><strong>struts.xml</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt"><struts></span> +... + <span class="nt"><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">></span> + <span class="nt"><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">></span> + <span class="nt"><result</span> <span class="na">type=</span><span class="s">"json"</span><span class="nt">></span> + <span class="nt"><param</span> <span class="na">name=</span><span class="s">"root"</span><span class="nt">></span>options<span class="nt"></param></result></span> + <span class="nt"></action></span> + <span class="nt"></package></span> +... +<span class="nt"></struts></span> +</code></pre> +</div> + +<p>The JSP (fragment):</p> + +<pre><code class="language-jsp"><s:url id="optionsUrl" namespace="/autocompleter" action="getStates" /> + +<sx:autocompleter href="%{#optionsUrl}" /> +</code></pre> + +<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="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="n">MyAction</span> <span class="kd">extends</span> <span class="n">ActionSupport</span> <span class="o">{</span> + <span class="kd">private</span> <span class="n">String</span> <span class="n">optionsKey</span><span class="o">;</span> + <span class="kd">private</span> <span class="n">String</span> <span class="n">options</span><span class="o">;</span> + + <span class="o">...</span> +<span class="o">}</span> +</code></pre> +</div> + +<p>The JSP:</p> + +<pre><code class="language-jsp"><s:form id="form"> + <sx:autocompleter name="options" label="Options" /> +</s:form> +</code></pre> + +<h3 id="set-initial-key-and-value">Set initial key and value</h3> + +<pre><code class="language-jsp"><s:url id="optionsUrl" namespace="/autocompleter" action="getStates" /> + +<sx:autocompleter href="%{#optionsUrl}" value="Florida" keyValue="FL"/> +</code></pre> + +<h3 id="change-default-key-name">Change default key name</h3> + +<p>The action:</p> + +<p><strong>MyAction.java</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="n">MyAction</span> <span class="kd">extends</span> <span class="n">ActionSupport</span> <span class="o">{</span> + <span class="kd">private</span> <span class="n">String</span> <span class="n">superKey</span><span class="o">;</span> + <span class="kd">private</span> <span class="n">String</span> <span class="n">options</span><span class="o">;</span> + + <span class="o">...</span> +<span class="o">}</span> +</code></pre> +</div> + +<p>The JSP:</p> + +<pre><code class="language-jsp"><s:form id="form"> + <sx:autocompleter keyName="superKey" name="options" label="Options" /> +</s:form> +</code></pre> + +<h3 id="json-accepted">JSON accepted</h3> + +<p>for this autocompleter:</p> + +<pre><code class="language-jsp"><sx:autocompleter name="state" /> +</code></pre> + +<p>The following JSON will be accepted:</p> + +<p><strong>Map(recommended as it is the easiest one to generate)</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> + </span><span class="nt">"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="nt">"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> + +<p><strong>Array of arrays</strong></p> + +<div class="highlighter-rouge"><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> + +<p><strong>Array inside object, same name as field</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> + </span><span class="nt">"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> + +<p><strong>Map inside object, same name as field</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> + </span><span class="nt">"state"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> + </span><span class="nt">"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="nt">"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> + +<p><strong>Array inside object, field in response starts with the name of the autocompleter(âstateâ in this example)</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> + </span><span class="nt">"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> + +<p><strong>No name match, use first array found, and hope for the best</strong></p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> + </span><span class="nt">"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> + +<h3 id="load-characters-while-user-types-when-text-size--3">Load characters while user types (when text size >= 3)</h3> + +<pre><code class="language-jsp"><sx:autocompleter href="%{#url}" loadOnTextChange="true" loadMinimumCount="3" /> +</code></pre> + +<h3 id="hide-dropdown-arrow">Hide dropdown arrow</h3> + +<pre><code class="language-jsp"><sx:autocompleter href="%{#url}" showDownArrow="false" /> +</code></pre> + +<h3 id="limit-options-shown-to-3">Limit options shown to 3</h3> + +<pre><code class="language-jsp"><sx:autocompleter href="%{#url}" resultsLimit="3" /> +</code></pre> + +<h3 id="all-matching-options-are-shown">All matching options are shown</h3> + +<pre><code class="language-jsp"><sx:autocompleter href="%{#url}" resultsLimit="-1" /> +</code></pre> + +<h3 id="set-dropdown-height-and-width-in-pixels">Set dropdown height and width, in pixels</h3> + +<pre><code class="language-jsp"><sx:autocompleter href="%{#url}" dropdownHeight="180" dropdownWidth="200" /> +</code></pre> + +<h3 id="disable-it-when-page-is-loaded">Disable it when page is loaded</h3> + +<pre><code class="language-jsp"><sx:autocompleter href="%{#url}" disabled="true" /> +</code></pre> + +<h3 id="disable-itenable-it-using-javascript">Disable it/enable it using JavaScript</h3> + +<pre><code class="language-jsp"><script type="text/javascript"> + function enableit() { + var autoCompleter = dojo.widget.byId("auto"); + autoCompleter.enable(); + } + + function disableit() { + var autoCompleter = dojo.widget.byId("auto"); + autoCompleter.disable(); + } +</script> + +<sx:autocompleter id="auto" href="%{#url}" /> +</code></pre> + +<h3 id="reload-options-when-topic-is-published">Reload options when topic is published</h3> + +<pre><code class="language-jsp"><sx:autocompleter listenTopics="/reload" href="%{#url}" /> +</code></pre> + +<h3 id="submit-form-when-options-are-loaded">Submit form when options are loaded</h3> + +<pre><code class="language-jsp"><s:form id="form"> + <input type="textbox" name="data"> +</s:form> + +<sx:autocompleter formId="form" href="%{#url}" /> +</code></pre> + +<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> + +<pre><code class="language-jsp"><script type="text/javascript"> + function filter(input) { + return input.name == "data1"; + } +</script> + +<s:form id="form"> + <input type="textbox" name="data0"> + <input type="textbox" name="data1"> +</s:form> + +<sx:autocompleter formId="form" formFilter="filter" href="%{#url}" /> +</code></pre> + +<h3 id="link-two-autocompleters-using-topics">Link two autocompleters, using topics</h3> + +<pre><code class="language-jsp"><form id="selectForm"> + <sx:autocompleter name="select" list="{'fruits','colors'}" valueNotifyTopics="/changed" /> +</form> + +<sx:autocompleter href="%{#url}" formId="selectForm" listenTopics="/changed" /> +</code></pre> + +<h3 id="show-options-but-dont-make-suggestion-autocomple-in-the-textbox">Show options, but donât make suggestion (autocomple) in the textbox</h3> + +<pre><code class="language-jsp"><sx:autocompleter autoComplete="false" href="%{#url}" /> +</code></pre> + +<h3 id="prevent-options-from-loading-when-page-loads">Prevent options from loading when page loads</h3> + +<pre><code class="language-jsp"><sx:autocompleter preload="false" href="%{#url}" /> +</code></pre> + + </section> +</article> + + +<footer class="container"> + <div class="col-md-12"> + Copyright © 2000-2016 <a href="http://www.apache.org/";>The Apache Software Foundation </a>. + All Rights Reserved. + </div> + <div class="col-md-12"> + Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are + trademarks of The Apache Software Foundation. + </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> + + +<script> +$(function() { + return $("h2, h3, h4, h5, h6").each(function(i, el) { + var $el, id; + $el = $(el); + id = $el.attr('id'); + if (id) { + $el.removeAttr('id'); + return $el.before($("<a />").addClass('anchor').attr('name', id)); + } + }); +}); +</script> + +</body> +</html>
http://git-wip-us.apache.org/repos/asf/struts-site/blob/2b2ec9b3/content/tag-developers/ajax-tags.html ---------------------------------------------------------------------- diff --git a/content/tag-developers/ajax-tags.html b/content/tag-developers/ajax-tags.html new file mode 100644 index 0000000..ea95388 --- /dev/null +++ b/content/tag-developers/ajax-tags.html @@ -0,0 +1,263 @@ +<!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>Tag Developers Guide (WIP)</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="/highlighter/github-theme.css" rel="stylesheet"> + + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script> + <script type="text/javascript" src="/js/community.js"></script> +</head> +<body> + +<a href="http://github.com/apache/struts"; class="github-ribbon"> + <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"; alt="Fork me on GitHub"> +</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="/downloads.html">Downloads</a></li> + <li><a href="/announce.html">Announcements</a></li> + <li><a href="http://www.apache.org/licenses/";>License</a></li> + <li><a href="http://apache.org/foundation/thanks.html";>Thanks!</a></li> + <li><a href="http://apache.org/foundation/sponsorship.html";>Sponsorship</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 class="divider"></li> + <li><a href="/maven/project-info.html">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 class="divider"></li> + <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li> + <li><a href="/docs/plugins.html">Plugin APIs</a></li> + <li><a href="/docs/tag-reference.html">Tag reference</a></li> + <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html";>Plugin registry</a></li> + <li class="divider"></li> + <li><a href="/docs/tutorials.html">Tutorials - DEPRECATED</a></li> + <li><a href="/docs/faqs.html">FAQs - DEPRECATED</a></li> + <li><a href="/docs/guides.html">Guides - DEPRECATED</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</a></li> + <li><a href="/coding-standards.html">Coding standards</a></li> + <li class="divider"></li> + <li><a href="/releases.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://git-wip-us.apache.org/repos/asf?p=struts.git";>Source Repository</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-tags.md"; title="Edit this page on GitHub">Edit on GitHub</a> + <h1 id="ajax-tags">Ajax Tags</h1> + +<p><strong>Dojo plugin is deprecated and was removed since Struts 2.5</strong></p> + +<blockquote> + <p><strong>Please</strong> check that documentation and the Dojo tag examples in the showcase app of the appropriate Struts 2 version +before asking questions on the struts-user mailing list!</p> +</blockquote> + +<h2 id="description">Description</h2> + +<p>To use the AJAX tags from 2.1 on you must:</p> + +<ul> + <li>Include the Dojo Plugin distributed with Struts 2 in your /WEB-INF/lib folder.</li> + <li>Add <code class="highlighter-rouge"><%@ taglib prefix="sx" uri="/struts-dojo-tags" %></code> to your page.</li> + <li>Include the <a href="head-tag.html">head</a> tag on the page, which can be configured for performance or debugging purposes.</li> +</ul> + +<h2 id="handling-ajax-responses">Handling AJAX Responses</h2> + +<p>The following attributes affect the handling of all ajax responses.</p> + +<p>|Attribute|Default Value|Description| +|âââ|ââââ-|ââââ| +|parseContent|true|When true, Dojo will parse the response into an XHTML Document Object and traverse the nodes searching for Dojo Widget markup. The parse and traversal is performed prior to inserting the nodes into the DOM. This attribute must be enabled to nest Dojo widgets (dojo tags) within responses. Thereâs significant processing involved to create and parse the document so switch this feature off when not required. Note also that the response must be valid XHTML for cross-browser support and widgets must have unique IDs.| +|separateScripts|true|When true, Dojo will extract the <script> tags from the response, concatenate the extracted code into one block, create a new Function whose body is the extracted code and immediately invoke the function. The invocation is performed after the DOM has been updated with the XHTML. The function is executed within the scope of the widget (that is, the **this** variable points to the widget instance).\ +\ +When false, Dojo will extract the <script> tags from the response, concatenate the extracted code into one block and:\ +\ +\*in IE: invoke window.execScript() on the code\ +\ +\*in other browsers: create a <script> node containing the code and insert that node into the DOM\ +\ +This invocation occurs after the DOM has been updated with the XHTML. Note that scripts may not be executed if it is not valid to create a <script> node in the DOM at the destination.| +|executeScripts|false|When true, Dojo will extract code from the <script> tags from the response and execute it based on the separateScripts value.\ +\ +When false, the XHTML response is inserted into the DOM and <script> nodes are ignored. |</script></script></script></script></script></script></p> + +<blockquote> + <p>Itâs possible that the updated DOM will not include <script> nodes even though the inline code has been executed.</script></p> +</blockquote> + +<p>Ensure the response is XHTML-compliant (including, for example, thead and tbody tags in tables).</p> + +<p>If you intend to run inline javascript:</p> + +<ul> + <li>Ensure the javascript can be concatenated and executed in one block,</li> + <li>set executeScripts=true,</li> + <li>set separateScripts=true (the reliable option)</li> +</ul> + +<h2 id="topics">Topics</h2> + +<p>Most of the AJAX tags use Dojo topics for event notification and communication between them, to learn about topics visit +<a href="http://dojotoolkit.org/book/dojo-book-0-4/part-5-connecting-pieces/event-system/topics";>Dojoâs documentation</a></p> + +<h2 id="examples">Examples</h2> + +<p>Examples can be found on the documentation for each tag in the <a href="ui-tag-reference.html">UI Tag Reference</a> page, +for additional examples see <a href="ajax-and-javascript-recipes.html">Ajax and JavaScript Recipes</a> and the Showcase application +distributed with Struts 2.</p> + +<h2 id="tags">Tags</h2> + +<ul> + <li><a href="dojo-href-tag.html">a</a></li> + <li><a href="dojo-autocompleter-tag.html">autocompleter</a></li> + <li><a href="dojo-bind-tag.html">bind</a></li> + <li><a href="dojo-datetimepicker-tag.html">datetimepicker</a></li> + <li><a href="dojo-div-tag.html">div</a></li> + <li><a href="dojo-head-tag.html">head</a></li> + <li><a href="dojo-submit-tag.html">submit</a></li> + <li><a href="dojo-tabbedpanel-tag.html">tabbedpanel</a></li> + <li><a href="dojo-textarea-tag.html">textarea</a></li> + <li><a href="dojo-tree-tag.html">tree</a></li> + <li><a href="dojo-treenode-tag.html">treenode</a></li> +</ul> + + </section> +</article> + + +<footer class="container"> + <div class="col-md-12"> + Copyright © 2000-2016 <a href="http://www.apache.org/";>The Apache Software Foundation </a>. + All Rights Reserved. + </div> + <div class="col-md-12"> + Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are + trademarks of The Apache Software Foundation. + </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> + + +<script> +$(function() { + return $("h2, h3, h4, h5, h6").each(function(i, el) { + var $el, id; + $el = $(el); + id = $el.attr('id'); + if (id) { + $el.removeAttr('id'); + return $el.before($("<a />").addClass('anchor').attr('name', id)); + } + }); +}); +</script> + +</body> +</html>
![https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"](https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"){kind=link}