Question

I have a user control that has a gridview in it with paging. The paging is driven by an object datasource, so it’s using the dopostback events by default.

I want to use jquery to load the usercontrol into a tab via ajax because I have multiple tabs that I don’t want to load all at once and take all the database hits if they aren’t needed.

So I put that user control on a blank aspx file and set the tab’s href = to that aspx file. The gridview loads fine and looks great.

The problem I am running into is when I try to change pages on the gridview, the postback is going to the URL of the aspx file and not the page I am on with the tabs. I know this is supposed to happen, but I am wondering what I can do to make it so it can post back to the right page and work within the tabs.

It doesn’t work with and without an updatepanel around it.

Any help is appreciated.

Answer 1

client:

    <script language="javascript" type="text/javascript">
    $(document).ready(function () {

        var hdn = document.getElementById('<%= tabid.ClientID %>');

        var tbs = $("#tabs").tabs({
            select: function (event, ui) {                    
                if (hdn) hdn.value = ui.index;
            }
        });

        tbs.tabs('select', <%= sel %>);

    });
</script>

<asp:HiddenField ID="tabid" runat="server" />

server:

method Tabs.Page_Load(sender: Object; e: EventArgs);
begin
    if (page.isPostBack) then
        sel := tabid.Value
    else 
        sel := "0";
end;

where sel is a public property of the page class:

Tabs = public partial class(System.Web.UI.Page)
    public property sel : String := '0';