| <!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</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="//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> |
| </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="/download.cgi">Download</a></li> |
| <li><a href="/releases.html">Releases</a></li> |
| <li><a href="/announce-2021.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> |
| </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="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><a href="/contributors/">Contributors Guide</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="https://cwiki.apache.org/confluence/display/WW/Contributors+Guide">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-div-template.md" title="Edit this page on GitHub">Edit on GitHub</a> |
| |
| <h1 id="ajax-div-template">ajax div template</h1> |
| |
| <blockquote> |
| <p>NOTE: Ajax template (Dojo plugin) is deprecated and won’t be supported any longer.</p> |
| </blockquote> |
| |
| <p>The ajax <a href="dojo-div-tag.html">div</a> template provides a much more interesting div rendering option that the other themes |
| do. Rather than simply rendering a <code class="highlighter-rouge"><div></code> tag, this template relies on advanced AJAX features provided |
| by the <a href="http://dojotoolkit.org">Dojo Toolkit</a>. While the <a href="dojo-div-tag.html">div</a> tag could be used outside |
| of the <a href="">ajax theme</a>, it is usually not very useful. See the <a href="dojo-div-tag.html">div</a> tag for more information on what |
| features are provided.</p> |
| |
| <h2 id="features">Features</h2> |
| |
| <p>The remote div has a few features, some of which can be combined with the <a href="dojo-a-tag.html">a</a> tag and |
| the <a href="ajax-a-template.html">ajax a template</a>. These uses are:</p> |
| |
| <ul> |
| <li>Retrieve remote data</li> |
| <li>Initialize the div with content before the remote data is retrieved</li> |
| <li>Display appropriate error and loading messages</li> |
| <li>Refresh data on a timed cycle</li> |
| <li>Listen for events and refresh data</li> |
| <li>JavaScript control support</li> |
| </ul> |
| |
| <h2 id="retrieve-remote-data">Retrieve Remote Data</h2> |
| |
| <p>The simplest way to use the div tag is to provide an <code class="highlighter-rouge">href</code> attribute. For example:</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span><span class="nt">/></span> |
| </code></pre></div></div> |
| |
| <p>What this does after the HTML page is completely loaded, the specified URL will be retrieved asynchronously |
| in the browser. The entire contents returned by that URL will be injected in to the div.</p> |
| |
| <h2 id="initializing-the-div">Initializing the Div</h2> |
| |
| <p>Because the remote data isn’t loaded immediately, it is sometimes useful to have some placeholder content that exists |
| before the remote data is retrieved. The content is essentially just the body of the div element. For example:</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span><span class="nt">></span> |
| Placeholder... |
| <span class="nt"></saf:div></span> |
| </code></pre></div></div> |
| |
| <p>If you wish to load more complex initial data, you can use the <a href="action-tag.html">action</a> tag and the <code class="highlighter-rouge">executeResult</code> |
| attribute:</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span><span class="nt">></span> |
| <span class="nt"><ww:action</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">name=</span><span class="s">"weatherBean"</span> <span class="na">executeResult=</span><span class="s">"true"</span><span class="nt">></span> |
| <span class="nt"><ww:param</span> <span class="na">name=</span><span class="s">"zip"</span> <span class="na">value=</span><span class="s">"97239"</span><span class="nt">/></span> |
| <span class="nt"></ww:action></span> |
| <span class="nt"></saf:div></span> |
| </code></pre></div></div> |
| |
| <h2 id="loading-and-error-messages">Loading and Error Messages</h2> |
| |
| <p>If you’d like to display special messages when the data is being retrieved or when the data cannot be retrieved, you can |
| use the <code class="highlighter-rouge">errorText</code> and <code class="highlighter-rouge">loadingText</code> attributes:</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span> |
| <span class="na">loadingText=</span><span class="s">"Loading weather information..."</span> |
| <span class="na">errorText=</span><span class="s">"Unable to contact weather server"</span><span class="nt">></span> |
| Placeholder... |
| <span class="nt"></saf:div></span> |
| </code></pre></div></div> |
| |
| <h2 id="refresh-timers">Refresh Timers</h2> |
| |
| <p>Another feature this div template provides is the ability to refresh data on a timed basis. Using the <code class="highlighter-rouge">updateFreq</code> |
| and the <code class="highlighter-rouge">delay</code> attributes, you can specify how often the timer goes off and when the timer starts (times in milliseconds). |
| For example, the following will update every minute after a two second delay:</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span> |
| <span class="na">loadingText=</span><span class="s">"Loading weather information..."</span> |
| <span class="na">errorText=</span><span class="s">"Unable to contact weather server"</span><span class="nt">></span> |
| delay="2000" |
| updateFreq="60000" |
| Placeholder... |
| <span class="nt"></saf:div></span> |
| </code></pre></div></div> |
| |
| <h2 id="listening-for-events">Listening for Events</h2> |
| |
| <p>The <a href="dojo-a-tag.html">a</a> tag (specifically the <a href="ajax-a-template.html">ajax a template</a>) and the div tag support |
| an <a href="ajax-event-system.html">ajax event system</a>, providing the ability to broadcast events to topics. You can specify |
| the <strong>topics</strong> to listen to using a comma separated list in the <code class="highlighter-rouge">listenTopics</code> attribute. What this means is that when |
| a topic is published, usually through the <a href="ajax-a-template.html">ajax a template</a>, the URL specified in the <code class="highlighter-rouge">href</code> |
| attribute will be re-requested.</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:div</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">id=</span><span class="s">"weather"</span> <span class="na">href=</span><span class="s">"http://www.weather.com/weather?zip=97239"</span> |
| <span class="na">loadingText=</span><span class="s">"Loading weather information..."</span> |
| <span class="na">errorText=</span><span class="s">"Unable to contact weather server"</span> |
| <span class="na">listenTopics=</span><span class="s">"weather_topic,some_topic"</span><span class="nt">></span> |
| Placeholder... |
| <span class="nt"></saf:div></span> |
| <span class="nt"><saf:a</span> <span class="na">id=</span><span class="s">"link1"</span> |
| <span class="na">theme=</span><span class="s">"ajax"</span> |
| <span class="na">href=</span><span class="s">"refreshWeather.action"</span> |
| <span class="na">notifyTopics=</span><span class="s">"weather_topic,other_topic"</span> |
| <span class="na">errorText=</span><span class="s">"An Error ocurred"</span><span class="nt">></span>Refresh<span class="nt"></saf:a></span> |
| </code></pre></div></div> |
| |
| <h2 id="javascript-support">JavaScript Support</h2> |
| |
| <p>There are also javascript functions to refresh the content and stop/start the refreshing of the component. |
| For the remote div with the component id <code class="highlighter-rouge">remotediv1</code>:</p> |
| |
| <p>To start refreshing use the javascript:</p> |
| |
| <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">remotediv1</span><span class="p">.</span><span class="nx">startTimer</span><span class="p">();</span> |
| </code></pre></div></div> |
| <p>To stop refreshing use the javascript:</p> |
| |
| <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">remotediv1</span><span class="p">.</span><span class="nx">stopTimer</span><span class="p">();</span> |
| </code></pre></div></div> |
| <p>To refresh the content use the javascript:</p> |
| |
| <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">remotediv1</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span> |
| </code></pre></div></div> |
| |
| <h2 id="javascript-examples">JavaScript Examples</h2> |
| |
| <p>To further illustrate these concepts here is an example. Say you want to change the url of a div at runtime via javascript. |
| Here is what you need to do:</p> |
| |
| <p>What you will need to do is add a JS function that listens to a JS event that publishes the id from the select box that |
| was selected. It will modify the URL for the div (adding the id so the correct data is obtained) and then <code class="highlighter-rouge">bind()</code> |
| the AJAX div so it refreshes.</p> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><saf:head</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="nt">/></span> |
| |
| <span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span> |
| <span class="kd">function</span> <span class="nx">updateReports</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">reportDiv</span><span class="o">=</span> <span class="nb">window</span><span class="p">[</span><span class="s1">'reportDivId'</span><span class="p">];</span> |
| <span class="nx">reportDiv</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s1">'/../reportListRemote.action?selectedId='</span><span class="o">+</span><span class="nx">id</span><span class="p">;</span> |
| <span class="nx">reportDiv</span><span class="p">.</span><span class="nx">refresh</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="nx">getTopic</span><span class="p">(</span><span class="s2">"updateReportsListTopic"</span><span class="p">).</span><span class="nx">subscribe</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">"updateReports"</span><span class="p">);</span> |
| <span class="nt"></script></span> |
| |
| <span class="nt"><form</span> <span class="err">...</span> <span class="nt">></span> |
| <span class="nt"><saf:select</span> <span class="err">....</span> <span class="na">onchange=</span><span class="s">"javascript: dojo.event.topic.publish("</span><span class="na">updateReportsListTopic</span><span class="err">",</span> <span class="na">this</span><span class="err">.</span><span class="na">value</span><span class="err">);</span> <span class="err">"</span> <span class="nt">/></span> |
| |
| <span class="nt"><saf:div</span> <span class="na">id=</span><span class="s">"reportDivId"</span> <span class="na">theme=</span><span class="s">"ajax"</span> <span class="na">href=</span><span class="s">"/.../reportListRemote.action"</span> <span class="nt">></span> |
| Loading reports... |
| <span class="nt"></saf:div></span> |
| <span class="nt"></form></span> |
| </code></pre></div></div> |
| |
| </section> |
| </article> |
| |
| |
| <footer class="container"> |
| <div class="col-md-12"> |
| Copyright © 2000-2018 <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> |
| |
| |
| </body> |
| </html> |
