How to display an ASPX in another ASPX's DIV using jquery

Question

1.00/5 (1 vote)

See more:

jQuery

hi,
i need to display an ASPX in another ASPX's DIV using jquery.can some one share a sample code.

Regards,
sajith

Posted 7-Oct-11 4:24am

sajithnet

Updated 3-Sep-17 18:13pm

Add a Solution

4 solutions

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)

Uday P.Singh · Answer 1 · 2011-10-07T04:31:00

Solution 1

check this out:

how-to-display-an-aspx-in-another-aspxs-div-dynamically-at-runtime[^]

hope it helps :)

Posted 7-Oct-11 4:31am

Uday P.Singh

Comments

E.F. Nijboer 7-Oct-11 10:37am

That was also the first answer to this question the first time sajithnet asked it today ;-)
http://www.codeproject.com/Questions/265300/How-to-call-the-DIV-of-one-page-in-another-Page.aspx

Uday P.Singh 7-Oct-11 10:47am

Oh Yes! but I didn't notice that, why is he asking the same question again? SAME question same answer(tit for tat) LOL :)

E.F. Nijboer · Answer 2 · 2011-10-07T04:47:00

You already asked this question and you are getting the same results but now from someone else. Reposting really won't help. Did you try anything you could find there because this second time it again looks like a valid link? It might be that you run into some new problems along the way and it would be no problem to post a new question asking about that. But it now looks like you did not put any effort into it at all.

Here another link that might help:
UFrame: goodness of UpdatePanel and IFRAME combined[^]

If you run into any problems or for some reason this won't work... please post a comment explaining why, including as much useful details as possible. Only then it is possible to work out a solution.

Good luck!

Muralikrishna8811 · Answer 3 · 2011-10-07T05:21:00

Solution 3

Hi,

Here I'm providing sample code for your requirement.

check this once

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language ="javascript" >
        $(document).ready(function () {

            $("#resultdiv").load("default17.aspx", {}, function (data) {
                alert("loading complete");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div id="resultdiv">
       
       </div>
    </div>
    </form>
</body>
</html>

In the above code you can display another page that means default17.aspx page into "resultdiv" div tag.

All the Best

Posted 7-Oct-11 5:21am

Muralikrishna8811

Comments

sajithnet 8-Oct-11 1:53am

i need to display the default17.aspx on the DiV of default17.aspx page .

sajithnet 8-Oct-11 2:09am

In the below sample iam loading default17.aspx using jquery .now the page is displayed on the current page DIV i need to display on the DIV i declared on the default17.aspx.
-------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language ="javascript" >
$(document).ready(function () {

$("#resultdiv").load("default17.aspx", {}, function (data) {
alert("loading complete");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="resultdiv">

</div>
</div>
</form>
</body>
</html>
------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default17.aspx.cs" Inherits="Default17" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="resultdiv" >

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

Muralikrishna8811 9-Oct-11 7:07am

you want t display whole page in same page div

whatever page you want to display in div is just mention that url in load method thats all it can display

sajithnet 10-Oct-11 4:38am

dear murali many thanks for ur help .in the below code iam getting the DIV(object) of Default2.aspx but the page is not populating in the DIV?

function GetPage(pagename) {
$.ajax({ url: 'Default2.aspx', type: 'POST', async: false, data: { param: 'abcd' },
success: function(obj) {
var div = $('#maincontent', obj);

div.load("Default2.aspx", function() {

});
}
});
}

Muralikrishna8811 10-Oct-11 5:24am

Hi sajithnet

check my posted code once

Muralikrishna8811 · Answer 4 · 2011-10-09T23:24:00

Solution 4

Hi,

check this code once
default22.aspx page contains following code

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script language ="javascript" >
        function f1() {
            $("#sdfg").load("default22.aspx", {}, function () { });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <input type ="button" value ="get page" onclick ="f1()" /><br />
       Hi this is static
       <br />
       <div id="sdfg">
         hi this dynamic
       </div>
    </div>
    </form>
</body>
</html>

It can retrieve same page into that page

All the Best

Posted 9-Oct-11 23:24pm

Muralikrishna8811

Updated 9-Oct-11 23:25pm

v2

Comments

Muralikrishna8811 10-Oct-11 5:57am

Hi,

retrieving default2.aspx page .and then modifying retrieved page .

What is the use by doing this

What exactly you want

sajithnet 10-Oct-11 6:11am

yes now u got my need.

iam having a tree view based on selection on the node new pages will be displayed.
fron the treeview the response.redirect is called to generate the new page this will reload whole page
so my updatepanel will be of no use if i use repose.redirect.so in order to avoid reloading whole page
iam using jquery .since reponce.redirect is called in treenode i cannnot populate the newpage on the DIV of
tree since this is menu so i wiil declare the Div in new page and display the newpage on that same page div.i cannot
change the existing code because this project is allredy done i need to incorporate Ajax to stop postback.

sajithnet 10-Oct-11 5:50am

dear murali,Many thanks for ur support this is not i need i will post ny need.

Hi,
Iam loading Default2.aspx from MainPage.aspx. i need to display the
condense of Default2.aspx in the Div(maincontent) which i declared in Default2.aspx.
with the below code iam getting the DIV object of Default2.aspx from MainPage.aspx.
but the Default2.aspx is not showing ,can any one correct the below code.

--------------------------------------------------------------
MainPage.aspx(iam calling GetPage(PageName) from MainPage.aspx from here i need to call the Div of
Default2.aspx and Load Default2.aspx page in DIV(maincontent).
-----------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MainPage.aspx.cs" Inherits="MainPage" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Testing Jquery methos</title>

</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language ="javascript" >

function GetPage(pagename) {
$.ajax({ url: 'Default2.aspx', type: 'POST', async: false, data: { param: 'abcd' },
success: function(obj) {
var div = $('#maincontent', obj);

$(div).load('Default2.aspx', function() {

});
}
});
}

</script>
</head>
<body>
<form id="form2" runat="server">

</div>

</div>
</div>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</form>
</body>
</html>
--------------------------------------------------------------------------

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>

<body id="bd" bgcolor="#ff9999">
<form id="form3" runat="server">

<div id="maincontent" style="width:100%"> This is Home content </div>

<asp:TextBox ID="TextBox1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />

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

How to display an ASPX in another ASPX's DIV using jquery

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us