You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@struts.apache.org by mu...@apache.org on 2007/06/07 01:14:54 UTC
svn commit: r544986 -
/struts/struts2/trunk/apps/showcase/src/main/webapp/ajax/autocompleter/index.jsp
Author: musachy
Date: Wed Jun 6 16:14:52 2007
New Revision: 544986
URL: http://svn.apache.org/viewvc?view=rev&rev=544986
Log:
Add a couple of examples to the autocompleter page
Modified:
struts/struts2/trunk/apps/showcase/src/main/webapp/ajax/autocompleter/index.jsp
Modified: struts/struts2/trunk/apps/showcase/src/main/webapp/ajax/autocompleter/index.jsp
URL: http://svn.apache.org/viewvc/struts/struts2/trunk/apps/showcase/src/main/webapp/ajax/autocompleter/index.jsp?view=diff&rev=544986&r1=544985&r2=544986
==============================================================================
--- struts/struts2/trunk/apps/showcase/src/main/webapp/ajax/autocompleter/index.jsp (original)
+++ struts/struts2/trunk/apps/showcase/src/main/webapp/ajax/autocompleter/index.jsp Wed Jun 6 16:14:52 2007
@@ -10,6 +10,39 @@
<!--// END SNIPPET: common-include-->
</head>
+<script type="text/javascript">
+ dojo.event.topic.subscribe("/before", function(event, widget){
+ debugger;
+ alert('inside a topic event. before request');
+ //event: set event.cancel = true, to cancel request
+ //widget: widget that published the topic
+ });
+
+ dojo.event.topic.subscribe("/after", function(data, request, widget){
+ alert('inside a topic event. after request');
+ //data : json object from request
+ //request: XMLHttpRequest object
+ //widget: widget that published the topic
+ });
+
+ dojo.event.topic.subscribe("/value", 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
+ });
+
+ function showKey() {
+ var autoCompleter = dojo.widget.byId('jsauto');
+ alert(autoCompleter.getSelectedKey());
+ }
+
+ function showValue() {
+ var autoCompleter = dojo.widget.byId('jsauto');
+ alert(autoCompleter.getSelectedValue());
+ }
+</script>
+
<body>
@@ -17,51 +50,63 @@
Using a JSON list returned from an action (href="/JSONList.action"), without autoComplete (autoComplete="false"), use indicator, search substring (searchType="substring")
<br/>
-<sx:autocompleter name="state" indicator="indicator1" href="%{jsonList}" cssStyle="width: 200px;" autoComplete="false" searchType="substring"/>
+<sx:autocompleter
+ indicator="indicator1"
+ href="%{jsonList}"
+ cssStyle="width: 200px;"
+ autoComplete="false"
+ searchType="substring"
+ name="state"/>
<img id="indicator1" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
-<br/>
-<br/>
+<br/><br/>
Reload on type (loadOnTextChange="true"), after 3 characters (loadMinimumCout="3", it is "3" by default), without the down arrow button (showDownArrow="false")
<br/>
-<sx:autocompleter indicator="indicator" href="%{jsonList}" cssStyle="width: 200px;" autoComplete="false" loadOnTextChange="true" loadMinimumCount="3" showDownArrow="false"/>
+<sx:autocompleter
+ indicator="indicator"
+ href="%{jsonList}"
+ cssStyle="width: 200px;"
+ autoComplete="false"
+ loadOnTextChange="true"
+ loadMinimumCount="3"
+ showDownArrow="false"/>
<img id="indicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
-<br/>
-<br/>
+<br/><br/>
Using a JSON list returned from an action (href="/JSONList.action"), with autoComplete (autoComplete="true")
<br/>
-<sx:autocompleter href="%{jsonList}" cssStyle="width: 200px;" autoComplete="true" />
+<sx:autocompleter
+ href="%{#jsonList}"
+ cssStyle="width: 200px;"
+ autoComplete="true" />
-<br/>
-<br/>
+<br/><br/>
-Using a local list (list="{'apple','banana','grape','pear'}")
+Using a local list (list="%{'apple','banana','grape','pear'}")
<br/>
<sx:autocompleter list="{'apple','banana','grape','pear'}" cssStyle="width: 150px;"/>
-<br/>
-<br/>
+<br/><br/>
Force valid options (forceValidOption="true")
<br/>
-<sx:autocompleter href="%{jsonList}" cssStyle="width: 200px;" forceValidOption="true"/>
+<sx:autocompleter href="%{#jsonList}" cssStyle="width: 200px;" forceValidOption="true"/>
<br/>
<br/>
Make dropdown's height to 180px (dropdownHeight="180")
<br/>
-<sx:autocompleter href="%{jsonList}" cssStyle="width: 200px;" dropdownHeight="180"/>
+<sx:autocompleter href="%{#jsonList}" cssStyle="width: 200px;" dropdownHeight="180"/>
<br/>
<br/>
Disabled combobox (disabled="true")
<br/>
-<sx:autocompleter href="%{jsonList}" cssStyle="width: 200px;" disabled="true"/>
+<sx:autocompleter href="%{#jsonList}" cssStyle="width: 200px;" disabled="true"/>
<br/>
<br/>
@@ -72,12 +117,46 @@
Link two autocompleter elements. When the selected value in 'Autocompleter 1' changes, the available values in 'Autocompleter 2' will change also.
<br/>
<form id="selectForm">
- <p>Autocompleter 1 <sx:autocompleter name="select" list="{'fruits','colors'}" value="colors" valueNotifyTopics="/Changed" forceValidOption="true" id="sel"/></p>
+ <p>
+ Autocompleter 1
+ <sx:autocompleter
+ name="select"
+ list="%{'fruits','colors'}"
+ value="colors"
+ valueNotifyTopics="/Changed"
+ forceValidOption="true"/>
+ </p>
</form>
-Autocompleter 2 <sx:autocompleter href="%{#autoex}" autoComplete="false" formId="selectForm" listenTopics="/Changed" forceValidOption="true" id="ops"/>
+Autocompleter 2
+<sx:autocompleter
+ href="%{#autoex}"
+ autoComplete="false"
+ formId="selectForm"
+ listenTopics="/Changed"
+ forceValidOption="true" />
+
+<br/><br/>
+
+Publish before/after/value notify topics
+<br/>
+<sx:autocompleter
+ href="%{#jsonList}"
+ listenTopics="/reload"
+ beforeNotifyTopics="/before"
+ afterNotifyTopics="/after"
+ valueNotifyTopics="/value"
+ cssStyle="width: 200px;" />
+<s:submit theme="simple" value="Reload Values" onclick="dojo.event.topic.publish('/reload')"/>
+
+<br/><br/>
+
+Get values using JavaScript
+<br/>
+<sx:autocompleter href="%{#jsonList}" id="jsauto" name="state"/>
+<s:submit theme="simple" value="Show Key" onclick="showKey()"/>
+<s:submit theme="simple" value="Show Value" onclick="showValue()"/>
-<br/>
-<br/>
+<br/><br/>
<s:include value="../footer.jsp"/>
</body>