This is a migrated thread and some comments may be shown as answers.

How to load dynamic content when a tab is clicked without re-loading the page using Ajax?

2 Answers 275 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Ritika Gupta
Top achievements
Rank 1
Ritika Gupta asked on 21 Jan 2010, 06:09 AM

How can I load dynamic content when a tab is clicked without re-loading the page using Ajax where the tab postback will load the content in div or panel? Help with instructions on how to go about this is deeply appreciated.

Many Thanks,
Ritika

2 Answers, 1 is accepted

Sort by
0
Mark Galbreath
Top achievements
Rank 2
answered on 21 Jan 2010, 05:13 PM
I use jQuery for dynamically loading content (lazy loading) when a tab is clicked:
<telerik:RadScriptBlock runat="server">  
    <script type="text/javascript">  
        $(function() { $('#overview').load( 'overview.html'); });  
    </script> 
</telerik:RadScriptBlock>  
where '#overview' is jQuery's way of locating document elements and represents a <div> node in my aspx page:
<div id="overview"></div> 
When the tab is clicked, the contents of the file overview.html is loaded into the <div> node.  I put the jQuery script anywhere in the RadPageView of the tab in which I want the content.

Note that your injected content cannot have any <html>,<head>, or <body> tags, which makes sense if you think about it.

The only thing you need to make this work is download jQuery 1.4 from www.jQuery.org, stick jquery-1.4.js anywhere you want (I put it in a js directory below the root; some people recommend getting the link to google's jQuery server, but I've found network lag will cause Javascript errors on page load) and declare it in your page (or better, master page) header:
<head> 
    <script type="text/javascript" src="/js/jquery-1.4.js"></script>
</head>

For an argument for using google, see
http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/ 


Cheers!
Mark
0
Nguyen The
Top achievements
Rank 1
answered on 05 Aug 2010, 08:44 AM
hi all!
I've same your problem, i can not fix it now.
here is my website: http://thoathiem.net/
I've a "fire flash", when click on my menu, the page reloaded and "fire flash" re-play
Can anyone help me fix it? Thanks so much !
Tags
TabStrip
Asked by
Ritika Gupta
Top achievements
Rank 1
Answers by
Mark Galbreath
Top achievements
Rank 2
Nguyen The
Top achievements
Rank 1
Share this question
or