innerHTML dla <script> działa w FF, nie IE

Question

Próbuję wypełnić element <select> przez Ajax. Działa świetnie w FF, ale dostaję unknown runtime error w 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); 
    } 

Handler blur wywołuje funkcję do wypełnienia (wszystkie) różne wybierz elementy, a także obiekt JavaScript, który posiada tablicę asocjacyjną wszystkich pracowników, aby dopasować nazwę z identyfikatorem pracownika, który jest zwracany jako wartości opcji w obu elementach: select.

XHR tekstu Text (na xhrJSON, zawartość typu = aplikacji/json)

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

XHR tekstu Text 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> 

Podobny tekst jest zwracany dla xhrMgrSelect, content-type = text/html

Tak więc w FF wszystko działa świetnie, obiekt JS pojawia się i jest wstawiany do DOM, a oba elementy są <select> również zaludnione. ALE w IE dostaję unknown runtime error w handlerku xhrJSON.onreadystatechange, gdzie próbuję ustawić js.innerHTML na xhrJSON.responseText.

Co robię źle?

Answer 1

Spróbuj użyć js.text = xhrJSON.responseText; zamiast innerHTML. Wierzę, że problem, który napotykasz, ma związek z tym, że nie możesz wstawić kodu HTML do bloku <script>.

Answer 2

Skoro ustawiasz skrypt, powinieneś użyć innerText zamiast innerHTML. Spróbuj tego.

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

radziłbym ci migracji kodu jQuery, który będzie znacznie prostsze, czytelne i łatwe do utrzymania bez obawy o wsparcie dla wielu przeglądarek. jQuery robi wszystko za Ciebie.

Answer 3

Aby ustawić zawartość HTMLScriptElement obiektu, (utworzone za pomocą document.createElement('script');) należy użyć metody obiektu setText zamiast próbować ustawić innerHTML skryptu.

js.setText(xhrJSON.responseText); 

Zobacz specyfikację W3 z linku powyżej.