Question

I have a page with 7 dijit FilteringSelect widgets that I want to connect to stores fetched from the server if the user clicks on the widget or the widget otherwise gains focus. I want the event to fire one time.

If I add onfocus=”loadDropDown(this)” to my markup, it executes every time the widget gains focus, as you would expect.

I’m trying to use dojo to fire the event one time using on.once(). The function to use dojo event handling is running but the event handler function never gets called when a widget gains focus.

Any pointers?

This is my markup

<select data-dojo-type="dijit.form.FilteringSelect"
                        type="text" intermediateChanges="false"
                        data-dojo-props="required:false, pageSize:20, placeholder: '---'"
                        scrollOnFocus="true" name="CJ1lxA" style="width: 40em;"
                        id="searchAgency">
                    </select>

This is to regester the events

function registerDDLoad(){
require(["dojo/on", "dijit", "dojo/ready"], function(on, dijit, ready){
    ready(function(){
        var dropDown = dijit.byId("searchAgency");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
        dropDown = dijit.byId("searchLocation");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
        dropDown = dijit.byId("searchCounty");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
        dropDown = dijit.byId("searchRep");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
        dropDown = dijit.byId("searchSenate");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
        dropDown = dijit.byId("searchStatus");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
        dropDown = dijit.byId("searchAE");
        on.once(dropDown, "onfocus", function() {
            loadDropDown(dropDown);
        });
    });
});
}

registerDDLoad();

Answer 1

The dojo event class, dojo/on expects events to be specified without the ‘on’:

onFocus = focus
onClick = click
onMouseOut = mouseout
...

I think changing that should fix your problem. I’ve copied your code into test area on jsFiddle, so you can play around with it.

NB: Since you are re-using the dropdown variable, it will always equal the last filteringSelect (id=searchAE) and never the earlier ones.