Вкладки пользовательского интерфейса jQuery: ajaxOption не работает должным образом

Question

вкладки jQuery UI опции имеют ajaxOptions.

У меня есть следующий код:

$('#tabs').tabs({
    cookie:{expires:1},
    cache:true,
    ajaxOptions:{
        beforeSend: function(xhr,settings){
            $(".ajax-gif").css("top",$(window).scrollTop()).show();
        },
        error: function(xhr,status,index,anchor){
            $(anchor.hash).html("Couldn't load this tab.");
        },
        complete: function(xhr,textStatus){
            $(".ajax-gif").hide();
        }
    }
});

Но ajax-gif не отображается.

Тот же код в jQuery ajaxSetup (без jQuery UI) идеально подходит для обычных запросов ajax (не во вкладках пользовательского интерфейса).Где я ошибся?

Спасибо!

уточнение

Обычные запросы ajax используют форму POST, а вкладки - форму GET.

Answer 1

Какую версию вкладок jQuery UI вы используете?Опция ajaxOptions доступна только до версии 1.8, ее можно увидеть по адресу http://api.jqueryui.com/1.8/tabs.

Для текущей версии (1.11) вы должны использовать свойство beforeLoad.Как это:

$('#tabs').tabs({
    beforeLoad: function (event, ui) {

        $(".ajax-gif").css("top",$(window).scrollTop()).show();

        ui.jqXHR.complete(function(data) {
            $(".ajax-gif").hide();
        });

        ui.jqXHR.error(function(data) {
            $(anchor.hash).html("Couldn't load this tab.");
        });
    }
});

Answer 2

Я нашел решение:

$(document).ajaxSend(function(){
    $(".ajax-gif").css("top",$(window).scrollTop()).show();
});
$(document).ajaxComplete(function(){
    $(".ajax-gif").hide();
});