JQuery-UI вкладки (AJAX) .... остановить перезагружать вкладки URL при повторном выборе вкладки

Question

Я использую вкладки jquery ui и я добавляю вкладки динамически, используя .tabs ('add' ...). Вкладки загружают URL, используя ajax. Проблема в том, что каждый раз, когда я нажимаю на другую вкладку, затем возвращаюсь ... вкладка перезагружает URL. я хочу, чтобы URL был загружен один раз .... есть идеи?

Answer 1

Обратите внимание, что свойство cache параметров вкладок устарело в jQueryUI 1.9 и удалено в 1.10. См. Руководство по обновлению jQueryUI 1.9

Рекомендованным способом обработки этого сейчас является использование нового события beforeLoad, чтобы запретить выполнение запроса XHR.

$( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
    }

    ui.jqXHR.success(function() {
      ui.tab.data( "loaded", true );
    });
  }
});

Answer 2

Я думаю, вы ищете опцию cache (по умолчанию false):

Независимо от того, кэшировать ли содержимое удаленных вкладок или нет, например, загрузитьтолько один раз или с каждым кликом.

Например:

$("#tabs").tabs({ cache:true });

Вот простая демонстрация.Используйте Firebug или другой инструмент, чтобы убедиться, что содержимое не извлекается более одного раза для каждой вкладки: http://jsfiddle.net/andrewwhitaker/D6qkW/

Answer 3

Включите кэширование на вкладках или, в качестве альтернативы, включите опцию globabl ajax cache в jQuery, когда что-то меняется, требующее перезагрузки, динамически добавляйте что-то вроде Math.Rand () в конец URL, чтобы оно не кэшировать следующую загрузку.

С сайта jQuery для кэширования вкладок:

<code>
Code examples Initialize a tabs with the cache option specified. $( ".selector" ).tabs({ cache: true }); Get or set the cache option, after init. //getter
var cache = $( ".selector" ).tabs( "option", "cache" );
//setter
$( ".selector" ).tabs( "option", "cache", true );

Answer 4

Начиная с jQuery 3.0 jqXHR.success был удален, решение (измененная форма CheekySoft выше) теперь

$('#tabs').tabs({
  beforeLoad: function(event,ui){
    if(ui.tab.data("loaded")){
      event.preventDefault();
      return;
    }
  },
  load: function(event,ui){
    ui.tab.data("loaded",true);
  }
});

Answer 5

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/prettyPhoto/dark_square/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Answer 6

Используйте переменную для хранения логического значения. Изначально установлено в false (ajax не загружен). Когда ваш ajax загружается, установите для логического значения значение true и проверяйте значение перед каждым ajax-запросом.

Конечно, вам придется проделать немного больше работы, чтобы обработать более одной вкладки.

Answer 7

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

 $( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
    if ( ui.tab.data( "loaded" ) ) {
        event.preventDefault();
        return;
    }

    ui.jqXHR.success(function() {
        ui.tab.data( "loaded", true );
    });
}

});

Устаревшие ajaxOptions и опции кэширования, добавленные до событияLoad

Answer 8

Оберните ваши вызовы AJAX в оператор if, который проверяет предыдущий вызов AJAX, то есть:

var ajaxed = false

if ( ajaxed == false ) {
    // your ajax call
   $.ajax({
       type: "GET",
       url: "test.js",
       dataType: "html"
       success: function(data){
          // insert html into DOM
          ajaxed = true
       }
   });
}