innerHTML cho <script> hoạt động trong FF, không phải IE

Question

Tôi đang cố gắng điền một phần tử <select> qua Ajax. Nó hoạt động tốt trong FF, nhưng tôi nhận được một unknown runtime error trong 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); 
    } 

Việc xử lý blur gọi một chức năng để cư trú (tất cả) các lựa chọn yếu tố khác nhau, cộng với một đối tượng JavaScript chứa một mảng kết hợp của tất cả các nhân viên để khớp tên với id nhân viên được trả về dưới dạng giá trị của các tùy chọn trong cả hai phần tử select.

XHR chữ trở lại (ví xhrJSON, content-type = application/json):

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

XHR chữ được trả về cho (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> 

Văn bản tương tự được trả lại cho xhrMgrSelect, content-type = text/html

Vì vậy, trong FF mọi thứ hoạt động tốt, đối tượng JS đi qua và được chèn vào DOM và cả hai phần tử <select> dân cư là tốt. NHƯNG trong IE, tôi nhận được unknown runtime error trong trình xử lý xhrJSON.onreadystatechange nơi tôi thử và đặt js.innerHTML thành xhrJSON.responseText.

Tôi đang làm gì sai?

Answer 1

Hãy thử sử dụng js.text = xhrJSON.responseText; thay vì innerHTML. Tôi tin rằng vấn đề bạn đang gặp phải liên quan đến thực tế là bạn không thể chèn HTML vào khối <script>.

Answer 2

Vì bạn đang đặt tập lệnh, bạn nên sử dụng innerText thay vì innerHTML. Thử cái này.

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

Tôi sẽ khuyên bạn nên chuyển mã sang jQuery, đơn giản hơn, dễ đọc và dễ bảo trì hơn mà không phải lo lắng về hỗ trợ trình duyệt chéo. jQuery làm mọi thứ cho bạn.

Answer 3

Để đặt nội dung của đối tượng HTMLScriptElement, (được tạo bằng cách sử dụng document.createElement('script');), bạn nên sử dụng phương thức setText của đối tượng thay vì cố gắng đặt innerHTML của tập lệnh.

js.setText(xhrJSON.responseText); 

Xem đặc điểm W3 từ liên kết ở trên.