Skip to main content

Publishing onChange event with yahoo autocompleter widget

3 replies [Last post]
jziliox
Offline
Joined: 2008-11-30
Points: 0

Hi,

i'm building a little app using JSF ans jMaki framework.
I have to use an autocomplete textbox to get remote data while typing ( pretty much like that : http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr.html ) but i can't catch onChange events in the glue.js (onSelect works well actually).

this is how i declare the widget :

</p>
<p>

I use a bean to populate the widget with initial datas. The widget manages to autocomplete values with these initial datas and when i select one of them, the following code is triggered :

<br />
jmaki.subscribe("/autocomp/getValues/*",  function(args){<br />
    jmaki.log("/autocomp/ : request from: " + args.widgetId);<br />
    var message = args.value;<br />
    jmaki.log("MEssage : "+message);<br />
    jmaki.log("webroot : "+jmaki.webRoot);</p>
<p>    jmaki.doAjax({</p>
<p>        method: "POST",<br />
        url: jmaki.webRoot+"/faces/TypeHelpBean-givenNameService.ajax",</p>
<p>        content: {cmd: 'query', value: message},<br />
        callback:function(req){<br />
            jmaki.log("returned response is = " + req.responseText);<br />
            var resText = req.responseText;<br />
            var res = eval(resText);<br />
            jmaki.log("final result = " + res);<br />
            jmaki.publish("/autocomp/setValues", {message: {values:res}});<br />
        },</p>
<p>        onerror: function (m){<br />
            jmaki.log("Error setting filter value.");</p>
<p>        }<br />
    });<br />

(this is an extract from glue.js)

Is it possible to trigger this code with the onchange event, like in the yahoo example?

Thanks!

By the way, here is the log i get during execution :

<br />
Publish  : Topic: /jmaki/runtime/intialized message {}<br />
Publish : Topic: /jmaki/runtime/extensionsLoaded message {}<br />
Publish : Topic: /jmaki/runtime/widget/loaded message {id : 'yahoo_autocomplete24'}<br />
Publish : Topic: /jmaki/runtime/widget/loaded message {id : 'dojo_dijit_combobox25'}<br />
Publish : Topic: /jmaki/runtime/widgetsLoaded message {}<br />
Publish : Topic: /jmaki/runtime/loadComplete message {}<br />
Publish : Topic: /autocomp/getValues//onSelect message {widgetId : 'yahoo_autocomplete24' , topic : '/a<br />
...<br />
 [X]<br />
Publish : Topic: /autocomp/getValues//onSelect message {widgetId : 'yahoo_autocomplete24' , topic : '/autocomp/getValues/' , type : 'onSelect' , targetId : 'yahoo_autocomplete24_item_0' , value : 'AL'}<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '*onSelect' , target : {} ,<br />
...<br />
 [X]<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '*onSelect' , target : {} , action : 'call' , id : 'jmk_2'}<br />
glue.js : onSelect request from: yahoo_autocomplete24<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '/autocomp/getValues/*' , t<br />
...<br />
 [X]<br />
Subscribe Match : : Topic: /autocomp/getValues//onSelect listener {topic : '/autocomp/getValues/*' , target : {} , action : 'call' , id : 'jmk_6'}<br />
/autocomp/ : request from: yahoo_autocomplete24<br />
MEssage : AL<br />
webroot : <a href="http://localhost:8084/WebApplication2" title="http://localhost:8084/WebApplication2">http://localhost:8084/WebApplication2</a><br />
returned response is = [["toto" ],["titi" ],["tutu" ]]<br />
final result = toto,titi,tutu<br />
Publish : Topic: /autocomp/setValues message {message : {values : toto,titi,tutu}}<br />

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
jziliox
Offline
Joined: 2008-11-30
Points: 0

Hi again,

I have a look at this thread : http://forums.java.net/jive/thread.jspa?threadID=53152
and i've tried this :

[code]
id="yahooAutocomp"
args="{completionMethod : 'server'}"
publish="/autocomp/getValues"
service="test.jsp"
/>
[/code]

with, this test.jsp :

[code]
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

{ items : [
{label : 'Alabama', value : 'AL'},
{label : 'Alabama 2', value : 'AL 2'},
{label : 'Alabama 3', value : 'AL 2'},
{label : 'California', value : 'CA'},
{label : 'New York', value : 'NY'},
{label : 'Texas', value : 'TX'}
]
}
[/code]

Now, test.jsp i trigger when i type a key, but no publishing for the onSelect event...
By the way, i prefer to use ajax managed beans than this kind of trick to make things work.

Any ideas? Please, help!

gmurray71
Offline
Joined: 2003-07-31
Points: 0

Did you replace your /yahoo/autocomplete/component.js with:

https://widgets.dev.java.net/source/browse/*checkout*/widgets/trunk/code...

The updates I believe should enable what you are looking for.

You may not want to use the publish of :

publish="/autocomp/getValues"

This will publish all events to :

"/autocomp/getValues/onSelect"

The publish is always the base for all publishes and it will still get picked up if you subscribe to "*onSelect" if that is what you had hoped for.

Let me know if this does what you hope for.

-Greg

jziliox
Offline
Joined: 2008-11-30
Points: 0

Hi Greg,

Thanx for the answer. I've already update the component.js for the yahoo autocomplete widget.

My aim in this project is to provide a

containing one, or more, autocomplete fields.
For these fields, i hope a dynamic behavior so they can provide values when users type in the field.

1. i manage to get the dynamic behavior i espect with the "service" property added to the widget. This "service" is a jsp page, and, to be honest, i'd rather prefer using a method from my bean than this servlet.
Is it possible to do so? Is it possible to call this method from TypeHelpBean?

[code]
public void givenNameService(FacesContext context, AjaxResult result) {
HttpServletRequest request =
(HttpServletRequest)context.getExternalContext().getRequest();
// get the command
String command = request.getParameter("cmd");
System.out.println("Command : "+command);

result.setResponseType(AjaxResult.JSON);
if ("setValue".equals(command)) {
String value = request.getParameter("value");
setGiven_name(value);
result.append("[message:'success']");
} else {
result.append("[");
for (int loop=0; loop < given_names.length; loop++){
result.append("[\"" + given_names[loop] + "\" ]");
if (loop < given_names.length -1) result.append(",");
}
result.append("]");
}
}
[/code]

2. If i use the publish/subscribe, why nothing is call when i press a key? I espected so...
for example, if a use this widget :

[code]
id="yahooAutocomp"
publish="/autocomp/getValues"
value="${TypeHelpBean.given_name}"
/>
[/code]

well, i espect this subscriber from glue.js will be triggered on all events (onselect, onClick, onChange, onKeyUp, etc...)

[code]
jmaki.subscribe("/autocomp/getValues/*", function(args){
jmaki.log("/autocomp/ : request from: " + args.widgetId);
var message = args.value;
jmaki.log("Message : "+message);
jmaki.log("webroot : "+jmaki.webRoot);

jmaki.doAjax({

method: "POST",
url: jmaki.webRoot+"/faces/TypeHelpBean-givenNameService.ajax",

content: {cmd: 'query', value: message},
callback:function(req){
jmaki.log("returned response is = " + req.responseText);
var resText = req.responseText;
var res = eval(resText);
jmaki.log("final result = " + res);
jmaki.publish("/autocomp/setValues", {message: {values:res}});
},

onerror: function (m){
jmaki.log("Error setting filter value.");

}
});

});
[/code]

...but only the onSelect triggers this subscriber.

3. is it possible to use both pubish/subscribe and service properties to make things work? because when i use a "service", onSlect events are not triggered...

4. At last, when a value is selected from the autocomplete list, is there a simple way to submit then?

for example, when i do this :

[u]from my index.jsp :[/u]
[code]

id="yahooAutocomp"
args="{completionMethod : 'server'}"
service="test.jsp"
/>

[/code]

[u]from my form.jsp :[/u]
[code]

<%=request%>

[/code]

[u]the result :[/u]
[code]
uri: /WebApplication2/form.jsp
method: POST
QueryString: null
Parameters:
Name: submit Value: envoyer
Headers:
Name: host Value: localhost:8084
Name: user-agent Value: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
Name: accept Value: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Name: accept-language Value: fr,en;q=0.8,fr-fr;q=0.6,en-us;q=0.4,ja;q=0.2
Name: accept-encoding Value: gzip,deflate
Name: accept-charset Value: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Name: keep-alive Value: 300
Name: connection Value: keep-alive
Name: referer Value: http://localhost:8084/WebApplication2/index.jsp
Name: cookie Value: JSESSIONID=E389FC4D25610E806BB488856BAD5B4E; UAID=lcq8ojUNGMU1rQdH7vFnfFZwQzf9XPK
Name: content-type Value: application/x-www-form-urlencoded
Name: content-length Value: 14
[/code]

This is what i hope Greg. I'm deeply sorry for the "novel" i've written here, but i wanted to be the more accurate as i can to explain my problems.

Thanx again for the answer Greg.

--
Jonathan