I am using jsp with AJAX, 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> I have deleted all that logic even than its not working, 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>
try this cuz im more sure ab8 this may be the onclick - > onClick may work else try below Code: <input type="button" value="Fetch" id="btnFetch" name="btn_Fetch" onClick="fetchData(document.getElementById('txtPID').value);"> and in your logic or wutever the top code you have missed a ';' url=url+"?myName="+unameVal+"&myCode="+ucodeVal; and juz a tip when you use something like a [div] and need to use it in the code do something like ele1 = document.getElementById('div1') so you could call the options easily like ele1.style.wutever = wutever;
You need to use ajax to request that page and have it returned and then have the ajax response text be set as the inner html of that element.
