CODEWITHSUNDEEP
javascriptjqueryinternet-explorerfirefox
daniel0mullins
daniel0mullins

Reputation: 1959

innerHTML for <script> works in FF, not IE

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?

Upvotes: 5

Views: 1284

Answers (3)

Rondel
Rondel

Reputation: 4951

To set the contents of a HTMLScriptElement object, (created using document.createElement('script');) you should use the setText method of the object instead of trying to set the innerHTML of the script. 

js.setText(xhrJSON.responseText);

See the W3 specification from the link above.

Upvotes: 0

pseudosavant
pseudosavant

Reputation: 7234

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.

Upvotes: 5

ShankarSangoli
ShankarSangoli

Reputation: 69905

Since you are setting the script you should use innerText instead of innerHTML. Try this.

js.innerText = xhrJSON.responseText;
//Since FF do not sussport innerText but it does support textContent
js.textContent = xhrJSON.responseText;

I would advice you to migrate your code to jQuery which will be much simpler, readable, and easy to maintain without any worries of cross browser support. jQuery does everything for you.

Upvotes: 0

Related Questions