Below, I have a java script function (named stateChange) which is expected to update the content of an HTML selection list (Please see the code section marked as HERE below). I have verified that the server returns the new data properly by writing some alert statements (i.e. xmlHttp.onreadystatechange=function() { alert(xmlHttp.responseText); }).
Based on these alert statements in the function, I noticed that the line
document.getElementById("dgpids").innerHTML=xmlHttp.responseText;
is not executed at all, so the page is not updated with the new data from the server.
Can someone tell me what I am missing here in the function stateChange below? Why do you think the page is not updated with new data? Thanks.
<%@page import="java.util.List"%>
<%@page import="com.pm.dao.VirtualConfigTableDAO;" %>
<%@page import="com.pm.entity.VirtualConfigEntity;" %>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DAE PM Counters</title>
<script language="javascript" type="text/javascript">
var xmlHttp
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
**//!!!!!! HERE !!!!!**
//FOLLOWING LINE works
xmlHttp.onreadystatechange=function() { alert(xmlHttp.responseText); }
//I cannot update the list named dgpids below.
//The content of the response text coming from the server is correct.
//But the following line does not update the page. Do you know why???
document.getElementById("dgpids").innerHTML=xmlHttp.responseText;
xmlHttp.onreadystatechange=function() { alert('Got here2!'); }
}
}
function showState(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="dgp.jsp";
url +="?id=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form method="POST" name="me">
<select size="13" name="D1" multiple="no" onChange="checkData()">
<option value="1">CommonCounters(vDaeId)</option>
<option value="2">DgpCommonCounters(dgpId, vDaeId)</option>
<option value="3">SystemCommonCounters()</option>
</select>
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
<br/>
<%
VirtualConfigTableDAO dao = new VirtualConfigTableDAO();
List<VirtualConfigEntity> vList = dao.getEntireVirtualConfigList();
%>
<select size="2" name="D2" multiple="no" onChange="if (this.selectedIndex != -1) showState(this.value);" onclick="showState(this.value);">
<%
for (VirtualConfigEntity entity : vList) {
%>
<option value="<%=String.valueOf(entity.getId())%>"> <%=String.valueOf(entity.getVirtualId())%></option>
<%}%>
</select>
<br/>
<br/>
<select name="dgpids" >
<option value='-1'></option>
</select>
</form>
</body>