JQuery tabcontrol: load gridview

Question

I got a JQuery/CSS tabcontrol, which currently handle 4 tabs, containing gridviews. I'd like the gridview to be loaded, when you hit the tabs. This reduces the loading time of the page, as some of the gridview's sprocs take some time. The gridviews need to load once, they don't have to be updated each time you open the specific tab.

JQuery:

$(document).ready(function() 
{ 
    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() 
    { 
        $("ul.tabs li").removeClass("active"); //Remove any "active" class 
        $(this).addClass("active"); //Add "active" class to selected tab 
        $(".tab_content").hide(); //Hide all tab content 

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
        $(activeTab).fadeIn(); //Fade in the active ID content 
        return false; 
    }); 
});

Now I just started using JQuery, so I really don't know to handle this... Anyone ideas?

Answer 1

Hey,

If you want to do everything on the server, you need an update panel, and force a postback using __doPostBack so that the server can process the request... You may also be able to use $.ajax to do this as well...

Otherwise, do it all on the client, stream the data to the client from a web service, and build the table on the client.

HTH.

Answer 2

I had a similar issue. What i did was create a button to load the gridview, and in the select event for the jquery tabs I click those buttons. Something like this:

$("#tabs").tabs({
        select: function (event, ui) {
            switch (ui.index) {
                case 0:
                    $("#<%= btnOne.ClientID %>").click();
                    break;
                case 1:
                    $("#<%= btnTwo.ClientID %>").click();
                    break;
                case 2:
                    $("#<%= btnThree.ClientID %>").click();
                    break;
            }
        }
 });