Load aspx page into div of another aspx page

Question

1.00/5 (1 vote)

See more:

Hi all, i have one main aspx page with a div tag and another simple aspx page with some text on it. How can i make the simple page load into the main page's div when a link is clicked? This is what i have done so far...

XML

<head id="Head1" runat="server">
    <title>Untitled Page</title>
     <link rel="stylesheet" type="text/css" href="public_site/StyleSheet2.css" media="screen"/>

     <script type="text/javascript">
function load(link)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","about.aspx?is_ajax=1&link="+link,true);
xmlhttp.send();
}
</script>

</head>

<body>
    <form id="form1" runat="server">
   <div class="bg">
    <img src="/public_site/img/background.png" alt="" />
    </div>
    <div class="menu">
     <ul>
    <li class="menu_link"><a href="home_page.aspx">HOME</a> |</li>
    <li> NEWS </li><li>|</li>
    <li style="color:#0B4C5F;"> ABOUT US</li> <li>|</li>
    <li> FAQ |</li>
    <li> DOWNLOADS |</li>
    <li> CONTACT US |</li>
    <li> RETAILERS |</li>
    <li> MEMBERS</li>
    </ul>
    </div>
    <div class="block">
     <ul class="menu2" style="text-align:center;">
    <li class="menu_link"><a href="about.aspx" style="cursor:pointer; color:#01DFD7;">Buying Club</a></li> <li style="color:#0B4C5F;">|</li>
    <li style="color:#0B4C5F;"><a onclick="load('1');" style="cursor:pointer;"> Network Marketing</a> |</li>
    <li style="color:#0B4C5F;"> Opportunity |</li>
    <li style="color:#0B4C5F;"> Ubuntu |</li>
    <li style="color:#0B4C5F;"> Affiliations |</li>
    <li style="color:#0B4C5F;"> Credentials </li>
    </ul>
    <hr />
    <div id="mydiv" class="content">
    <h3 class="header2">Imagine</h3>
    <p style="margin-left:8%;">
    A FULL grocery cupboard and fridge ALL the time, everything you want to enjoy and
    AFFORDING it!
    </p>
    <h3 class="header2">We have a plan</h3>
    <p style="margin-left:8%;">
    Bringing you an EXCELLENT CONCEPT, an AMAZING SERVICE and SAVINGS, allowing you to
    EARN.
    </p>
    <h3 class="header2">Who is DreamTeam buying club...</h3>
    <p style="margin-left:8%;">
    We are an independent marketing organisation based from the Eastern Cape in South
    Africa. Using technology and participating retailers to offer our members a wide range of
    products from which to purchase and receive rewards and rebates, linked to a
    business opportunity to build your own business helping you increase your income…
    </p>
    <h3 class="header2">What is DreamTeam buying club</h3>
    <ul style="margin-left:5.3%;">
    <li>A place for faily and friends to help one another.</li>
    <li>A place where people contribute to improving their and others lives.</li>
    <li>A place for cost effective and easy shopping.</li>
    <li>A safe place to put money aside every month for daily needs.</li>
    <li>A safe place keep to shopping money.</li>
    </ul>   
    </div>
    </div>
    </form>
</body>
</html>

And the code behind:

C#

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["is_ajax"] != null)
        {
            Response.Clear();

            if (Request.QueryString["link"] == "1")
            {
                Response.Write("Hello World");
            }

            Response.End();
        }
    }

This returns hello world in the main page's div how can i get it to return the simple page? Any help will be much appreciated, thanking you in advance.

Posted 15-Aug-12 1:18am

Ruwaldo

Updated 15-Aug-12 1:19am

v2

Add a Solution

Comments

ZurdoDev 15-Aug-12 8:20am

You could always use an iframe instead.

BobJanova 15-Aug-12 9:51am

You are loading the AJAX response into 'mydiv'. Do you mean the content of the response also contains all the boilerplate and div tags?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Shelby Robertson** · Accepted Answer · 2012-08-15T04:24:00

Solution 1

I would recommend using jQuery for this, I have done something like this a few times and it makes it very easy.

http://api.jquery.com/load/[^]

In your example it would be something as simple as:

JavaScript

$("#mydiv").load("pageToLoad.aspx #container");

PageToLoad.aspx:

HTML

pageToLoad.aspx:

<html>
    <body>
        <div id="container">
            <!--stuff goes here -->
        </div>
    </body>
</html>

Posted 15-Aug-12 4:24am

Shelby Robertson

Updated 16-Aug-12 7:08am

v2

Comments

Sergey Alexandrovich Kryukov 15-Aug-12 21:49pm

This is a very good idea, only it can legitimately work if pageToLoad.aspx renders not the "real" complete HTML, but a fragment of it, something which make a valid div's inner HTTP, otherwise it would produce invalid HTML, having nested "html" and "body" elements, for example.

So, I don't know if this is in line with OP's needs. It it creates a problem I explained, the OP's question is just invalid, and this is not your fault.

So, how should I vote... as you provided a good idea but did not explain why it could be problematic -- a 4.

Cheers,
--SA

Shelby Robertson 16-Aug-12 9:44am

I guess I could have been even more specific. A better example would have been:

$("#mydiv").load("pageToLoad.aspx #container");

Where 'container' is a div that wraps the valid part of the page to load. That would get around the invalid html problem you describe.

Sergey Alexandrovich Kryukov 16-Aug-12 12:42pm

Do you mean it's just <a name="container" />? should it be inside div or outside (before, or somewhere)?
Could you please put this along with the fragment of loaded HTML code in the answer, by "Improve solution"?
I never knew this thing. Thank you very much for this clarification, but I want to try it...
--SA

Member 9588281 7-Oct-15 4:24am

I tried like this
$("#mydiv").load("pageToLoad.aspx #container");

my page is like
<html>
<body>
<div id="container">

</div>
<form id="rentDetails">

</form>
</body>
</html>

In this container data will get but form data not loaded

please suggest/help on this issue ASAP.

Load aspx page into div of another aspx page

1 solution

Solution 1

Add your solution here

Preview 0

Load aspx page into div of another aspx page

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us