Skip to main content

How To Open A open a div with content from another page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicContent.aspx.cs" Inherits="DynamicContent" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">

   <script type="text/javascript">
function getXMLObj() {
     req = false;
     if(window.XMLHttpRequest) {
           try {
             req = new XMLHttpRequest();
           } catch(e) {
             req = false;
           }
     } else if(window.ActiveXObject) {
       try {
             req = new ActiveXObject("Msxml2.XMLHTTP");
           } catch(e) {
                 try {
                   req = new ActiveXObject("Microsoft.XMLHTTP");
                 } catch(e) {
                       req = false;
                 }
       }
     }
     return req;
}

function getPage(url, cntID) {
 var xmlhttp = getXMLObj();
 var elem = document.getElementById(cntID);
 if (xmlhttp) {
   xmlhttp.open("GET",url,true);
   xmlhttp.onreadystatechange=function() {
       if(xmlhttp.readyState==1)
           {
             
               elem.innerHTML='Loading..........';
               }
     if (xmlhttp.readyState==4) {
       elem.innerHTML = xmlhttp.responseText;
     }
   }
   xmlhttp.send(null)
 } else {
   alert("Page could not be found.");
 }

}


function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else { document.getElementById(d).style.display = "none"; }
}
 
   </script>

</head>
<body>
   <form id="form1" runat="server">
       <div id="loading">
       </div>
       <div id="carDisplayDivID" style="display: none; position: absolute; left: 200px;
           top: 100px; border-style: solid; background-color: white; padding: 5px;">
       </div>
       <div id="Div1" style="display: none; position: absolute; left: 200px; top: 100px;
           border-style: solid; background-color: white; padding: 5px;">
       </div>
       <div id="Div2" style="display: none; position: absolute; left: 200px; top: 100px;
           border-style: solid; background-color: white; padding: 5px;">
       </div>
       <a href="#" onmouseout="ReverseContentDisplay('carDisplayDivID');" onmouseover="javascript:getPage('http://localhost/MyPractice/Return.aspx?id=1','carDisplayDivID');">
           Details1</a> <a href="#" onmouseout="ReverseContentDisplay('Div1');" onmouseover="javascript:getPage('http://localhost/MyPractice/Return.aspx?id=2','Div1');">
               Details2</a> <a href="#" onmouseout="ReverseContentDisplay('Div2');" onmouseover="javascript:getPage('http://localhost/MyPractice/Return.aspx?id=3','Div2');">
                   Details3</a>
   </form>
</body>
</html>
Return.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Return.aspx.cs" Inherits="Return" %>

Return.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Return : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            System.Threading.Thread.Sleep(3000);
            if (Request.QueryString["Id"].ToString() == "1")
            {
                Response.Write("The first function, getXMLObj creates an XMLHTTPRequest object, the second actually calls the remote page and loads its content into a destination div. To use, just put the code into a script block then call getPage as follows (using your car example:");

            }
            if (Request.QueryString["Id"].ToString() == "2")
            {
                Response.Write("The second function, getXMLObj creates an XMLHTTPRequest object, the second actually calls the remote page and loads its content into a destination div. To use, just put the code into a script block then call getPage as follows (using your car example:");

            }
            if (Request.QueryString["Id"].ToString() == "3")
            {
                Response.Write("The third function, getXMLObj creates an XMLHTTPRequest object, the second actually calls the remote page and loads its content into a destination div. To use, just put the code into a script block then call getPage as follows (using your car example:");

            }
        }
    }
}

Comments

Popular posts from this blog