CODEWITHSUNDEEP
javascriptautocompleteevent-handlingdojo
kanishk
kanishk

Reputation: 743

Connecting a dojo Autocompleter to a javascript function

I am trying to call a java script function when the selected value in a Dojo auto-completer is changed, but I am unable to do so.

Firstly because the standard onchange attribute does not work here, as this is not a standard HTML component.

Secondly I found this documentation ( http://dojotoolkit.org/reference-guide/quickstart/events.html#connecting-to-a-dom-event ) and it is supposed to solve my problem. But somehow I am still not able to connect to a javascript function.

Here is the sample page through which I am trying to test this out.

The JSP: 

<s:form id="form">
    <sd:autocompleter id="try" list="sampleList"/>
</s:form>

The JS File:

dojo.connect(dojo.byId("try"),"onchange", tryAlert);

function tryAlert(){
    alert('successful');
}

I don't know what I have interpreted wrong from the documentation.

Please advise.

Thanks!!

Upvotes: 1

Views: 1347

Answers (2)

kanishk
kanishk

Reputation: 743

Here is what I ended up doing. For those still stuck in a similar situation, this will be helpful.

In the jsp File do this:

<s:form id="form">
    <s:hidden id="chngd"/>
    <sd:autocompleter id="try" list="sampleList" valueNotifyTopics="topic"/>
    ///////////
    //Here you can put more autocompleters if you need them , Like I needed them
    ///////////
</s:form>

In the js file do this:

dojo.event.topic.subscribe("topic", function(){
    dojo.byId('chngd').value='try';// I have set the value of the hidden field to desired value here....
    //whatever more you want to do....
});

//////////
//Here there would be a subscription (similar to above) for each autocompleter you have put in your jsp.
//////////

So what will happen here is that, whenever an autocompleter is changed it will notify or publish a topic for listeners to listen. Now the subscribe function in java script will listen to its respective 'topic' and when that topic is published, the subscribe will execute the javascript function inside it.

This way whenever an autocompleter is changed a respective javascript function is called, thus we have a -- onchange="javascript function" -- kind of effect.

If you still face trouble, ask for help :).

Upvotes: 2

Philippe
Philippe

Reputation: 6828

Ok I guess the struts component for "autocompleter" is dojo's dijit.form.FilteringSelect. You will find its documentation at http://dojotoolkit.org/api. Once there, open the tree and follow the path dijit/form/FilteringSelect, then deploy the "Event summary" header.

You will find the list of extension points (say events...) the widget accepts. The correct one for you is called "onChange" (mind the capital C).

Also, dojo widgets can be found by id through dijit.byId("yourId") - dojo.byId is for regular dom nodes.

So, for using the onChange extension point, you should do :

<s:form id="form">
    <sd:autocompleter id="try" list="sampleList">
        <script type="dojo/method" event="onChange" args="newValue">
            alert('successful');
        </script>
</s:form>

or... if you prefer the javascript way :

dojo.ready(function(){
    dijit.byId("try").onChange = function(newValue) {
        alert("Changed to new value", newValue);
    }
}

Upvotes: 0

Related Questions