Ajax multiple drop down list

Question

I have 5 drop down lists which is dynamic in nature. But the only problem is all the option values are being fetched from mysql database and i really want the user to know that the query is happening at the backend and he should wait by displaying a gif or a line saying "loading.. " . I've been looking all over for this and similar questions have been posted by others but i don't seem to get it working . Please help me out. Can somebody please give a easy solution?

Thanks.

Answer 1

I've placed an example here:

http://jsfiddle.net/cMEaM/embedded/result/

I've kept as much of the existing code the same so you should still recognise it. The getXMLHTTP function is the same:

function getXMLHTTP() {
    //function to return the xml http object
    var xmlhttp = false;

    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e1) {
                xmlhttp = false;
            }
        }
    }

    return xmlhttp;
}

There's a new sendGet function to handle the XHR request, which takes success and error callbacks.

function sendGet(url, onSuccess, onError) {
    var req = getXMLHTTP();
    var method = "GET";

    if (req) {
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {
                    onSuccess(req);
                } else {
                    onError(req);
                }
            }
        }
        req.open(method, url, true);
        req.send(data);
    }
}

I borrow a throbber from Wikipedia to display when the data is loading.

var throbberHtml = "<img src='http://upload.wikimedia.org/wikipedia/en/2/29/Throbber-Loadinfo-292929-ffffff.gif'>";

And these are the new getXXX functions which replace the <select> with the throbber while the data is loading:

function getState(countryId) {
    var div = document.getElementById('statediv');
    var oldInnerHTML = div.innerHTML;

    var onSuccess = function(req) {
        div.innerHTML = req.responseText;
    };
    var onError = function(req) {
        div.innerHTML = oldInnerHTML;
        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    };

    div.innerHTML = throbberHtml;
    sendGet("findState.php?country=" + countryId, onSuccess, onError);
}

function getCity(countryId, stateId) {
    var div = document.getElementById('citydiv');
    var oldInnerHTML = div.innerHTML;

    var onSuccess = function(req) {
        div.innerHTML = req.responseText;
    };
    var onError = function(req) {
        div.innerHTML = oldInnerHTML;
        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    };

    div.innerHTML = throbberHtml;
    sendGet("findCity.php?country=" + countryId + "&state=" + stateId,
            onSuccess, onError);
}

There are other improvements that could be made, but I tried to keep in the sprit of your existing code as much as possible.

Eg you can see that most of code in the getXXX functions is the same, so you could refactor these to use mostly the same code. Also, using a JS framework such as jQuery will replace the XHR code with better, more cross-browser compatible code. It's usually always better to avoid reinventing the wheel when it comes to code!

And you may possibly decide that sending the HTML for a <select> tag is not the best data format for the XHR. You might go with JSON which would decouple your presentation from the data.