Calling page inside <div>

ShahzadMughal's Avatar, Join Date: Nov 2008
Light Poster
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>
ManzZup's Avatar, Join Date: May 2009
Skilled contributor
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;
pein87's Avatar
Ambitious contributor
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.