Javascript-форум - ajax фильтрация+навигация

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - ajax фильтрация+навигация (https://javascript.ru/forum/dom-window/76537-ajax-filtraciya-navigaciya.html)

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

49 строка раскоментировал

Цитата:

Сообщение от гуня

задача сделать так чтобы не мигало

Пост №7
Вот упрощенно ваша структура

<div id="page">
    <form>
        <select></select>
    </form>
    <div class="row"></row>
</div>

Когда вы выбираете что-то в select, у вас происходит скачивание HTML-кода, который затем вставляется в элемент <div id="page">. Как видите, у вас происходит замена всего содержимого (включая форму с открытым <select>) на новое содержимое. (поэтому иногда подмигивает! у меня едва подмигивает 1 раз на 5 просмотров, это не так критично, в принципе здесь можно ничего не менять!)

Но всё-же вы можете не обновлять форму!
Тогда надо поменять структуру HTML на такую...

<div>
    <form>
        <select></select>
    </form>
    <div class="row" id="page"></row>
</div>

Обратите внимание, как я перенёс атрибут id! Тогда оно не мигает, поскольку не заменяется форма, но тогда нужно немного поправить ответ от сервера! (отрисовывать форму на сервере не надо, тогда!)

Цитата:

Сообщение от гуня

спасибо попробую
я еще пытался делать вызов
setinterval ({$('div.' + cssClass + ' .multiselect').parent().find('ul').show();}, 1);

но все равно мигание иногда проскакивает

UPD

Цитата:

Сообщение от гуня

не помогло
перенес id page но форма все равно сбрасывается
если что на тесте обновил

надо было сверху убрать id="page" и добавить вниз

а вы зачем-то и наверху оставили id="page" и вниз добавили id="page1"

у вас получилось так

<div id="page">
    <form>
        <select></select>
    </form>
    <div class="row" id="page1"></row>
</div>

а надо так

<div>
    <form>
        <select></select>
    </form>
    <div class="row" id="page"></row>
</div>

Читайте, что я пишу!!!

Цитата:

Сообщение от гуня

читал
я поменял в скрипте код обновления

new Pjax({
        elements: 'a[ajaxLink], li.page a, div.sorter a, form',
        selectors: ['#page1'],
        scrollTo: false,
        cacheBust: false
    });

UPD
А в тесте до сих пор показывает (в category.js строки 48-53)

new Pjax({
        elements: 'a[ajaxLink], li.page a, div.sorter a, form',
        selectors: ['#page'],
        scrollTo: false,
        cacheBust: false
    });

UPD
Теперь передвинулось на строки 65-70, но всё-равно тот же текст

UPD

Цитата:

Сообщение от гуня

сделал как описано в 7 посте
теперь page перенесено
не помогло

помогло!

Проще говоря, раскомментируйте 49 строчку в category.js

у вас в category.js строки 28-53 выглядит так

$(document).on('change', '#goods-filter :input, #goods-filter [type=hidden]', function() {



        /*interval = setInterval(function () {
            //$('div.' + cssClass + ' .multiselect').parent().find('ul').show();
            //cssClass = '';

            if (cssClass.length > 0) {
                console.log('setInterval');
                $('div.' + cssClass + ' .multiselect').parent().find('ul').show();
            }

            if (cssClass.length == 0) {
                clearInterval(interval);
            }
        }, 1);*/

        $('#goods-filter :submit').click();

        if (cssClass.length > 0) {
            //$('div.' + cssClass + ' .multiselect').parent().find('ul').show();
        }


    });

а надо так

$(document).on('change', '#goods-filter :input, #goods-filter [type=hidden]', function() {



        /*interval = setInterval(function () {
            //$('div.' + cssClass + ' .multiselect').parent().find('ul').show();
            //cssClass = '';

            if (cssClass.length > 0) {
                console.log('setInterval');
                $('div.' + cssClass + ' .multiselect').parent().find('ul').show();
            }

            if (cssClass.length == 0) {
                clearInterval(interval);
            }
        }, 1);*/

        $('#goods-filter :submit').click();

        if (cssClass.length > 0) {
*!*
            $('div.' + cssClass + ' .multiselect').parent().find('ul').show();
*/!*
        }


    });

или лучше так (если закомментированное не нужно!) а надо так

$(document).on('change', '#goods-filter :input, #goods-filter [type=hidden]', function() {
        $('#goods-filter :submit').click();

        if (cssClass.length > 0) {
            $('div.' + cssClass + ' .multiselect').parent().find('ul').show();
        }
    });

UPD

Цитата:

Сообщение от гуня

при первой загрузке чекбоксы схлопываются

я не понял, что это значит, но если раскомментировать 49 строчку то всё работает без мигания и сворачивания

Цитата:

Сообщение от гуня

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

Ах, да! Заметил! То, что у вас в category.js на 55-57 строчках перенесите на 27

$(document).on('change', ':checkbox', function() {
        cssClass = $(this).closest('div.col-xs-3').data('css');
    });

то, что у вас на 55-57 строчках перенесите на 27 (у вас она до сих не перенесена)

переписал для продакшена
вылезла новая ошибка
открываем вкладку, загружаем урл, фильтруем- все работает
затем кликаем на другую категорию, открываем чекбоксы и после первого клика идет схлопывание
на тесте обновил

вроде разобрался
надо в событии pjax complete заново инициализировать pjax

вылезла новая напасть
сперва отмечаем чекбоксы,затем кликаем назад в браузере
шлются бесконечные запросы
например сюда google-analytics.com/collect
хром показывает тысячи запросов

Я не нашёл никаких тысячу запросов, только пару десятков, да и то они шлются по любому поводу (мышка из браузера вышла, url поменялся)

а так у вас всё схлопывается, поскольку вы зачем-то наверх перенесли id="page", а внизу заменили на id="goods-list". (а надо внизу чтобы было id="page")

и то, что у вас на 55-57 строчках перенесите на 27 (у вас она до сих не перенесена)

может файл закешировался
там счас новая версия скрипта

вот что получил https://imgur.com/a/Ex0A5Y8

Цитата:

Сообщение от гуня

может файл закешировался

Да, так всё время и происходит!

Цитата:

Сообщение от гуня

сперва отмечаем чекбоксы,затем кликаем назад в браузере
шлются бесконечные запросы
например сюда google-analytics.com/collect
хром показывает тысячи запросов

не надо было в событии pjax:complete заново инициализировать pjax, т. е. у вас на каждый ответ регистрируется обработчик, который вызывается при следующем ответе.

В общем у вас там немного запутанно получилось... Я думаю, что состояние кнопок лучше восстанавливать из состояния, которое хранится в search params.

Короче удалите всё, что у вас сейчас есть в category.js, и замените на это...

$(function() {	
	new Pjax({
        elements: "form",
        selectors: ["#goods-list"],
        scrollTo: false,
        cacheBust: false
    });
	
	$(".price-range").each(function() {
        var $minPrice = $(this).find("#min");
        var $maxPrice = $(this).find("#max");
        var min = $(this).data("price-min") || 0;
        var max = $(this).data("price-max") || 1000000;

        $(this).ionRangeSlider({
            type: "double",
            grid: true,
            min: min,
            max: max,
            from: $minPrice.val(),
            to: $maxPrice.val(),
            postfix: " ₽",
            onFinish: function (data) {
                $minPrice.val(data.from).trigger("change");
                $maxPrice.val(data.to).trigger("change");
            }
        });
    });

    $(document).click(function () {
        $(".multiselect").parent().find("ul").prop("style", "");
    });

    $(document).on("change", "#goods-filter :input, #goods-filter [type=hidden]", function() {
        $("#goods-filter :submit").click();
		$(this).closest("div.col-xs-3").find(".multiselect").parent().find("ul").show();
    });

    document.addEventListener("pjax:complete", function () {
		updateFields();

		$("#tabster").tabs();
        $(".bxslider").bxSlider({
            pagerCustom: "#bx-pager",
            infiniteLoop: false
        });

        $("a[rel=gallery]").fancybox([]);
        $("#goods-filter").show();
    });
	
	updateFields();

    $(".sidebar-menu").show();
	
	function updateFields() {
		var q = $.deparam(location.search.replace(/^\?/,""));
		
		$("form select[name='brands[]']").val(q.brands);
		$("form select[name='brands[]']").multiselect("refresh");
		
		$("form input[name=latest]").val(q.latest || "0");
		$("form input[name=sale]").val(q.sale || "0");
		$("form input[name=popular]").val(q.popular || "0");
		$("form input[name=available]").val(q.available || "0");
		
		$("form .price-range").data("ionRangeSlider").update(q.price);
	}

    $(document).on("click", ".treeview li a", function() {
        var li = $(this).closest("li");
        $(".treeview a.selected").removeClass("selected");
        $(this).addClass("selected");

        if (li.hasClass("collapsable")) return;

        li.find("div.hitarea:first").swapClass("expandable-hitarea", "collapsable-hitarea");
        li.swapClass("lastExpandable", "lastCollapsable");
        li.swapClass("expandable", "collapsable");
        li.find("ul:first").toggle();
    });

    $(document).on("click", ".items a[ajaxLink]", function() {
        var link = $('.treeview a[href="' + $(this).attr('href') + '"]');

        if (!link.length) return false;

        var li = link.closest("li");

        $(".treeview a.selected").removeClass("selected");
        link.addClass("selected");

        if (li.hasClass("collapsable")) return;

        li.swapClass("lastExpandable", "lastCollapsable");
        li.swapClass("expandable", "collapsable");
        li.find("div.hitarea:first").swapClass("expandable-hitarea", "collapsable-hitarea");
        li.find("ul:first").toggle();
    });
});