jQuery UI Tabs – Lidar com falhas de AJAX ao carregar uma página

Jogando com grandes dados (por exemplo, estatísticas) e exibindo esses dados por meio de uma solicitação AJAX, concluí que os usuários ficariam impacientes e precisariam de alguma forma de saber que a página ainda estava carregando, então adicionei um GIF de carregamento na página que impedia outras ações até a página ser carregada. Isso foi muito fácil, considerando as propriedades beforeLoade loadna função de interface do usuário das guias. Quando havia um erro AJAX, no entanto, o GIF continuava girando e o usuário não tinha como saber (a menos que abrisse devtools). Isso ocorre porque o jQuery UI não tem failopção. No entanto, alguns console.logrevelam que o segundo objeto passado para você na beforeLoadfunção é o originaljqXHR(AJAX) objeto que jQuery usou para fazer a chamada AJAX. Pode-se usar este objeto para adicionar um recurso que realmente deveria estar lá desde o início, então aqui vai:

$('#tabs').tabs({
    beforeLoad: function(event, ui) {
        ui.jqXHR.fail(function (e) {
            // We have failed to load the tab content
        });
        if (ui.panel.html().length) {
            // We have already loaded this tab, don't attempt to load it again
            return false;
        }
    },
    load: function() {
        // We have loaded. Remove the loading animation from the screen
    }
});

O ui.jqXHR.failé sinônimo de falha em $.ajax().fail().

Aproveitar