Question

I am rendering a usercontrol on tab select using ajax.

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();

            $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
        }
    });

how can I prevent the tab from loading the remote content again on each tab click.

Answer 1

the simplest way is to use a flag to let the tab knows if it has been loaded. For example, use $(‘#tabsResult’).html().

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();
            if(!$('#tabsResult').html())
            {
              $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
            }
});