Jquery событие на изменение контейнера товаров

[chemark23]

Добрый день! Знатоки, кто разбирается в jquery, подскажите, можно ли отловить действие, которое я сейчас опишу. У меня стоит filter pro от freelancer, и мне необходимо выполнять javascript каждый раз, когда контейнер product-grid меняется. То есть либо там подгружаются товары при переходе по страницам (фильтра, которые ajaxом берутся), либо при выборе опции у фильтра тоже страница меняется и мой яваскрипт выполняться должен. Я сперва вызывал мою функцию напрямую в js фильтра, в функции getCont - но если не кэшировано при переходе по страницам появлялись косяки. Помогите чем можете, хоть советами, хоть маленьким кусочком кодика. Ocstore 1.5.5.1.2

Змінено 7 жовтня 2016 користувачем chemark23

[Otvet]

$(window).on('hashchange', function() {

[chemark23]

$(window).on('hashchange', function() {

Спасибо, испробую)

[SooR]

Еще можно попробовать отлавливать ajaxComplete

$(document).ajaxComplete(function(event, request, settings) {
  if (request['status'] == 200) {
    if (settings['url'] == 'index.php?route=.. get/filter/products ..') {
      // Update content
    }  
    
    if (settings['url'] == 'index.php?route=.. get/products/options ..') {
      // Update content
    }      
  }   
});

[chemark23]

Не получается. Есть функция 

 

function equalheight(container){
            
        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0, a = 0;
            
            $(container).each(function(){
                $el = $(this);
                $($el).height('auto');
                topPosition = $el.position().top;
                if(currentRowStart != topPosition){
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++){
                        rowDivs[currentDiv].height(currentTallest);
                    }
                    
                    rowDivs.length = 0;
                    currentRowStart = topPosition;
                    currentTallest = $el.height();
                    rowDivs.push($el);
                } else {
                    rowDivs.push($el);
                    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
                }
                for(currentDiv = 0; currentDiv < rowDivs.length; currentDiv++){
                    rowDivs[currentDiv].height(currentTallest);
                    
                }
                              });
        }

Она вычисляет наибольшую высоту между соседними блоками на одном ряду. Вызываю обработчиками

.resize и .load . Всё работает, переходит по страницам, каждая страница выводится как и задумывалось.

Но в категориях у меня стоит FilterPro, очень хорошая и удобная вещь, отказываться я от него конечно не буду.

 

 

И так, есть файл filterpro_products.tpl - он можно сказать заменяет определенный блок в category.tpl, который выводит товары (product-list/grid). 

<div class="product-grid">
  <div>

     <div class="equalheight">
     </div>

     <div class="cart">
     </div>

  </div>
</div>

Работаем с блоком equalheight. Хочется на все страницах получать блоки equalheight одинаковой высоты. Но пока что (спасибо Otvet) получилось так. Первая страница с фильтром норм, последующая рушится, высота блоков становится непонятная. Если обновить страницу или заново на неё перейти, всё хорошо, я так понимаю с кэшем связано. Ещё фото прикреплю для наглядности. Прошу помощи

 

Вызываю в filterpro_products.tpl таким образом:

            $(document).ajaxComplete(function(event, request, settings) {
  if (request['status'] == 200) {
    if (settings['url'] == 'index.php?route=module/filterpro/getproducts') {
      equalheight('.equalheight');
    }  
    
    if (settings['url'] == 'index.php?route=module/filterpro/getproducts') {
      equalheight('.equalheight');
    }      
  }    
});

Змінено 8 жовтня 2016 користувачем chemark23

[chemark23]

Если тупо вызывать функцию каждые 100 миллисекунд всё пашет, но лишняя нагрузка на браузер

[mpn2005]

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

 

Попробуйте эту строку:

currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

Заменить на это:

$el.find('img').height(0);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
$el.find('img').height('auto');

Змінено 8 жовтня 2016 користувачем mpn2005

[mpn2005]

Точнее там немного не так:

Надо завети пустой div для выравнивания.

И туда писать разность высоты блока (с картинками нулевой высоты) и максимальной высоты (с картинками нулевой высоты).

 

Вот пример функции:

function setEqualHeight(cols, align) {
    var maxh = 0;
    $(cols).find('img').height(0);
    $(cols).each(function(){
        if($(this).height() > maxh) {
            maxh = $(this).height();
        }
    });
    $(cols).each(function(){
        $align = $(this).find(align).first();
        $align.height($align.height() + maxh - $(this).height());
    });
    $(cols).find('img').height('auto');
}

Вот приер вызова:

setEqualHeight('.product-grid > div', '.equalheight');

где .equalheight - это пустой див для выравнивания.

 

Ну и дописать на построчную работу всего этого.

Змінено 8 жовтня 2016 користувачем mpn2005

[chemark23]

Точнее там немного не так:

Надо завети пустой div для выравнивания.

И туда писать разность высоты блока (с картинками нулевой высоты) и максимальной высоты (с картинками нулевой высоты).

 

Вот пример функции:

function setEqualHeight(cols, align) {
    var maxh = 0;
    $(cols).find('img').height(0);
    $(cols).each(function(){
        if($(this).height() > maxh) {
            maxh = $(this).height();
        }
    });
    $(cols).each(function(){
        $align = $(this).find(align).first();
        $align.height($align.height() + maxh - $(this).height());
    });
    $(cols).find('img').height('auto');
}

Вот приер вызова:

setEqualHeight('.product-grid > div', '.equalheight');

где .equalheight - это пустой див для выравнивания.

 

Ну и дописать на построчную работу всего этого.

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

 

Теперь я уже в самом коде фильтра .js поставил вызов функции с задержкой в 1 сек, всё работает. Но это всеравно не верно, ведь сервер может и дольше обрабатывать запрос. Нужно как-то автоматизировать...

Змінено 8 жовтня 2016 користувачем chemark23

[mpn2005]

С задержкой это вообще не вариант.

С кртиками точно всё верно сделали?

Элемент .equalheight должен быть именно пустым. например в конце каждого блока.

Туда записывается дельтовка по высоте между блоком и максимальной выстотй.

Что и приводит к выравниванию.

P.S.: Этот блок логично расположить сразу после названия товара.

Змінено 8 жовтня 2016 користувачем mpn2005

[chemark23]

С задержкой это вообще не вариант.

С кртиками точно всё верно сделали?

Элемент .equalheight должен быть именно пустым. например в конце каждого блока.

Туда записывается дельтовка по высоте между блоком и максимальной выстотй.

Что и приводит к выравниванию.

P.S.: Этот блок логично расположить сразу после названия товара.

Я так и делал. Поместил equalheight каждому блоку, перед кнопкой корзины. Но я ещё раз попробую так сделать завтра, может просто не получилось.

 

А ещё потестировав всё, я точно понял причину. И так, если ставим задержку 100 миллисекунд, то примерно половина блоков уже нормально выглядят, другая половина ещё нет, 200 миллисекунд уже хватает для страницы. Нужно вызывать мою функцию в тот момент, когда произошел ajax запрос и при это все картинки блока .product-grid были загружены.

Змінено 8 жовтня 2016 користувачем chemark23

[chemark23]

Кто-нибудь может знает, как запустить функцию после того, как получен ajax ответ и все элементы этого запроса уже подгрузились в определенном блоке? Ну всю голову сломал, не могу ответ найти. Потому-что моему скрипту нужно знать высоты всех элементов, чтобы потом их переопределить

[mpn2005]

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

Скинте в личку ссылку с реализацией по моему примеру.

[chemark23]

Точнее там немного не так:

Надо завети пустой div для выравнивания.

И туда писать разность высоты блока (с картинками нулевой высоты) и максимальной высоты (с картинками нулевой высоты).

 

Вот пример функции:

function setEqualHeight(cols, align) {
    var maxh = 0;
    $(cols).find('img').height(0);
    $(cols).each(function(){
        if($(this).height() > maxh) {
            maxh = $(this).height();
        }
    });
    $(cols).each(function(){
        $align = $(this).find(align).first();
        $align.height($align.height() + maxh - $(this).height());
    });
    $(cols).find('img').height('auto');
}

Вот приер вызова:

setEqualHeight('.product-grid > div', '.equalheight');

где .equalheight - это пустой див для выравнивания.

 

Ну и дописать на построчную работу всего этого.

Благодарю, Ваш метод работает!