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 528 Views

TabStrip

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

2 Answers, 1 is accepted

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