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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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.