For an Ajax call why innerHTML is not displaying in IE?

Question

I have a very simple Ajax test. On my JSP there are 2 dropdowns: Location and Department. When user change the Location I filter the Department dropdown accordingly using Ajax.

The code works ok with Chrome. But with IE the Department dropdown does not display the data and instead its blank. Very weird.

I have checked the responseText property and it is returning the correct data in both Chrome and IE.

When I select "Head Office" in Location dropdown, the responseText from Ajax is

<option value=""></option><option value="1">Sales</option><option
value="2">Support</option>

and when I select "Regional Office" in Location dropdown, the responseText from Ajax is

<option value=""></option><option value="1">Sales</option>

Yet Chrome display it properly in Department dropdown and IE does not display at all. How come?

This is my code:

I have 2 classes Location and Department:

public class Location implements Serializable {
    private int id;
    private String description;
    public int getId() { return id; }
    public void setId(int id) { this.id = id; }
    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }

    @Override
    public String toString() {
        return "Location [id=" + id + ", description=" + description + "]";
    }
}

public class Department implements Serializable {
    private int id;
    private String description;
    public int getId() { return id; }
    public void setId(int id) { this.id = id; }
    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }

    @Override
    public String toString() {
        return "Department [id=" + id + ", description=" + description + "]";
    }
}

This is my JSP LocationDepartment.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function locationChanged() {
    var newLocation = document.getElementById("select_location").value; 
    var ajaxCallObject = getAjaxCallObject();
    ajaxCallObject.onreadystatechange=function() {
        if (ajaxCallObject.readyState==4) {
            if (ajaxCallObject.status==200) {
                alert("success of ajaxCallObject");
                document.getElementById("select_department").innerHTML = ajaxCallObject.responseText;
            } else {
                alert("failure of ajaxCallObject");
                document.getElementById("select_department").innerHTML = "";
            }
        }
    }

    ajaxCallObject.open("GET", "DepartmentServlet?location=" + newLocation, true);
    ajaxCallObject.send(null);  
}

function getAjaxCallObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('Microsoft.XMLHTTP');
    }
}
</script>
</head>
<body>
<form action="">
<table>
    <tr>
        <td>Location</td>
        <td>
        <select id="select_location" onchange="locationChanged();">
            <option></option>
            <option value="1">Head Office</option>
            <option value="2">Regional Office</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Department</td>
        <td>
        <select id="select_department">
        </select>
        </td>
    </tr>   
</table>
</form>
</body>
</html>

And this is my servlet DepartmentServlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String parmLocation = null;
    Integer locationCode = null;
    List<Department> departmentList = null;
    Department department = null;
    StringBuffer sb = null;


    parmLocation = request.getParameter("location");

    try {
        locationCode = Integer.parseInt(parmLocation);
    } catch (Exception e) {
        locationCode = null;
    }

    // Head Office
    if (locationCode != null && locationCode == 1) {

        departmentList = new ArrayList<Department>();

        department = new Department();
        department.setId(1);
        department.setDescription("Sales");
        departmentList.add(department);

        department = new Department();
        department.setId(2);
        department.setDescription("Support");
        departmentList.add(department);

    // Regional Office
    } else if (locationCode != null && locationCode == 2) {

        departmentList = new ArrayList<Department>();

        department = new Department();
        department.setId(1);
        department.setDescription("Sales");
        departmentList.add(department);

    }

    sb = new StringBuffer();
    sb.append("<option value=\"\"></option>");      
    if (departmentList != null) {
        for (Department departmen : departmentList) {
            sb.append("<option value=\"" + departmen.getId() + "\">");
            sb.append(departmen.getDescription());
            sb.append("</option>");
        }
    }       

    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Pragma", "no-cache");

    PrintWriter out = response.getWriter();
    out.write(sb.toString());
}

Please help. Thanks

See this question. [JavaScript innerHTML is not working for IE?][1] I suggest you use jquery [1]: http://stackoverflow.com/questions/8999998/javascript-innerhtml-is-not-working-for-ie — Leonardo Neninger, Apr 01 '15 at 22:47
http://stackoverflow.com/questions/8557619/adding-option-elements-using-innerhtml-in-ie — epascarello, Apr 01 '15 at 23:02
@LeonardoNeninger the answer in your link is not working for me. After the `alert("success of ajaxCallObject");` this is what I tried: `var newdiv = document.createElement("div"); newdiv.innerHTML = ajaxCallObject.responseText; var departmentElement = document.getElementById("select_department"); departmentElement.appendChild(newdiv);` It is not working now in both IE and Chrome. — ChumboChappati, Apr 02 '15 at 14:18

score 0 · Answer 1 · answered Apr 03 '15 at 04:56

Sorry I late. Test this code. Let me know if work for you.

setTimeout(function(){
alert($('select').html());
$('select').html('<option>Value</option>');
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
    <option>Original</option>
</select>

For an Ajax call why innerHTML is not displaying in IE?

1 Answers1