Press "Enter" to skip to content

Richy's Random Ramblings

Dojo Javascript: Changing a FilteringSelect SELECT menu when another changes

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!

Techy: Cross Browser Testing

For a while now, I’ve been a great fan of Browser Shots to test websites in Firefox, Internet Explorer, Safari and Opera without having to install all of those web browsers (and previous versions) on my machine. However, it does have a snag: you can only test “static pages”: you can’t interact with the page in anyway (so if you wanted to see if a drop down menu worked well in IE 5.5, you’re out of luck).

However Keyboardface has just blogged about a service I hadn’t heard of before called Cross Browser Testing.com which gives you practically a VNC/remote desktop/LogMeIn style connection to a remote computer (which seem to be Virtual Machine images) which has a selection of browsers installed for you to interactively test on. It’s pretty cheap: there’s a free option, $1 for 5 minutes option (with discounts) or a “pay per month” option. It’ll be worth considering when I’m needing to test the site I’m working on on multi-platform and multi-browser scenerios.

Techy: Test Credit and Debit Card Numbers

I’ve been working on an e-commerce system recently (as you may have been able to guess) and to test the credit card integration side of things, I needed some test credit card details of “valid looking” card numbers…

I eventually managed to gather 102 card numbers which passed validation: i.e. the Bank Identification Number [BIN] / Issuer Identification Number [IIN] numbers [the first 7 digits] matched up with the “alleged” card type and the whole card number passed the Luhn algorithm validation.

I must emphasis, before I get thousands of comments, these are TEST credit card numbers and are NOT VALID (I did not get as far as validating that they were theoretically assigned to a bank: just that they were theoretically assigned to a card issue): they are intended to test code in development to ensure that the code recognises the card type correctly and the Luhn algorithm is correct. You should, therefore, be able to use any expiry date or CCV/CSC you like for testing.

You can download these credit card numbers in a BSD released PHP file to make it easier to test with if you wish.

The developmental test card numbers are after the jump (along with details of the original sources):

Javascript: innerHTML, Select menu and Internet Explorer

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!