Jquery ajax tabs with asp.net user control gridview

ajaxasp.netjquerytabsuser-controls

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.

Best Answer

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';

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here's what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Javascript – How to manage a redirect request after a jQuery Ajax call

I read this question and implemented the approach that has been stated regarding setting the response HTTP status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to AJAX requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The JavaScript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an AJAX request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jQuery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        } else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

Best Answer

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

Javascript – How to manage a redirect request after a jQuery Ajax call

Related Topic