1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Calling page inside <div>

Discussion in 'JavaScript and AJAX' started by ShahzadMughal, Dec 29, 2010.

  1. ShahzadMughal

    ShahzadMughal New Member

    Joined:
    Nov 7, 2008
    Messages:
    9
    Likes Received:
    0
    Trophy Points:
    0
    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>
    
     
  2. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    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;
     
  3. pein87

    pein87 New Member

    Joined:
    Aug 6, 2010
    Messages:
    173
    Likes Received:
    47
    Trophy Points:
    0
    Occupation:
    Web Dev
    Location:
    Limbo
    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.
     

Share This Page