How do I use jQuery deferred objects with jQuery UI tabs?

Question

I am encountering some issues with integrating jQuery deferred objects with jQuery UI tabs.

Basically, I want to achieve something like this:

(function($) {
   var tabs;

   function func1 () {
      return $.get(url, function() {
         // ajax call 1
      });
   };

   function loadTabs() {
     return tabs = $('.tabs').tabs({
        ajaxOptions: {
            beforeSend: function(jQXHR, settings) {
                // load spinner image
            },
            complete: function(jqXHR, settings) {
                // destroy spinner image
            }
        }
    })
   };

   $.when(func1(), loadTabs()).then(function() {
      tabs.bind('tabsload', function(event, currentTab) {
         // do something
      }
   });
})(jQuery);

Basically, I dont think i'm getting a deferred object back from the tabs instantiation. I have read that upgrading to the jQuery 1.9 UI release candidate may expose an API to get a deferred object but I can't seem to find documentation for that functionality.

EDIT: My overall goal with this implementation is to have my loading spinner icons display while the results of func1() and loadTabs() are being received. Once those two processes have finished, I want to hide/destroy the spinner.

score 1 · Accepted Answer · answered Sep 27 '12 at 22:48

Why not just do:

function myTabs() {
    loadSpinner();
    $.ajax(url, { data: data})
       .done(loadTabsFunction)
       .always(killSpinner)
    ;
}

function loadTabsFunction(response) { }

function loadSpinner() { }

function killSpinner() { }

myTabs();

How do I use jQuery deferred objects with jQuery UI tabs?

1 Answers1