Click here to Skip to main content
15,119,786 members
Please Sign up or sign in to vote.
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
Updated 15-Aug-12 2:19am
v2
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

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>
   
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">
<!--stuff goes here -->
</div>
<form id="rentDetails">
<!--stuff goes here -->
</form>
</body>
</html>


In this container data will get but form data not loaded

please suggest/help on this issue ASAP.

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900