Day: 17 February 2009

Here’s a bit of Dojo Javascript which will allow you to dynamically change a SELECT sub menu (technically a “FilteringSelect” menu with an id of “secondFilteringSelectId”) when the first SELECT menu is changed (another FilteringSelect menu with an id of “firstFilteringSelectId”). It uses the Dojo’s ItemFileReadStore method to fetch an ajax page (called ajax) before populating the menu. It also has some caching built in to reduce the number of calls to the server and associated network traffic.

dojo.require("dojo.data.ItemFileReadStore");
aSecondFilteringCache=Array();
dojo.addOnLoad(function() {
    dijit.byId('firstFilteringSelectId').onChange=function() {
        fFirstFilteringSelectIdChanged(dijit.byId('firstFilteringSelectId').value);
    }
    fFirstFilteringSelectIdChanged('defaultSetting');
});
function fFirstFilteringSelectIdChanged(thisValue) {
    secondSelect=dijit.byId('secondFilteringSelectId');
    if (aSecondFilteringCache[thisValue]==undefined) {
        var myStore=new dojo.data.ItemFileReadStore({url:'ajax?setting='+thisValue});
        var gotList = function(items, request) {
            aSecondFilteringCache[thisValue]=myStore;
            secondSelect.store=myStore;
            secondSelect.setValue(items[0].id);
        }
        var gotErrors=function(error,request) {
            alert('Request failed:'+error);
        }
        var request=myStore.fetch({onComplete:gotList,onError:gotErrors});
    } else {
        secondSelect.store=aEducationsCached[thisValue];
        secondSelect.setValue(secondSelect.store._arrayOfAllItems[0].id);
    }
}

I am just learning Dojo though, so there could be a much better/sensible way of doing this: let me know if you know/find it!