Updating Dojo Dijit FilteringSelect's store with asynchonous data

Question

I'm using Zend + Dojo form in an intranet context. We need to update a list of counties when the selected state is changed on a form. With HTML you would just parse the json response (or just provide a html fragment of options) and update the innerhtml of the select. However, doing so in Dojo has proved to be prohibitively complex.

In short, I have defined a generic method that allows you to set an onBlur update to a form field. This links to a Controller action that calls the database with a function arguments, and gets back either a singleton response (which we handle okay already) or a list response. If we get back a list, we need to alter the options in a select with that list.

All of this works fine so far; we get a valid json reponse with a nice list in response.data. Here's where the problem is. How can I simply update the existing store (examination reveals it is a _comboBoxDataStore)? I cannot declare the select with a different kind of store, since it is auto-generated.

Is there any way to brute force a swap of stores? The main key is that whatever I do it has to work in Internet Explorer; My use of Firefox is only to allow better insight into the objects I'm working with.

As a side question, does anyone know why _comboBoxDataStore cannot be updated? Other frameworks allow for pretty seamless updating of stores, like for instance, extJS. Is there any reasoning behind designing a limitation into the combobox so it cannot be updated, which is a step down from raw HTML? Or am I missing the obvious solution that doesn't involve juggling a list of esoteric objects?

Answer 1

Based on post of RiverC my method for updating the combo works fine like this:

, updateData : function(data) {
    var storeData = {data: data, id:'attrFilterStore'};
    var newStore = new dojo.data.ItemFileWriteStore({data: data});
    this.element.store = newStore;
    this.element.startup();
}

Where " this.element " is a reference to the FilteringSelect object.
The method " updateData " is a callback function from an ajax request which receives JSON with the structure RiverC posted.

Answer 2

You can even use options..

var fldSelect = dijit.byId("fieldSelect");
fldSelect.options = fldoptions;
fldSelect.startup();

Where fldoptions is the new data, which needs to be populated. Keep in mind: DON'T FORGET TO CALL fldSelect.startup() , else the data will not get updated.

Answer 3

As it so happens, this IS possible, though no tutorial I have seen shows how easy it actually is.

Make sure this is somewhere:

dojo.require("dojo.data.ItemFileWriteStore");

Then, regardless of how your filteringSelect came into being you can do the following:

newStore = new dojo.data.ItemFileWriteStore({
    data:{
         identifier: 'id',
         label: 'name',
         items: response.data
    }
});

filteringSelect.store = newStore;
filteringSelect.startup();

Answer 4

If you have control on the creation of the _comboBoxDataStore, you can set the clearOnClose to true on that store. You can then close that store and set the url or data attribute to your new data (note that using data attribute after clearOnClose is supported only with dojo 1.4 and later). THis will automatically update the select/combobx widget with the new data

for an example, see: http://soularis999.blogspot.com/2011/03/reloading-dojodataitemfilereadstore.html

If you are unable to set the clearOnClose (due to the Zend framework owning it without option to modify that behavior), you can create a new datastore and set the combobox's datastore to the newly created datastore. dijit filteringselect and combobox provides a store attribute that you can modify.

As an altogether different approach, you may want to explore using the "query" attribute of the dojo filtering widgets for such usecases - they are very helpful and reduce the amount of code and management you need to do.

See the url below for an example of how the state is changed based on country selection by modifying the query filter of the filteringselect http://livedocs.dojotoolkit.org/dijit/form/FilteringSelect

Also, from your usecase description, it sounds like dijit filteringSelect might be a better choice of widget than the combobox (since it is a list of counties, do you want user to be able to enter any county not present in the list)?