Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/forums/javascript/)
-   -   Calling page inside <div> (http://www.go4expert.com/forums/calling-page-inside-div-t24305/)

ShahzadMughal 29Dec2010 12:59

Calling page inside <div>
 
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 10Jan2011 17:10

Re: Calling page inside <div>
 
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 18Jan2011 09:55

Re: Calling page inside <div>
 
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.


All times are GMT +5.5. The time now is 00:38.