Question

I am trying to populate a <select> element via Ajax. It works great in FF, but I get an unknown runtime error in IE.

HTML:

<select id="emp_select" name="emp_select">
    <option value=" ">Please enter a store</option> 
</select>

Javascript:

$("#store").blur(function() {
    populateDropdowns();
});

...

function populateDropdowns() {
        var store = $("#store").val();

        if (store.length != 4) {
            alert("Store # must be 4 digits!");
            $("#store").focus();
            return false;
        }

        var xhrJSON = new XMLHttpRequest();
        var xhrEmpSelect = new XMLHttpRequest();
        var xhrMgrSelect = new XMLHttpRequest();

        var jsonDone = false;
        var empSelectDone = false;
        var mgrSelectDone = false;

        $("#processing-dialog").dialog({
                width: 300,
                height: 150
        });

        xhrJSON.onreadystatechange = function() {
            if (xhrJSON.readyState == 4) {
                if (xhrJSON.status == 200) {
                    var js = document.createElement('script');
                    js.type = 'text/javascript';

                    js.innerHTML = xhrJSON.responseText;
                    var scr = document.getElementsByTagName('script')[1];
                    scr.parentNode.insertBefore(js,scr);

                    jsonDone = true;
                    if (jsonDone && empSelectDone && mgrSelectDone) {
                        $("#processing-dialog").dialog("close");
                        $("#processing-dialog").dialog("destroy");
                        return true;
                    }
                } else {
                    return false;
                }
            }
        }

        xhrEmpSelect.onreadystatechange = function() {
            if (xhrEmpSelect.readyState == 4) {
                if (xhrEmpSelect.status == 200) {
                    $("#emp_select").html(xhrEmpSelect.responseText);
                    empSelectDone = true;
                    if (jsonDone && empSelectDone && mgrSelectDone) {
                        $("#processing-dialog").dialog("close");
                        $("#processing-dialog").dialog("destroy");
                        return true;
                    }
                } else {
                    return false;
                }
            }
        }

        xhrMgrSelect.onreadystatechange = function() {
            if (xhrMgrSelect.readyState == 4) {
                if (xhrMgrSelect.status == 200) {
                    $("#mgr_select").html(xhrMgrSelect.responseText);
                    mgrSelectDone = true;
                    if (jsonDone && empSelectDone && mgrSelectDone) {
                        $("#processing-dialog").dialog("close");
                        $("#processing-dialog").dialog("destroy");
                        return true;
                    }
                } else {
                    return false;
                }
            }
        }

        var url = "ajax.cgi";

        var JSONdata = "action=generateJSON&store=" + store;
        var EmpSelectData = "action=generateEmpSelect&store=" + store;
        var MgrSelectData = "action=generateMgrSelect&store=" + store;

        xhrJSON.open("POST",url);
        xhrJSON.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhrJSON.send(JSONdata);

        xhrEmpSelect.open("POST",url);
        xhrEmpSelect.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhrEmpSelect.send(EmpSelectData);

        xhrMgrSelect.open("POST",url);
        xhrMgrSelect.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhrMgrSelect.send(MgrSelectData);
    }

The blur handler calls a function to populate (all) the different select elements, plus a JavaScript object that holds an associative array of all the employees to match up a name with an employee id that is returned as the values of the options in both select elements.

XHR Text returned (for xhrJSON, content-type=application/json):

var empArray = new Array({ id:"12345678", title:"The Title", code:"C123", name:"John Doe"},...);

XHR Text returned for (xhrEmpSelect, content-type=text/html):

<option value=" ">Select One</option>
<option value="John Doe">John Doe</option>
<option value="Joe Blow">Joe Blow</option>
...
<option value="other">Other...</option>
</select>

Similar text is returned for xhrMgrSelect, content-type=text/html

So in FF everything works great, the JS Object comes across and is inserted into the DOM and both <select> elements are populated as well. BUT in IE, I get an unknown runtime error in the xhrJSON.onreadystatechange handler where I try and set the js.innerHTML to the xhrJSON.responseText.

What am I doing wrong?

Answer 1

Try using js.text = xhrJSON.responseText; instead of innerHTML. I believe the issue you are encountering has to do with the fact that you can’t insert HTML into a <script> block.