Dojo FilteringSelect Only Fires OnChange Event Once

Question

I have a dojo.form.FilteringSelect widget in a dojo.Dialog that is create programmatically. I connected an onChange event to the FilteringSelect which works as expected the first time I select and entry in the FilteringSelect. Any subsequent times I select something new, the onChange event does not fire.

I have tried declaring the onChange property when providing parameters to my new FilteringSelect statement. I've tried using dojo.connect. I've tried mySelectDijit.on. All have the same effect.

var select = new dijit.form.FilteringSelect({
    id : "fields-select-" + expNum,
    store : store,
    required : false,
    intermediateChanges : true
}, fieldinput);

dojo.connect(select, 'onChange', LoadOperatorValue);

How do I get the onChange event to fire every time the FilteringSelect changes?

UPDATE:

I've added the relevant code. This code is based on the ArcGIS Javascript API v3.3, which includes Dojo.

dojo.require("dijit.Dialog");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.store.Memory");
dojo.require("dijit.form.MultiSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.DateTextBox");

var expNum = 1;
var queryDiv;
var layer;
var dialog;

function CreateDialog(lyr) {

    layer = lyr;

    queryDiv = dojo.create("div", {
        id : "queryDiv"
    });

    var buttonInput = dojo.create("button", {
        id : "button"
    }, queryDiv);

    var button = new dijit.form.Button({
        id : "addExpression",
        label : "Add Expression",
        onClick : function() {
            BuildExpression(layer);
        }
    }, buttonInput);

    BuildExpression(layer)

    dialog = new dijit.Dialog({
        title : "Query: " + layer.layerObject.name,
        content : queryDiv,
        style : "width: 600px"
    });

    dialog.show();
}

function BuildExpression(layer) {

    var expDiv = dojo.create("div", {
        class : "expression",
        id : "expression-" + expNum
    }, queryDiv);

    var filterDiv = dojo.create("div", {
        class : "filter",
        id : "filter-" + expNum
    }, expDiv);

    var fieldSpan = dojo.create("span", {
        id : "field-" + expNum,
        class : "field"
    }, filterDiv);

    var operatorSpan = dojo.create("span", {
        id : "operator-" + expNum,
        class : "operator"
    }, filterDiv);

    var valueSpan = dojo.create("span", {
        id : "value-" + expNum,
        class : "value"
    }, filterDiv);

    var removeSpan = dojo.create("span", {
        id : "remove-" + expNum,
        class : "remove"
    }, filterDiv);

    var removeInput = dojo.create("button", {
        id : "button"
    }, removeSpan);

    var removeButton = new dijit.form.Button({
        id : "removeExpression" + expNum,
        label : "Remove",
        onClick : function() {
            dojo.destroy(expDiv);
        }
    }, removeInput);

    var fieldinput = dojo.create("input", {
        id : "field-input-" + expNum
    }, fieldSpan);

    var fields = [];
    dojo.forEach(layer.layerObject.fields, function(field, index) {
        if (index < layer.layerObject.infoTemplate.info.fieldInfos.length && layer.layerObject.infoTemplate.info.fieldInfos[index].visible == true) {
            field.operatorSpan = operatorSpan;
            field.valueSpan = valueSpan;
            fields.push({
                name : field.alias,
                id : field
            });
        }
    });

    var store = new dojo.store.Memory({
        data : fields
    });

    var select = new dijit.form.FilteringSelect({
        id : "fields-select-" + expNum,
        store : store,
        required : false,
        intermediateChanges : true
    }, fieldinput);

    dojo.connect(select, 'onChange', LoadOperatorValue);
    expNum++
}

function LoadOperatorValue(field) { debugger;
    dojo.empty(field.operatorSpan);
    dojo.empty(field.valueSpan);

    if ("domain" in field && "codedValues" in field.domain) {

        field.operatorSpan.innerHTML = "IS";

        var sel = dojo.create("select", {
            id : "multiselect-" + expNum
        }, field.valueSpan);

        dojo.forEach(field.domain.codedValues, function(cv, index) {
            dojo.create("option", {
                innerHTML : cv.name,
                value : cv.code
            }, sel);
        });

        var multiselect = new dijit.form.MultiSelect({}, sel);

    } else if (field.type == "esriFieldTypeString") {

        var operatorInput = dojo.create("input", {
            id : "operator-input"
        }, field.operatorSpan);

        var operators = [{
            name : "IS",
            id : " = "
        }, {
            name : "IS NOT",
            id : " <> "
        }, {
            name : "LIKE",
            id : " LIKE "
        }, {
            name : "NOT LIKE",
            id : " NOT LIKE "
        }];

        var opStore = new dojo.store.Memory({
            data : operators
        });

        var select = new dijit.form.FilteringSelect({
            id : "operator-select-" + expNum,
            store : opStore,
            required : false
        }, operatorInput);

        var valueInput = dojo.create("input", {
            id : "value-input"
        }, field.valueSpan);

        if (field.length < 50) {
            var textBox = new dijit.form.TextBox({
                id : "value-input-" + expNum
            }, valueInput);
        } else {
            var textBox = new dijit.form.Textarea({
                id : "value-input-" + expNum
            }, valueInput);
        }

    } else if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle" || field.type == "esriFieldTypeInteger" || field.type == "esriFieldTypeSmallInteger") {

        var operatorInput = dojo.create("input", {
            id : "operator-input"
        }, field.operatorSpan);

        var operators = [{
            name : "=",
            id : " = "
        }, {
            name : "!=",
            id : " <> "
        }, {
            name : "<",
            id : " < "
        }, {
            name : "<=",
            id : " <= "
        }, {
            name : ">",
            id : " > "
        }, {
            name : ">=",
            id : " >= "
        }];

        var opStore = new dojo.store.Memory({
            data : operators
        });

        var select = new dijit.form.FilteringSelect({
            id : "operator-select-" + expNum,
            store : opStore,
            required : false
        }, operatorInput);

        var valueInput = dojo.create("input", {
            id : "value-input"
        }, field.valueSpan);

        var constraints = {};

        if ("domain" in field && "range" in field.domain) {
            constraints.min = field.domain.range.min;
            constraints.max = field.domain.range.max;
        }

        if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle") {
            constraints.places = 2;
        }

        var numberSpinner = new dijit.form.NumberSpinner({
            id : "value-input-" + expNum
        }, valueInput);

    } else if (field.type == "esriFieldTypeDate") {

        var operatorInput = dojo.create("input", {
            id : "operator-input"
        }, field.operatorSpan);

        var operators = [{
            name : "IS",
            id : " = "
        }, {
            name : "IS NOT",
            id : " <> "
        }, {
            name : "Before",
            id : " < "
        }, {
            name : "Before or IS",
            id : " <= "
        }, {
            name : "After",
            id : " > "
        }, {
            name : "After or IS",
            id : " >= "
        }];

        var opStore = new dojo.store.Memory({
            data : operators
        });

        var select = new dijit.form.FilteringSelect({
            id : "operator-select-" + expNum,
            store : opStore,
            required : false
        }, operatorInput);

        var valueInput = dojo.create("input", {
            id : "value-input"
        }, field.valueSpan);

        var dateTextBox = new dijit.form.DateTextBox({
            id : "value-input-" + expNum
        }, valueInput);

    } else {

    }
}

Answer 1

Well when I've created these types of widgets in the past, I've done it as follows, its almost the same as yours, but notice the on change handler...

var select = new dijit.form.FilteringSelect({
    id : "fields-select-" + expNum,
    store : store,
    required : false,
    onChange: function(value){
        //do something here
    }
}, fieldinput);

UPDATE: From re-reading your post I can see that you have tried this method already, I just thought I'd leave it in the answer for reference as it has worked for me in the past.

UPDATE

Regarding dojo 1.8, it may be worth considering using dojo's templated widgets to help remove a lot of the programmatic created elements in your javascript. Also worth going through some of the other dojo tutorials such as the getting selective with dijit, custom widgets and defining modules tutorials, they will really help you make the most out of dojo widgets. The "getting selective" one has the filtering select widget in it.

Its difficult to tell why your onChange event is only being dispatched once. All I can really say is for you to completely simplify everything where you just have the filtered select widget, and make sure you can catch the onChange event more than once in isolation. Then start to integrate the rest of your code back in.

Sorry I couldn't give you anything exact as an answer, I'll keep looking.

UPDATE

Ok I've just taken your code and got it running in a test environment using dojo 1.8, I had to strip out the layer object, replacing it with a simple array, but it seems to work ok. I also changed the code into a module using define (explained in the modules tutorial). Here is the code...

define(["dijit/Dialog",
        "dijit/form/FilteringSelect",
        "dojo/store/Memory",
        "dijit/form/MultiSelect",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dijit/form/NumberSpinner",
        "dijit/form/DateTextBox"],

    function (){

        var expNum = 1;
        var queryDiv;
        var layer;
        var dialog;

        function BuildExpression(layer) {

            var expDiv = dojo.create("div", {
                class : "expression",
                id : "expression-" + expNum
            }, queryDiv);

            var filterDiv = dojo.create("div", {
                class : "filter",
                id : "filter-" + expNum
            }, expDiv);

            var fieldSpan = dojo.create("span", {
                id : "field-" + expNum,
                class : "field"
            }, filterDiv);

            var operatorSpan = dojo.create("span", {
                id : "operator-" + expNum,
                class : "operator"
            }, filterDiv);

            var valueSpan = dojo.create("span", {
                id : "value-" + expNum,
                class : "value"
            }, filterDiv);

            var removeSpan = dojo.create("span", {
                id : "remove-" + expNum,
                class : "remove"
            }, filterDiv);

            var removeInput = dojo.create("button", {
                id : "button"
            }, removeSpan);

            var removeButton = new dijit.form.Button({
                id : "removeExpression" + expNum,
                label : "Remove",
                onClick : function() {
                    dojo.destroy(expDiv);
                }
            }, removeInput);

            var fieldinput = dojo.create("input", {
                id : "field-input-" + expNum
            }, fieldSpan);

            var fields = [{"name":"value1", "id":"v1"}, {"name":"value2", "id":"v2"}];
            //dojo.forEach(layer.layerObject.fields, function(field, index) {
            //    if (index < layer.layerObject.infoTemplate.info.fieldInfos.length && layer.layerObject.infoTemplate.info.fieldInfos[index].visible == true) {
            //        field.operatorSpan = operatorSpan;
            //        field.valueSpan = valueSpan;
            //        fields.push({
            //            name : field.alias,
            //            id : field
            //        });
            //    }
           // });

            var store = new dojo.store.Memory({
                data : fields
            });

            var select = new dijit.form.FilteringSelect({
                id : "fields-select-" + expNum,
                store : store,
                required : false,
                intermediateChanges : true
            }, fieldinput);

            dojo.connect(select, 'onChange', function(value){console.log(value)});
            expNum++
        }

        function LoadOperatorValue(field) { debugger;
            dojo.empty(field.operatorSpan);
            dojo.empty(field.valueSpan);

            if ("domain" in field && "codedValues" in field.domain) {

                field.operatorSpan.innerHTML = "IS";

                var sel = dojo.create("select", {
                    id : "multiselect-" + expNum
                }, field.valueSpan);

                dojo.forEach(field.domain.codedValues, function(cv, index) {
                    dojo.create("option", {
                        innerHTML : cv.name,
                        value : cv.code
                    }, sel);
                });

                var multiselect = new dijit.form.MultiSelect({}, sel);

            } else if (field.type == "esriFieldTypeString") {

                var operatorInput = dojo.create("input", {
                    id : "operator-input"
                }, field.operatorSpan);

                var operators = [{
                    name : "IS",
                    id : " = "
                }, {
                    name : "IS NOT",
                    id : " <> "
                }, {
                    name : "LIKE",
                    id : " LIKE "
                }, {
                    name : "NOT LIKE",
                    id : " NOT LIKE "
                }];

                var opStore = new dojo.store.Memory({
                    data : operators
                });

                var select = new dijit.form.FilteringSelect({
                    id : "operator-select-" + expNum,
                    store : opStore,
                    required : false
                }, operatorInput);

                var valueInput = dojo.create("input", {
                    id : "value-input"
                }, field.valueSpan);

                if (field.length < 50) {
                    var textBox = new dijit.form.TextBox({
                        id : "value-input-" + expNum
                    }, valueInput);
                } else {
                    var textBox = new dijit.form.Textarea({
                        id : "value-input-" + expNum
                    }, valueInput);
                }

            } else if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle" || field.type == "esriFieldTypeInteger" || field.type == "esriFieldTypeSmallInteger") {

                var operatorInput = dojo.create("input", {
                    id : "operator-input"
                }, field.operatorSpan);

                var operators = [{
                    name : "=",
                    id : " = "
                }, {
                    name : "!=",
                    id : " <> "
                }, {
                    name : "<",
                    id : " < "
                }, {
                    name : "<=",
                    id : " <= "
                }, {
                    name : ">",
                    id : " > "
                }, {
                    name : ">=",
                    id : " >= "
                }];

                var opStore = new dojo.store.Memory({
                    data : operators
                });

                var select = new dijit.form.FilteringSelect({
                    id : "operator-select-" + expNum,
                    store : opStore,
                    required : false
                }, operatorInput);

                var valueInput = dojo.create("input", {
                    id : "value-input"
                }, field.valueSpan);

                var constraints = {};

                if ("domain" in field && "range" in field.domain) {
                    constraints.min = field.domain.range.min;
                    constraints.max = field.domain.range.max;
                }

                if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle") {
                    constraints.places = 2;
                }

                var numberSpinner = new dijit.form.NumberSpinner({
                    id : "value-input-" + expNum
                }, valueInput);

            } else if (field.type == "esriFieldTypeDate") {

                var operatorInput = dojo.create("input", {
                    id : "operator-input"
                }, field.operatorSpan);

                var operators = [{
                    name : "IS",
                    id : " = "
                }, {
                    name : "IS NOT",
                    id : " <> "
                }, {
                    name : "Before",
                    id : " < "
                }, {
                    name : "Before or IS",
                    id : " <= "
                }, {
                    name : "After",
                    id : " > "
                }, {
                    name : "After or IS",
                    id : " >= "
                }];

                var opStore = new dojo.store.Memory({
                    data : operators
                });

                var select = new dijit.form.FilteringSelect({
                    id : "operator-select-" + expNum,
                    store : opStore,
                    required : false
                }, operatorInput);

                var valueInput = dojo.create("input", {
                    id : "value-input"
                }, field.valueSpan);

                var dateTextBox = new dijit.form.DateTextBox({
                    id : "value-input-" + expNum
                }, valueInput);

            } else {

            }
        }

        return {
            CreateDialog: function(lyr) {

                layer = lyr;

                queryDiv = dojo.create("div", {
                    id : "queryDiv"
                });

                var buttonInput = dojo.create("button", {
                    id : "button"
                }, queryDiv);

                var button = new dijit.form.Button({
                    id : "addExpression",
                    label : "Add Expression",
                    onClick : function() {
                        BuildExpression(layer);
                    }
                }, buttonInput);

                BuildExpression(layer)

                dialog = new dijit.Dialog({
                    title : "Query: ",// + layer.layerObject.name,
                    content : queryDiv,
                    style : "width: 600px"
                });

                dialog.show();
            }
        }
    }
)

Then I tested it by requiring the module in an simple html file, and calling the CreateDialog function...

require(
    ["dojo/parser",
     "tb/testModule",
     "dojo/domReady!"],

    function(parser, testModule){               
        parser.parse();
        //test module
        testModule.CreateDialog({});
    }
)

NOTE: the package "tb/testModule" uses tb because that's how I have the package name set up in my dojo config.

If you start typing in the filtered select box, as soon as you get an auto-complete on either of the 2 values in the array, you should see the equivalent value logged in the console.

Here is a screen shot of what I get, you can see that I first logged value1's id, then value2's id...

If you aren't getting the 2nd event, it must be getting lost somewhere. I was wondering if the variable scope was going to effect things, but I didn't have to change any of their scope. I just moved the main function into the return block of the module.