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>
You don’t have an element with an id of
dgpids.I think you meant to give the select an id but I’m not sure a select would allow
innerHTML. You may be better wrapping the select in adivand updating your server code to return the full select html which can be inserted into the div.Something like in this jsfiddle.
Hope this helps.