http://git-wip-us.apache.org/repos/asf/struts-site/blob/124e36c4/content/docs/ajax-a-template.html ---------------------------------------------------------------------- diff --git a/content/docs/ajax-a-template.html b/content/docs/ajax-a-template.html new file mode 100644 index 0000000..b0fc093 --- /dev/null +++ b/content/docs/ajax-a-template.html @@ -0,0 +1,146 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> +<html> +<head> + <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css";> + <style type="text/css"> + .dp-highlighter { + width:95% !important; + } + </style> + <style type="text/css"> + .footer { + background-image: url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif'); + background-repeat: repeat-x; + background-position: left top; + padding-top: 4px; + color: #666; + } + </style> + <script type="text/javascript" language="javascript"> + var hide = null; + var show = null; + var children = null; + + function init() { + /* Search form initialization */ + var form = document.forms['search']; + if (form != null) { + form.elements['domains'].value = location.hostname; + form.elements['sitesearch'].value = location.hostname; + } + + /* Children initialization */ + hide = document.getElementById('hide'); + show = document.getElementById('show'); + children = document.all != null ? + document.all['children'] : + document.getElementById('children'); + if (children != null) { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + } + + function showChildren() { + children.style.display = 'block'; + show.style.display = 'none'; + hide.style.display = 'inline'; + } + + function hideChildren() { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + </script> + <title>ajax a template</title> +</head> +<body onload="init()"> +<table border="0" cellpadding="2" cellspacing="0" width="100%"> + <tr class="topBar"> + <td align="left" valign="middle" class="topBarDiv" align="left" nowrap> + <a href="home.html">Home</a> > <a href="guides.html">Guides</a> > <a href="tag-developers-guide.html">Tag Developers Guide</a> > <a href="struts-tags.html">Struts Tags</a> > <a href="ui-tags.html">UI Tags</a> > <a href="themes-and-templates.html">Themes and Templates</a> > <a href="ajax-theme.html">ajax theme</a> > <a href="ajax-a-template.html">ajax a template</a> + </td> + <td align="right" valign="middle" nowrap> + <form name="search" action="https://www.google.com/search"; method="get"> + <input type="hidden" name="ie" value="UTF-8" /> + <input type="hidden" name="oe" value="UTF-8" /> + <input type="hidden" name="domains" value="" /> + <input type="hidden" name="sitesearch" value="" /> + <input type="text" name="q" maxlength="255" value="" /> + <input type="submit" name="btnG" value="Google Search" /> + </form> + </td> + </tr> +</table> + +<div id="PageContent"> + <div class="pageheader" style="padding: 6px 0px 0px 0px;"> + <!-- We'll enable this once we figure out how to access (and save) the logo resource --> + <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"--> + <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div> + <div style="margin: 0px 10px 8px 10px" class="pagetitle">ajax a template</div> + + <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;"> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=13933";> + <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=13933";>Edit Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";> + <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"; + height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a> + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";>Browse Space</a> + + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=13933";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=13933";>Add Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=13933";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add News"></a> + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=13933";>Add News</a> + </div> + </div> + + <div class="pagecontent"> + <div class="wiki-content"> + <div id="ConfluenceContent"><div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>The ajax theme is experimental. Feedback is appreciated.</p></div></div> + +<p>The ajax a template is used to make asynchronous calls to the server when the user clicks on the a href link. It is useful when you need to communicate information back to the application from the UI, without requiring the entire page to be re-rendered. An example would be removing an item from a list.</p> + +<p>The <em>preInvokeJS</em> attribute is used to determine whether the URL specified should be called or not, and must contain Javascript that returns <em>true</em> or <em>false</em>. If you want to call a JavaScript function, use the format preInvokeJS='yourMethodName(data,type)'. An example would be to show a confirm dialog to the user to double check whether they want to remove a user from a list.</p> + +<p><strong>Remember</strong>: the content returned by the <em>href</em> attribute must be JavaScript. That JavaScript will then be evaluated within the webpage. If you only wish to publish an event to the topic specified, then simply return no result (or NONE) from your action and utilize the <em>notifyTopics</em> attribute to specific the topic names.</p> + +<p>For an example of the interaction between the <a shape="rect" href="div.html">div</a> tag and the <a shape="rect" href="a.html">a</a> tag using the topic pub/sub model, see the examples in the <a shape="rect" href="ajax-div-template.html">ajax div template</a>.</p></div> + </div> + + + </div> +</div> +<div class="footer"> + Generated by CXF SiteExporter +</div> +</body> +</html>
http://git-wip-us.apache.org/repos/asf/struts-site/blob/124e36c4/content/docs/ajax-and-javascript-recipes.html ---------------------------------------------------------------------- diff --git a/content/docs/ajax-and-javascript-recipes.html b/content/docs/ajax-and-javascript-recipes.html new file mode 100644 index 0000000..33d06ce --- /dev/null +++ b/content/docs/ajax-and-javascript-recipes.html @@ -0,0 +1,1184 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> +<html> +<head> + <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css";> + <style type="text/css"> + .dp-highlighter { + width:95% !important; + } + </style> + <style type="text/css"> + .footer { + background-image: url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif'); + background-repeat: repeat-x; + background-position: left top; + padding-top: 4px; + color: #666; + } + </style> + <link href='https://struts.apache.org/highlighter/style/shCoreStruts.css' rel='stylesheet' type='text/css' /> + <link href='https://struts.apache.org/highlighter/style/shThemeStruts.css' rel='stylesheet' type='text/css' /> + <script src='https://struts.apache.org/highlighter/js/shCore.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushPlain.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushXml.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushJava.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushJScript.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushGroovy.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushBash.js' type='text/javascript'></script> + <script src='https://struts.apache.org/highlighter/js/shBrushCss.js' type='text/javascript'></script> + <script type="text/javascript"> + SyntaxHighlighter.defaults['toolbar'] = false; + SyntaxHighlighter.all(); + </script> + <script type="text/javascript" language="javascript"> + var hide = null; + var show = null; + var children = null; + + function init() { + /* Search form initialization */ + var form = document.forms['search']; + if (form != null) { + form.elements['domains'].value = location.hostname; + form.elements['sitesearch'].value = location.hostname; + } + + /* Children initialization */ + hide = document.getElementById('hide'); + show = document.getElementById('show'); + children = document.all != null ? + document.all['children'] : + document.getElementById('children'); + if (children != null) { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + } + + function showChildren() { + children.style.display = 'block'; + show.style.display = 'none'; + hide.style.display = 'inline'; + } + + function hideChildren() { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + </script> + <title>Ajax and JavaScript Recipes</title> +</head> +<body onload="init()"> +<table border="0" cellpadding="2" cellspacing="0" width="100%"> + <tr class="topBar"> + <td align="left" valign="middle" class="topBarDiv" align="left" nowrap> + <a href="home.html">Home</a> > <a href="guides.html">Guides</a> > <a href="tag-developers-guide.html">Tag Developers Guide</a> > <a href="struts-tags.html">Struts Tags</a> > <a href="ajax-tags.html">Ajax Tags</a> > <a href="ajax-and-javascript-recipes.html">Ajax and JavaScript Recipes</a> + </td> + <td align="right" valign="middle" nowrap> + <form name="search" action="https://www.google.com/search"; method="get"> + <input type="hidden" name="ie" value="UTF-8" /> + <input type="hidden" name="oe" value="UTF-8" /> + <input type="hidden" name="domains" value="" /> + <input type="hidden" name="sitesearch" value="" /> + <input type="text" name="q" maxlength="255" value="" /> + <input type="submit" name="btnG" value="Google Search" /> + </form> + </td> + </tr> +</table> + +<div id="PageContent"> + <div class="pageheader" style="padding: 6px 0px 0px 0px;"> + <!-- We'll enable this once we figure out how to access (and save) the logo resource --> + <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"--> + <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div> + <div style="margin: 0px 10px 8px 10px" class="pagetitle">Ajax and JavaScript Recipes</div> + + <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;"> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=56182";> + <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=56182";>Edit Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";> + <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"; + height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a> + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";>Browse Space</a> + + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=56182";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=56182";>Add Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=56182";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add News"></a> + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=56182";>Add News</a> + </div> + </div> + + <div class="pagecontent"> + <div class="wiki-content"> + <div id="ConfluenceContent"><div class="confluence-information-macro confluence-information-macro-warning"><p class="title">Dojo plugin is deprecated</p><span class="aui-icon aui-icon-small aui-iconfont-error confluence-information-macro-icon"></span><div class="confluence-information-macro-body"> +<p>The Dojo plugin will be deprecated on Struts 2.1</p></div></div> + +<style type="text/css">/*<![CDATA[*/ +div.rbtoc1488974082612 {padding: 0px;} +div.rbtoc1488974082612 ul {list-style: none;margin-left: 0px;padding-left: 20px;} +div.rbtoc1488974082612 li {margin-left: 0px;padding-left: 0px;} + +/*]]>*/</style><div class="toc-macro rbtoc1488974082612"> +<ul class="toc-indentation"><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Common">Common</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Requests">Requests</a> +<ul class="toc-indentation"><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Requestistriggeredbyatopic">Request is triggered by a topic</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Attachedtoanevent">Attached to an event</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Attachedtoaneventonmultiplesources">Attached to an event on multiple sources</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Attachedtomultipleeventsonmultiplesources">Attached to multiple events on multiple sources</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Updatetargetelementwithcontentreturnedfromurl">Update target element with content returned from url</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Updatemultipletargetelementswithcontentreturnedfromurl">Update multiple target elements with content returned from url</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Showindicatorwhilerequestisinprogress">Show indicator while request is in progress</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Highlightcontentoftargetwithbluecolor,for2seconds">Highlight content of target with blue color, for 2 seconds</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-ExecuteJavaScriptinthereturnedcontent">Execute JavaScript in the returned content</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Publishatopicbeforetherequest">Publish a topic before the request</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Publishatopicaftertherequest">Publish a topic after the request</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Publishatopiconerror">Publish a topic on error</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Showafixederrormessageonerror">Show a fixed error message on error</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Preventarequest">Prevent a request</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Submitaform(plainform)">Submit a form (plain form)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Submitaform(usings:formtag)">Submit a form (using s:form tag)</a></li></ul> +</li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Div">Div</a> +<ul class="toc-indentation"><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Loadsitscontentafterpageisloaded">Loads its content after page is loaded</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Reloadscontentwhentopicispublished">Reloads content when topic is published</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Updatesitscontentevery2seconds,showsindicatorwhileloadingcontent">Updates its content every 2 seconds, shows indicator while loading content</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Loadsitscontentafteradelayof2seconds">Loads its content after a delay of 2 seconds</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Showsometextwhilecontentisloaded">Show some text while content is loaded</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Fixederrormessage">Fixed error message</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-ExecuteJavaScriptinthereturnedcontent.1">Execute JavaScript in the retur ned content</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Controlrefreshtimerusingtopics">Control refresh timer using topics</a></li></ul> +</li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-DateandTimepicker">Date and Time picker</a> +<ul class="toc-indentation"><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Datepicker">Date picker</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Timepicker">Time picker</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-SetvaluefromanString">Set value from an String</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Setvaluefromstack(valuemustevaluatetoeitheraDate,Calendar,oranStringthatcanbeparsedusingtheformatsdefinedinSimpleDateFormat,andRFC3339)">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 shape="rect" href="#AjaxandJavaScriptRecipes-Set/GetvalueusingJavaScript">Set/Get value using JavaScript</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Stylethetextbox">Style the textbox</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Publishtopicwhenvaluechanges">Publish topic when value changes</a>< /li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Useotherlocales.">Use other locales.</a></li></ul> +</li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-TabbedPanel">Tabbed Panel</a> +<ul class="toc-indentation"><li><a shape="rect" href="#AjaxandJavaScriptRecipes-LocalTabs">Local Tabs</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Localandremotetabs">Local and remote tabs</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Fixedsize(sizedoesnotadjusttocurrenttab)">Fixed size (size does not adjust to current tab)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Donotloadtab2whenpageloads(itwillbeloadedwhenselected)">Do not load tab 2 when page loads (it will be loaded when selected)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Reloadtabscontentwhenselected">Reload tabs content when selected</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Disabledtabs">Disabled tabs</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Enable/DisabletabsusingJavaScript">Enable/Disable tabs using JavaScript</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-SetTablabelspositiontobottom(canbe:top,right,bottom,l eft)">Set Tab labels position to bottom (can be: top, right, bottom, left)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Allowtab2toberemoved(closed)">Allow tab 2 to be removed(closed)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Publishtopicswhentabisselected">Publish topics when tab is selected</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-SelecttabusingJavaScript">Select tab using JavaScript</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Preventtab2frombeingselected">Prevent tab 2 from being selected</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Customizetemplatecsspath(Dojowidgettemplatecss)">Customize template css path (Dojo widget template css)</a></li></ul> +</li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Autocompleter">Autocompleter</a> +<ul class="toc-indentation"><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Fixedlist">Fixed list</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Setinitialvalue">Set initial value</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Forcevalidoption(restoreoptionwhenfocusislost)">Force valid option (restore option when focus is lost)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-UsingtheJSONplugintogeneratethevalues(oneofthepossibleways)">Using the JSON plugin to generate the values (one of the possible ways)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Exampleaction">Example action</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Setinitialkeyandvalue">Set initial key and value</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Changedefaultkeyname">Change default key name</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-JSONaccepted">JSON accepted</a></li><li><a shape="rect" href="#AjaxandJavaScrip tRecipes-Loadcharacterswhileusertypes(whentextsize>=3)">Load characters while user types (when text size >= 3)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Hidedropdownarrow">Hide dropdown arrow</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Limitoptionsshownto3">Limit options shown to 3</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Allmatchingoptionsareshown">All matching options are shown</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Setdropdownheightandwidth,inpixels">Set dropdown height and width, in pixels</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Disableitwhenpageisloaded">Disable it when page is loaded</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Disableit/enableitusingJavaScript">Disable it/enable it using JavaScript</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Reloadoptionswhentopicispublished">Reload options when topic is published</a></li><li><a shape="rect" href= "#AjaxandJavaScriptRecipes-Submitformwhenoptionsareloaded">Submit form when options are loaded</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Filterfieldstopbesubmittedwhenoptionsareloaded(returntruetoinclude)">Filter fields top be submitted when options are loaded (return true to include)</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Linktwoautocompleters,usingtopics">Link two autocompleters, using topics</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Showoptions,butdon'tmakesuggestion(autocomple)inthetextbox">Show options, but don't make suggestion (autocomple) in the textbox</a></li><li><a shape="rect" href="#AjaxandJavaScriptRecipes-Preventoptionsfromloadingwhenpageloads">Prevent options from loading when page loads</a></li></ul> +</li></ul> +</div> + + +<h4 id="AjaxandJavaScriptRecipes-Common">Common</h4> +<p>All examples on this page assume the following JSP fragment is on the same page as the example.</p> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<%@ taglib prefix="s" uri="/struts-tags" %> +<%@ taglib prefix="sx" uri="/struts-dojo-tags" %> + +<head> + <sx:head /> +</head> + +<s:url id="url" value="/MyAction.action" /> +</pre> +</div></div> + +<h4 id="AjaxandJavaScriptRecipes-Requests">Requests</h4> +<h5 id="AjaxandJavaScriptRecipes-Requestistriggeredbyatopic">Request is triggered by a topic</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:submit value="Make Request" onclick="dojo.event.topic.publish('/request')" /> +<sx:bind listenTopics="/request" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Attachedtoanevent">Attached to an event</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:submit value="Make Request" id="submit" /> +<sx:bind sources="submit" events="onclick" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Attachedtoaneventonmultiplesources">Attached to an event on multiple sources</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:submit value="Make Request" id="submit0" /> +<s:submit value="Make Request" id="submit1" /> +<sx:bind sources="submit0,submit1" events="onclick" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Attachedtomultipleeventsonmultiplesources">Attached to multiple events on multiple sources</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:textarea id="area0" /> +<s:textarea id="area1" /> +<sx:bind sources="area0,area1" events="onfocus,onchange" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Updatetargetelementwithcontentreturnedfromurl">Update target element with content returned from url</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Updatemultipletargetelementswithcontentreturnedfromurl">Update multiple target elements with content returned from url</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Showindicatorwhilerequestisinprogress">Show indicator while request is in progress</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Highlightcontentoftargetwithbluecolor,for2seconds">Highlight content of target with blue color, for 2 seconds</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-ExecuteJavaScriptinthereturnedcontent">Execute JavaScript in the returned content</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Publishatopicbeforetherequest">Publish a topic before the request</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> + +<!-- 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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Publishatopicaftertherequest">Publish a topic after the request</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + + +<h5 id="AjaxandJavaScriptRecipes-Publishatopiconerror">Publish a topic on error</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Showafixederrormessageonerror">Show a fixed error message on error</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Preventarequest">Prevent a request</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Submitaform(plainform)">Submit a form (plain form)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Submitaform(usings:formtag)">Submit a form (using s:form tag)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<!-- 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> +</pre> +</div></div> + +<h4 id="AjaxandJavaScriptRecipes-Div">Div</h4> +<h5 id="AjaxandJavaScriptRecipes-Loadsitscontentafterpageisloaded">Loads its content after page is loaded</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:div href="%{#url}"> + Initial Content +</sx:div> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Reloadscontentwhentopicispublished">Reloads content when topic is published</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:div href="%{#url}" listenTopics="/refresh"> + Initial Content +</sx:div> + +<s:submit value="Refresh" onclick="dojo.event.topic.publish('/refresh')" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Updatesitscontentevery2seconds,showsindicatorwhileloadingcontent">Updates its content every 2 seconds, shows indicator while loading content</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/> +<sx:div href="%{#url}" updateFreq="2000"> + Initial Content +</sx:div> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Loadsitscontentafteradelayof2seconds">Loads its content after a delay of 2 seconds</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:div href="%{#url}" delay="2000"> + Initial Content +</sx:div> +</pre> +</div></div> + + +<h5 id="AjaxandJavaScriptRecipes-Showsometextwhilecontentisloaded">Show some text while content is loaded</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:div href="%{#url}" loadingText="reloading" showLoadingText="true"> + Initial Content +</sx:div> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Fixederrormessage">Fixed error message</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:div href="noaction" errorText="Error loading content"> + Initial Content +</sx:div> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-ExecuteJavaScriptinthereturnedcontent.1">Execute JavaScript in the returned content</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:div href="%{#url}" executeScripts="true"> + Initial Content +</sx:div> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Controlrefreshtimerusingtopics">Control refresh timer using topics</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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')" /> +</pre> +</div></div> + +<h4 id="AjaxandJavaScriptRecipes-DateandTimepicker">Date and Time picker</h4> +<h5 id="AjaxandJavaScriptRecipes-Datepicker">Date picker</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:datetimepicker name="picker" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Timepicker">Time picker</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:datetimepicker type="time" name="picker" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-SetvaluefromanString">Set value from an String</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:datetimepicker value="%{'2007-01-01'}" name="picker" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Setvaluefromstack(valuemustevaluatetoeitheraDate,Calendar,oranStringthatcanbeparsedusingtheformatsdefinedinSimpleDateFormat,andRFC3339)">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)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:datetimepicker value="date" name="picker" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Set/GetvalueusingJavaScript">Set/Get value using JavaScript</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Stylethetextbox">Style the textbox</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:datetimepicker id="picker" cssStye="background:red" cssClass="someclass"/> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Publishtopicwhenvaluechanges">Publish topic when value changes</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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"/> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Useotherlocales.">Use other locales. </h5> + +<div class="confluence-information-macro confluence-information-macro-warning"><span class="aui-icon aui-icon-small aui-iconfont-error confluence-information-macro-icon"></span><div class="confluence-information-macro-body"> +<p>Locales must be specified in the sx:head tag.</p></div></div> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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" /> +</pre> +</div></div> + +<h4 id="AjaxandJavaScriptRecipes-TabbedPanel">Tabbed Panel</h4> +<h5 id="AjaxandJavaScriptRecipes-LocalTabs">Local Tabs</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Localandremotetabs">Local and remote tabs</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Fixedsize(sizedoesnotadjusttocurrenttab)">Fixed size (size does not adjust to current tab)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Donotloadtab2whenpageloads(itwillbeloadedwhenselected)">Do not load tab 2 when page loads (it will be loaded when selected)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Reloadtabscontentwhenselected">Reload tabs content when selected</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Disabledtabs">Disabled tabs</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Enable/DisabletabsusingJavaScript">Enable/Disable tabs using JavaScript</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-SetTablabelspositiontobottom(canbe:top,right,bottom,left)">Set Tab labels position to bottom (can be: top, right, bottom, left)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Allowtab2toberemoved(closed)">Allow tab 2 to be removed(closed)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Publishtopicswhentabisselected">Publish topics when tab is selected</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-SelecttabusingJavaScript">Select tab using JavaScript</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Preventtab2frombeingselected">Prevent tab 2 from being selected</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Customizetemplatecsspath(Dojowidgettemplatecss)">Customize template css path (Dojo widget template css)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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> +</pre> +</div></div> + +<h4 id="AjaxandJavaScriptRecipes-Autocompleter">Autocompleter</h4> +<h5 id="AjaxandJavaScriptRecipes-Fixedlist">Fixed list</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter list="{'apple','banana','grape','pear'}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Setinitialvalue">Set initial value</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter list="{'apple','banana','grape','pear'}" value="apple"/> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Forcevalidoption(restoreoptionwhenfocusislost)">Force valid option (restore option when focus is lost)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter list="{'apple','banana','grape','pear'}" forceValidOption="true"/> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-UsingtheJSONplugintogeneratethevalues(oneofthepossibleways)">Using the JSON plugin to generate the values (one of the possible ways)</h5> +<p>The action</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>AutocompleterExample.java</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> +public class AutocompleterExample extends ActionSupport { + + public Map<String, String> getOptions() { + Map<String,String> options = new HashMap<String,String>(); + options.put("Florida", "FL"); + options.put("Alabama", "AL"); + + return options; + } +} +</pre> +</div></div> + +<p>The mapping:</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>struts.xml</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;"> +<struts> +... + <package name="autocompleter" namespace="/autocompleter" extends="json-default"> + <action name="getStates" class="AutocompleterExample"> + <result type="json"> + <param name="root">options</param></result> + </action> + </package> +... +</struts> +</pre> +</div></div> + +<p>The JSP (fragment):</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:url id="optionsUrl" namespace="/autocompleter" action="getStates" /> + +<sx:autocompleter href="%{#optionsUrl}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Exampleaction">Example action</h5> +<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> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>MyAction.java</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> +public MyAction extends ActionSupport { + private String optionsKey; + private String options; + + ... +} +</pre> +</div></div> + +<p>The JSP:</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:form id="form"> + <sx:autocompleter name="options" label="Options" /> +</s:form> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Setinitialkeyandvalue">Set initial key and value</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:url id="optionsUrl" namespace="/autocompleter" action="getStates" /> + +<sx:autocompleter href="%{#optionsUrl}" value="Florida" keyValue="FL"/> +</pre> +</div></div> + + +<h5 id="AjaxandJavaScriptRecipes-Changedefaultkeyname">Change default key name</h5> +<p>The action:</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>MyAction.java</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;"> +public MyAction extends ActionSupport { + private String superKey; + private String options; + + ... +} +</pre> +</div></div> + +<p>The JSP:</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:form id="form"> + <sx:autocompleter keyName="superKey" name="options" label="Options" /> +</s:form> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-JSONaccepted">JSON accepted</h5> +<p>for this autocompleter:</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter name="state" /> +</pre> +</div></div> + +<p>The following JSON will be accepted:</p> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Map(recommended as it is the easiest one to generate)</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: javascript; gutter: false; theme: Default" style="font-size:12px;"> +{ + "Alabama" : "AL", + "Alaska" : "AK" +} +</pre> +</div></div> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Array of arrays</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: javascript; gutter: false; theme: Default" style="font-size:12px;"> +[ + ["Alabama", "AL"], + ["Alaska", "AK"] +] +</pre> +</div></div> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Array inside object, same name as field</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: javascript; gutter: false; theme: Default" style="font-size:12px;"> +{ + "state" : [ + ["Alabama","AL"], + ["Alaska","AK"] + ] +} +</pre> +</div></div> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Map inside object, same name as field</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: javascript; gutter: false; theme: Default" style="font-size:12px;"> +{ + "state" : { + "Alabama" : "Alabama", + "Alaska" : "AK" + } +} +</pre> +</div></div> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Array inside object, field in response starts with the name of the autocompleter("state" in this example)</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: javascript; gutter: false; theme: Default" style="font-size:12px;"> +{ + "states" : [ + ["Alabama","AL"], + ["Alaska","AK"] + ] +} +</pre> +</div></div> + +<div class="code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>No name match, use first array found, and hope for the best</b></div><div class="codeContent panelContent pdl"> +<pre class="brush: javascript; gutter: false; theme: Default" style="font-size:12px;"> +{ + "Australopithecus" : [ + ["Alabama","AL"], + ["Alaska","AK"] + ] +} +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Loadcharacterswhileusertypes(whentextsize>=3)">Load characters while user types (when text size >= 3)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter href="%{#url}" loadOnTextChange="true" loadMinimumCount="3" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Hidedropdownarrow">Hide dropdown arrow</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter href="%{#url}" showDownArrow="false" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Limitoptionsshownto3">Limit options shown to 3</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter href="%{#url}" resultsLimit="3" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Allmatchingoptionsareshown">All matching options are shown</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter href="%{#url}" resultsLimit="-1" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Setdropdownheightandwidth,inpixels">Set dropdown height and width, in pixels</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter href="%{#url}" dropdownHeight="180" dropdownWidth="200" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Disableitwhenpageisloaded">Disable it when page is loaded</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter href="%{#url}" disabled="true" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Disableit/enableitusingJavaScript">Disable it/enable it using JavaScript</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Reloadoptionswhentopicispublished">Reload options when topic is published</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter listenTopics="/reload" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Submitformwhenoptionsareloaded">Submit form when options are loaded</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<s:form id="form"> + <input type="textbox" name="data"> +</s:form> + +<sx:autocompleter formId="form" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Filterfieldstopbesubmittedwhenoptionsareloaded(returntruetoinclude)">Filter fields top be submitted when options are loaded (return true to include)</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<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}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Linktwoautocompleters,usingtopics">Link two autocompleters, using topics</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<form id="selectForm"> + <sx:autocompleter name="select" list="{'fruits','colors'}" valueNotifyTopics="/changed" /> +</form> + +<sx:autocompleter href="%{#url}" formId="selectForm" listenTopics="/changed" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Showoptions,butdon'tmakesuggestion(autocomple)inthetextbox">Show options, but don't make suggestion (autocomple) in the textbox</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter autoComplete="false" href="%{#url}" /> +</pre> +</div></div> + +<h5 id="AjaxandJavaScriptRecipes-Preventoptionsfromloadingwhenpageloads">Prevent options from loading when page loads</h5> +<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl"> +<pre class="brush: html; gutter: false; theme: Default" style="font-size:12px;"> +<sx:autocompleter preload="false" href="%{#url}" /> +</pre> +</div></div></div> + </div> + + + </div> +</div> +<div class="footer"> + Generated by CXF SiteExporter +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/struts-site/blob/124e36c4/content/docs/ajax-client-side-validation.html ---------------------------------------------------------------------- diff --git a/content/docs/ajax-client-side-validation.html b/content/docs/ajax-client-side-validation.html new file mode 100644 index 0000000..404a171 --- /dev/null +++ b/content/docs/ajax-client-side-validation.html @@ -0,0 +1,158 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> +<html> +<head> + <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css";> + <style type="text/css"> + .dp-highlighter { + width:95% !important; + } + </style> + <style type="text/css"> + .footer { + background-image: url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif'); + background-repeat: repeat-x; + background-position: left top; + padding-top: 4px; + color: #666; + } + </style> + <script type="text/javascript" language="javascript"> + var hide = null; + var show = null; + var children = null; + + function init() { + /* Search form initialization */ + var form = document.forms['search']; + if (form != null) { + form.elements['domains'].value = location.hostname; + form.elements['sitesearch'].value = location.hostname; + } + + /* Children initialization */ + hide = document.getElementById('hide'); + show = document.getElementById('show'); + children = document.all != null ? + document.all['children'] : + document.getElementById('children'); + if (children != null) { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + } + + function showChildren() { + children.style.display = 'block'; + show.style.display = 'none'; + hide.style.display = 'inline'; + } + + function hideChildren() { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + </script> + <title>AJAX Client Side Validation</title> +</head> +<body onload="init()"> +<table border="0" cellpadding="2" cellspacing="0" width="100%"> + <tr class="topBar"> + <td align="left" valign="middle" class="topBarDiv" align="left" nowrap> + <a href="home.html">Home</a> > <a href="guides.html">Guides</a> > <a href="core-developers-guide.html">Core Developers Guide</a> > <a href="validation.html">Validation</a> > <a href="client-side-validation.html">Client Side Validation</a> > <a href="pure-javascript-client-side-validation.html">Pure JavaScript Client Side Validation</a> > <a href="ajax-client-side-validation.html">AJAX Client Side Validation</a> + </td> + <td align="right" valign="middle" nowrap> + <form name="search" action="https://www.google.com/search"; method="get"> + <input type="hidden" name="ie" value="UTF-8" /> + <input type="hidden" name="oe" value="UTF-8" /> + <input type="hidden" name="domains" value="" /> + <input type="hidden" name="sitesearch" value="" /> + <input type="text" name="q" maxlength="255" value="" /> + <input type="submit" name="btnG" value="Google Search" /> + </form> + </td> + </tr> +</table> + +<div id="PageContent"> + <div class="pageheader" style="padding: 6px 0px 0px 0px;"> + <!-- We'll enable this once we figure out how to access (and save) the logo resource --> + <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"--> + <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div> + <div style="margin: 0px 10px 8px 10px" class="pagetitle">AJAX Client Side Validation</div> + + <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;"> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14305";> + <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14305";>Edit Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";> + <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"; + height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a> + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";>Browse Space</a> + + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14305";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14305";>Add Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14305";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add News"></a> + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14305";>Add News</a> + </div> + </div> + + <div class="pagecontent"> + <div class="wiki-content"> + <div id="ConfluenceContent"><div class="confluence-information-macro confluence-information-macro-tip"><span class="aui-icon aui-icon-small aui-iconfont-approve confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>This validation mode only works with the <a shape="rect" href="ajax-theme.html">ajax theme</a></p></div></div> + +<p>AJAX-based client side validation improves upon <a shape="rect" href="pure-javascript-client-side-validation.html">Pure JavaScript Client Side Validation</a> by using a combination of JavaScript, DOM manipulation, and remote server communication. Unlike the pure client side implementation, AJAX-based validation communicates with the server. This means all your validation rules that worked when submitting a form will still work within the browser.</p> + +<p>The validation occurs on each <strong>onblur</strong> event for each form element. As each user types in some values and moves to the next form element, the value (and all other values previously entered) will be sent to the server for validation. The entire validation stack is run, including visitor validators and your action's validate() method.</p> + +<p>If there is an error, like the pure implementation, the HTML and DOM will be updated immediately.</p> + +<p>For an example of this, see <a shape="rect" href="ajax-validation.html">AJAX Validation</a>.</p></div> + </div> + + <div class="tabletitle"> + Children + <span class="smalltext" id="show" style="display: inline;"> + <a href="javascript:showChildren()">Show Children</a></span> + <span class="smalltext" id="hide" style="display: none;"> + <a href="javascript:hideChildren()">Hide Children</a></span> + </div> + <div class="greybox" id="children" style="display: none;"> + $page.link($child) + <span class="smalltext">(Apache Struts 2 Documentation)</span> + <br> + </div> + + </div> +</div> +<div class="footer"> + Generated by CXF SiteExporter +</div> +</body> +</html> http://git-wip-us.apache.org/repos/asf/struts-site/blob/124e36c4/content/docs/ajax-common-header.html ---------------------------------------------------------------------- diff --git a/content/docs/ajax-common-header.html b/content/docs/ajax-common-header.html new file mode 100644 index 0000000..d720229 --- /dev/null +++ b/content/docs/ajax-common-header.html @@ -0,0 +1,144 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> +<html> +<head> + <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css";> + <style type="text/css"> + .dp-highlighter { + width:95% !important; + } + </style> + <style type="text/css"> + .footer { + background-image: url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif'); + background-repeat: repeat-x; + background-position: left top; + padding-top: 4px; + color: #666; + } + </style> + <script type="text/javascript" language="javascript"> + var hide = null; + var show = null; + var children = null; + + function init() { + /* Search form initialization */ + var form = document.forms['search']; + if (form != null) { + form.elements['domains'].value = location.hostname; + form.elements['sitesearch'].value = location.hostname; + } + + /* Children initialization */ + hide = document.getElementById('hide'); + show = document.getElementById('show'); + children = document.all != null ? + document.all['children'] : + document.getElementById('children'); + if (children != null) { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + } + + function showChildren() { + children.style.display = 'block'; + show.style.display = 'none'; + hide.style.display = 'inline'; + } + + function hideChildren() { + children.style.display = 'none'; + show.style.display = 'inline'; + hide.style.display = 'none'; + } + </script> + <title>ajax common header</title> +</head> +<body onload="init()"> +<table border="0" cellpadding="2" cellspacing="0" width="100%"> + <tr class="topBar"> + <td align="left" valign="middle" class="topBarDiv" align="left" nowrap> + <a href="home.html">Home</a> > <a href="guides.html">Guides</a> > <a href="tag-developers-guide.html">Tag Developers Guide</a> > <a href="struts-tags.html">Struts Tags</a> > <a href="tag-reference.html">Tag Reference</a> > <a href="ui-tag-reference.html">UI Tag Reference</a> > <a href="ajax-common-header.html">ajax common header</a> + </td> + <td align="right" valign="middle" nowrap> + <form name="search" action="https://www.google.com/search"; method="get"> + <input type="hidden" name="ie" value="UTF-8" /> + <input type="hidden" name="oe" value="UTF-8" /> + <input type="hidden" name="domains" value="" /> + <input type="hidden" name="sitesearch" value="" /> + <input type="text" name="q" maxlength="255" value="" /> + <input type="submit" name="btnG" value="Google Search" /> + </form> + </td> + </tr> +</table> + +<div id="PageContent"> + <div class="pageheader" style="padding: 6px 0px 0px 0px;"> + <!-- We'll enable this once we figure out how to access (and save) the logo resource --> + <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"--> + <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div> + <div style="margin: 0px 10px 8px 10px" class="pagetitle">ajax common header</div> + + <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;"> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=66934";> + <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=66934";>Edit Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";> + <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"; + height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a> + <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW";>Browse Space</a> + + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=66934";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add Page"></a> + <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=66934";>Add Page</a> + + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=66934";> + <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"; + height="16" width="16" border="0" align="absmiddle" title="Add News"></a> + <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=66934";>Add News</a> + </div> + </div> + + <div class="pagecontent"> + <div class="wiki-content"> + <div id="ConfluenceContent"><p> +</p><div class="confluence-information-macro confluence-information-macro-warning"><span class="aui-icon aui-icon-small aui-iconfont-error confluence-information-macro-icon"></span><div class="confluence-information-macro-body"> +<p>To use this tag:</p> +<ul><li>Add: <em><%@ taglib prefix="sx" uri="/struts-dojo-tags" %></em> to your page.</li><li>The <a shape="rect" href="dojo-head.html">head</a> tag must be included on the page, which can be configured for performance or debugging purposes.</li><li>If the parseContent parameter for the <a shape="rect" href="dojo-head.html">head</a> tag is false (it is false by default), then the <strong>id</strong> tag is required.</li></ul> +</div></div> +<div class="confluence-information-macro confluence-information-macro-tip"><p class="title">Additional Examples</p><span class="aui-icon aui-icon-small aui-iconfont-approve confluence-information-macro-icon"></span><div class="confluence-information-macro-body"> +<p>For more examples see <a shape="rect" href="ajax-and-javascript-recipes.html">Ajax and JavaScript Recipes</a></p></div></div></div> + </div> + + + </div> +</div> +<div class="footer"> + Generated by CXF SiteExporter +</div> +</body> +</html>
![https://cwiki.apache.org/confluence/images/icons/notep_16.gif"](https://cwiki.apache.org/confluence/images/icons/notep_16.gif"){kind=link}
![https://cwiki.apache.org/confluence/images/icons/browse_space.gif"](https://cwiki.apache.org/confluence/images/icons/browse_space.gif"){kind=link}
![https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"](https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"){kind=link}
![https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"](https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"){kind=link}