Как предварительно загрузить все вкладки по умолчанию с помощью jQuery - PullRequest
Новая
       21

Как предварительно загрузить все вкладки по умолчанию с помощью jQuery

3 голосов
/ 10 сентября 2010

Если у меня есть 4 вкладки, где первые 2 загружены с помощью ajax, а последние 2 статические, как мне предварительно загрузить 2 вкладки ajax по умолчанию?

На данный момент автоматически загружается только первая вкладка, вторая нажимается при нажатии. Я хочу, чтобы они оба были загружены, чтобы при нажатии на второй контент уже загружался. Я попытался вызвать событие загрузки на второй вкладке так: 

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 1);
});

И это загружает вторую вкладку, но по какой-то странной причине первая не загружается вообще; даже если я нажму другую вкладку и вернусь к первой, она не загрузится.

Тогда я попробовал что-то вроде этого: 

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 0);
    $("#main-tabs").tabs("load", 1);
});

Тот же результат, вторая вкладка загружена, первая нет.

Как все они (ajax) могут быть загружены автоматически?

1 Ответ

7 голосов
/ 11 сентября 2010

Источник проблемы

Два факта:

  • Когда jQuery загружает вкладку с помощью метода load, если выполняется другой запрос загрузки AJAX, он будет прерван (возможно, потому что, если вы выберете одну вкладку и она загружается с помощью AJAX, а затем быстро выберет другую для загрузки, jQuery предполагает, что вы не хотите загружать оба - только последний).
  • Когда вы устанавливаете первую вкладку для загрузки AJAX, по умолчанию будет вызываться .tabs("load",0) для заполнения первой вкладки.

Объединяя эти два факта, вы видите, что происходит. load вызывается первым для заполнения первой вкладки, а затем вызывается снова для заполнения второй. Вторая загрузка отменяет первую.

Возможное решение

Поскольку вы не можете одновременно выдавать несколько load в одном и том же меню вкладок, нам нужно найти другой способ. Это решение использует опцию load вкладок для последовательной загрузки каждой вкладки. Другими словами, когда одна загрузка завершается, начинается загрузка следующей. Когда тот закончен, он загружает следующий и т. Д. 

//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];

var loadNextTab = function() {
    if (indexesToLoad.length == 0) return;
    var index = indexesToLoad.shift();
    $("#main-tabs").tabs("load",index);
};

$("#main-tabs").tabs({
    cache: true,
    load: loadNextTab
});

Возможные улучшения этого метода:

  • вместо указания индексов для загрузки, заставьте его самостоятельно определить, какие вкладки являются вкладками AJAX, и загрузить их
  • сделайте так, чтобы loadNextTab можно было использовать в нескольких меню с вкладками одновременно
  • сделать его интегрируемым (если это слово) с другими функциями обратного вызова загрузки

Как я узнал, что случилось?

Используя firebug . Это аддон для Firefox. Firebug показывает все запросы AJAX в своей консоли, и, как показано на скриншоте, было не так сложно понять, что происходит :) Я действительно рекомендую это. (Существуют аналогичные инструменты для большинства основных браузеров - нажмите Ctrl + Shift + J в Chrome или F12 i IE.)

Screenshot of Firebug console showing ajax requests

...