Загрузите HTML-контент, если не существует JQuery AJAX

Question

У меня есть страница с 3 кнопками.> Логотипы> Баннеры> Нижний колонтитул

При нажатии любой из этих 3 кнопок она отправляет jquery-страницу на страницу, которая возвращает HTML-содержимое в ответ, и я устанавливаю innerhtml div из этого возвращаемого содержимого.Я хочу сделать это так, чтобы, если я щелкнул по Логотипу, а затем перешел к Баннеру и вернулся на Логотип, он не должен снова запрашивать контент, поскольку он уже загружен при первом нажатии.

Спасибо.

Answer 1

Звучит как идеальный кандидат для .one()

$(".someItem").one("click", function(){
  //do your post and load the html
});

Использование одного позволит обработчику события срабатывать один раз для каждого элемента.

Answer 2

В логике обработчика кликов ищите загруженный контент. Одним из способов было бы посмотреть, сможете ли вы найти определенный элемент, который входит в контент.

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

Например:

$(".myElements").click(function() {
        if ($(this).attr("data-loaded") == false {
            // TODO: Do ajax load

            // Flag the elements so we don't load again
            $(".myElements").attr("data-loaded", true);
        }
    });

Преимущество сохранения состояния в атрибуте data заключается в том, что вам не нужно использовать глобальные переменные, а данные хранятся в DOM, а не только в javascript. Вы также можете использовать это для управления поведением скрипта при выводе HTML сервером, если у вас динамическая страница.

Answer 3

попробуйте это:

HTML:

<a href="#" class="menu" data="logos" type="hidde-class">logos</a><br />
<a href="#" class="menu" data="banner" type="remover-class">banner</a><br />
<a href="#" class="menu" data="footer" type="remover-class">footer</a><br />

<div id="container"></div>

JS:

$(".menu").bind("click", function(event) {

    event.stopPropagation();

    var 
       data = $(this).attr("data");
       type = $(this).attr("type");

    if ($("#container").find(".logos").length > 0 && data == "logos") {
        $("#container").find(".logos").show();
        return false; 
    }

    var htmlappend = $("<div></div>")
                          .addClass(type)
                          .addClass(data);

    $("#container").find(".remover-class").remove();
    $("#container").find(".hidde-class").hide();

    $("#container").append(htmlappend);

    $("#container").find("." + data).load("file_" + data + "_.html");

    return false;

});

Answer 4

Отметьте это .one () сохранит лишнюю строку кодов и множество проверок. Я использовал это в похожем случае. Оптимизированный способ вызова, который, если они обернуты в родительский контейнер, который я настоятельно рекомендую, будет:

$('#id_of_parent_container').find('button').one("click", function () {
    //get the id of the button that was clicked and do the ajax load accordingly
});

Answer 5

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

$('#button').click(function(e) {
    e.preventDefault();
    $('#button').unbind('click');
    $('#result').load('ajax/test.html ' + 'someid', function() {
      //load callback
    });
});

или использовал one.click, который является лучшим ответом, чем этот:)

Answer 6

Вы можете сбросить возвращенный html в переменную, а затем проверить, является ли переменная null, прежде чем делать еще один вызов ajax

var logos = null;
var banners = null;
var footer = null;

$(".logos").click(function(){
    if (logos == null) // do ajax and save to logos variable
    else $("div").html(logos)
});