Calling a page inside div tag, contents of the page appear but not functioning.
for testing I have only a text field and a button and calling a javascript function fetchData which sends id through url parameters to jsp page and in response (using AJAX logic) that page sends data back which should be appear inside another div tag please see the following code and suggest me what is wrong with it
home page
Code:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" >
function toggle() {
if(document.getElementById("div2_0").innerHTML == "Log in") {
if(document.getElementById("div5").style.display == "none") {
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "block";
document.getElementById("div5").style.display = "block";
}
else{
document.getElementById("div3").style.display = "block";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
document.getElementById("div6").innerHTML="";
}
}
else{
document.getElementById("div1").innerHTML= "";
document.getElementById("div2_0").innerHTML = "Log in";
}
}
function loginMe(unameVal, ucodeVal){
xmlHttp=GetXmlHttpObject();
var url="validateUser.jsp"
url=url+"?myName="+unameVal+"&myCode="+ucodeVal
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
var showdata = xmlHttp.responseText;
showdata = showdata.substr(showdata.lastIndexOf(":")+1,showdata.length);
var trimmed = showdata.trim();
if (trimmed=="Success"){
document.getElementById("div1").style.display="block";
document.getElementById("div1").innerHTML="Welcome <font style='font-style: italic'>" + document.getElementById("uname").value + "</font>";
document.getElementById("div2_0").innerHTML="Log out";
document.getElementById("div3").style.display = "block";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
document.getElementById("div6").style.display = "none";
document.getElementById("uname").value = "";
document.getElementById("ucode").value = "";
}
else{
document.getElementById("div6").style.display = "block";
document.getElementById("div6").innerHTML="Invalid username or password...";
document.getElementById("uname").value = "";
document.getElementById("ucode").value = "";
}
}
}
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
function loadNewPage(temp) {
var req = GetXmlHttpObject();
document.getElementById("div7").style.display = "block";
req.open("GET", temp, false);
req.send(null);
var page = req.responseText;
document.getElementById("div7").innerHTML = page;
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<div id="div0" align="center">
<table id="tbl0" border="0" width="800" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="right">
<div id="div1" style="display: none; background-color: yellowgreen"></div>
</td>
</tr>
<tr>
<td align="left" style="background-color: yellowgreen;">
<div>
<span>
Home |
</span>
<span>
<a id="lnkPage1" href="" onclick="loadNewPage('page1.jsp'); return false;">Page 1</a>|
</span>
<span>
<a id="lnkPage2" href="" onclick="loadNewPage('page2.jsp'); return false;">Page 2</a>|
</span>
<span>
<a id="lnkPage3" href="" onclick="loadNewPage('page3.jsp'); return false;">Page 3</a>|
</span>
<span>
<a id="lnkPage4" href="" onclick="loadNewPage('page4.jsp'); return false;">Page 4</a>|
</span>
<span>
Page 5 |
</span>
</div>
</td>
<td colspan="2" align="right">
<div id="div2" style="display: block; background-color: yellowgreen">
<a id="div2_0" href="javascript:toggle();" >Log in</a>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div id="div3" style="display: block; background-color: burlywood">
<img alt="login" src="images/PAK362.jpg" width="800" height="650">
</div>
</td>
</tr>
<tr>
<td width="600" style="background-color: burlywood">
<div id="div4" style="display: none;"></div>
</td>
<td>
<table id="tbl2" border="0" width="200" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="div5" style="display: none; background-color: burlywood">
<form id="frmLogin" name="frm_Login">
User Name:<input type="text" id="uname" name="u_name"><br>
User Code:<input type="password" id="ucode" name="u_code"><br>
<input type="button" value="Submit" name="btnLogin" id="btnLogin" onclick="loginMe(frmLogin.uname.value, frmLogin.ucode.value);">
<input type="Button" value="Cancel" name="btnCancel" id="btnCancel" onclick="javascript:toggle();">
<div id="div6" style="display: none; font-size: smaller; color: brown;"></div>
</form>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div id="div7" style="display: none; background-color: burlywood;"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
page4
Code:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" >
function fetchData(myID){
document.getElementById("div11").innerHTML=myID;
}
</script>
</head>
<body>
<div id="div10" style="display: block; background-color: burlywood">
<form id="frmProfile" name="frm_Profile">
Profile ID
<input type="text" id="txtPID" name="txt_PID"><br>
<input type="button" value="Fetch" id="btnFetch" name="btn_Fetch" onclick="fetchData(frmProfile.txtPID.value);">
</form>
</div>
<div id="div11" style="display: block; background-color: burlywood"></div>
</body>
</html>
