AJAX повикването не актуализира частично съдържание на страница след щракване назад/напред в уебсайта

Опитвам се да генерирам състояния на хронологията, за да мога да щракам назад и напред на моите страници, поддържани от AJAX. До голяма степен работи, но на една страница моето AJAX извикване не актуализира съдържанието на страницата, когато щракна върху бутон след зареждане на предишно/по-късно състояние на страница. Защо?

Проблемът възниква с #filtered_posts div. На началната си страница показвам публикации вътре в #filtered_posts с филтър за категории над него. Когато щракна върху бутон във филтъра за категория, той актуализира съдържанието вътре в #filtered_posts. Ако щракна назад или напред на началната страница, без да натисна бутон за филтриране на категории, тя успешно извлича страницата с правилното състояние на #filtered_posts. Но ако след това щракна върху бутон за филтър на категории, URL адресът на уебсайта ми се актуализира, но #filtered_posts не, и щракването назад/напред само променя URL адреса. Как мога да поправя това?

Освен това има ли начин да актуализирам само състоянието на #filtered_posts, когато щракам назад или напред на началната страница, и да актуализирам съдържанието в .main div за всички други страници?

Ето моят опростен код:

    $(document).ready(function () {

        var $mainContent = $(".main");
        var mainContentHTML;
        var value;
        var title;
        var filtered_posts = $("#filtered_posts");

        $(document).on("click", "nav li a", function (e) {
            e.preventDefault();
            value = $(this).attr("href");
            $mainContent.load(value + " .main", function (data) {
                console.log("this function works properly");
            })
        });

        $(document).on("click", "#category-filter li.filter-button", function (e) {
            e.preventDefault();
            value = $(this).find("a").attr("href");
            var category = $(this).data("category");

            $.post(wp_ajax.ajax_url, {
                    action: "filter",
                    category: category
                },
                function (data, status, xhr) {
                    if (status == "success") {
                        filtered_posts.html(data);
                    }
                    if (status == "error") {
                        console.warn(data);
                    }
                });
        });

        //Create history to enable back button functionality
        $(document).ajaxComplete(function (event, jqXHR, settings) {
            mainContentHTML = $(".main").html();
            title = $(document).find("h1.entry-title").text();
            var stateObj = {
                content: mainContentHTML
            };
            window.history.pushState(stateObj, title, value);
        });

        window.addEventListener('popstate', function (event) {
            var state = event.state == null ? mainContentHTML : event.state.content;
            $mainContent.html(state);
        });
    });

person Sidders    schedule 09.06.2020    source източник


Отговори (1)


Успях да поправя това, като замених променливата filtered_posts с $("#filtered_posts") в кода.

person Sidders    schedule 09.06.2020