Load pages in DIV using JQuery

If you have a <DIV> in your HTML or ASP.NET page and want to load another page in that DIV, then here's how to do so using one line of jQuery code


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


    <title></title>


    <style type="text/css">


    .divPage


    {


        width:300px;


        height:200px;


    }


    </style>


 


    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>


    <script type="text/javascript">


        $(document).ready(function() {


        $('#LoadPage').load('Default.aspx');


        });    


    </script>


</head>


<body>


    <form id="form1" runat="server">


    <div>


    <div id="LoadPage" class="divPage">


    </div>


    </div>


    </form>


</body>


</html>







About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

7 comments:

Jacob said...

Is it possible to show a progress bar?

viren said...

Hi,
This is very infomative site,boss you are doing great job..
thanks
thank you very much....
god bless you brother.

subhead said...

thanks for that short tutorial. this helps me a lot.

Anonymous said...

Hi, is there a way to load data, because in my aspx, I fill a dropdownlist by code behind, and if I use $('#dvInc').load('Default.aspx'); it doesn't.

Palaash said...

Why do you want to load a page inside a div which contains a dropdown. Why not load the dropdown directly inside the div?

clare said...

Doesnt seem to work in Chrome ...

Anonymous said...

Such a shame it doesn't work in chrome!