Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 22.01.2019, 20:00
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

вижу
счас вылез баг- при первой загрузке чекбоксы схлопываются,дальше нормально работает
для проверки надо загрузить новую вкладку без параметров и выбрать чекбокс
Ответить с цитированием
  #12 (permalink)  
Старый 22.01.2019, 20:12
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

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

Последний раз редактировалось гуня, 22.01.2019 в 20:16.
Ответить с цитированием
  #13 (permalink)  
Старый 22.01.2019, 20:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от гуня
задача сделать так чтобы не мигало
Пост №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 (у вас она до сих не перенесена)

Последний раз редактировалось Malleys, 22.01.2019 в 21:16.
Ответить с цитированием
  #14 (permalink)  
Старый 23.01.2019, 01:26
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

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

Последний раз редактировалось гуня, 23.01.2019 в 09:47.
Ответить с цитированием
  #15 (permalink)  
Старый 23.01.2019, 20:49
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

вроде разобрался
надо в событии pjax complete заново инициализировать pjax
Ответить с цитированием
  #16 (permalink)  
Старый 24.01.2019, 00:15
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

вылезла новая напасть
сперва отмечаем чекбоксы,затем кликаем назад в браузере
шлются бесконечные запросы
например сюда google-analytics.com/collect
хром показывает тысячи запросов
Ответить с цитированием
  #17 (permalink)  
Старый 24.01.2019, 00:50
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

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

и то, что у вас на 55-57 строчках перенесите на 27 (у вас она до сих не перенесена)
Ответить с цитированием
  #18 (permalink)  
Старый 24.01.2019, 00:53
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

может файл закешировался
там счас новая версия скрипта
Ответить с цитированием
  #19 (permalink)  
Старый 24.01.2019, 01:06
Кандидат Javascript-наук
Отправить личное сообщение для гуня Посмотреть профиль Найти все сообщения от гуня
 
Регистрация: 22.08.2009
Сообщений: 105

вот что получил https://imgur.com/a/Ex0A5Y8
Ответить с цитированием
  #20 (permalink)  
Старый 24.01.2019, 06:10
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от гуня
может файл закешировался
Да, так всё время и происходит!
Сообщение от гуня
сперва отмечаем чекбоксы,затем кликаем назад в браузере
шлются бесконечные запросы
например сюда 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();
    });
});

Последний раз редактировалось Malleys, 24.01.2019 в 06:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ajax фильтрация гуня Элементы интерфейса 0 20.12.2018 12:11
AJAX навигация без якоря(Требуется помощ) Radik55rus AJAX и COMET 11 14.08.2014 10:34
AJAX навигация??? GooglaMor AJAX и COMET 2 25.11.2013 04:37
ajax, history, навигация, адресная строка и индексация. все в одном. firsttinman AJAX и COMET 3 24.10.2011 18:14
навигация AJAX кнопки назад - вперед FRIE AJAX и COMET 7 19.08.2010 13:38