Press "Enter" to skip to content

Tag: dom

Dojo Javascript: Changing a FilteringSelect SELECT menu when another changes

February 17, 2009
Comments closed

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!

Javascript: innerHTML, Select menu and Internet Explorer

February 12, 2009
Comments closed

I’ve just had cause to pull in the contents of a SELECT menu using Javascript to help build up a webpage on the fly using the DOM. I had to do it this was a there were potentially 4,000 items for a select html menu (and so the user had to narrow it down by pre-selecting another menu) and then pulling the list of items from the server. The were also some optgroups in there (making using JSON or XML that bit harder) and there could, potentially, be some formatting information. Oh – and there could be 1 or 100 of these menus on the webpage.

The way I initally worked it, and which worked in Firefox, was to use:
document.getElementById(‘menuname’).innerHTML=fetchedHTML;
(menuname being the id of the Domscripting gave me a clue and I eventually finished up with:
document.getElementById(‘menuname’).parentNode.innerHTML = ‘‘;
(i.e. recreating the entire select menu from scratch). It’s not nice, but it works!