msearch2 + masonry

Привет.

Вообщем у меня есть блок новостей. Все блоки складываются кирпичеком через скрипт masonry.js.
То есть когда страница загружается, срабатывает функция вызова скрипта и блоки нормально показываются.

Но когда делаешь фильтрацию новостей через msearch2 функция не срабатывает (из-за аякса).

Можно как-нибудь запускать функцию, каждый раз при фильтрации… или же есть более правильное решение?
Павел
Павел
23 июня 2015, 06:54
modx.pro
2 896

Комментарии: 11

    Павел
    Павел
    23 июня 2015, 10:17
    А можно поподробней пожалуйста, не могу разобраться.
    Максим Кузнецов
    Максим Кузнецов
    23 июня 2015, 10:17
    $(document).ajaxStop(function(){
	//повторная инициализация masonry.js тут	
});
      Василий Наумкин
      Василий Наумкин
      23 июня 2015, 10:18
      Скорее
      $(document).on('mse2_load', function() {
	//повторная инициализация masonry.js тут	
});
        Павел
        Павел
        23 июня 2015, 10:19
        А подскажите пожалуйста, где это вызывать?
          Максим Кузнецов
          Максим Кузнецов
          23 июня 2015, 10:30
          Оум… Ну смотрите:

          У вас, наверняка, или внутри тега head или перед закрывающим тегом body есть строчки в духе:
          <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scripts/masonry.js"></script>

<script type="text/javascript">
	$(document).ready(function(){ 
		$('#container').masonry(); //этим вы инициализируете ваш masonry скрипт
	});
	//здесь может быть еще код.
</script>
          — в том месте, где написано «здесь может быть еще код», сразу после }); пишите:

          $(document).on('mse2_load', function() {
	$('#container').masonry();
});
          — ну и "$('#container').masonry();" нужно заменить на ваш вызов masonry, само собой.
            Павел
            Павел
            23 июня 2015, 11:53
            Перепробовал, не получается
            <script src="assets/js/masonry.pkgd.min.js"></script>
		<script type="text/javascript">
        	$(document).ready(function(){ 
        		$('#mse2_results').masonry({
        		    columnWidth: 280,
                    itemSelector: '.grid_item',
                    gutter: 30
        		});
        	});
        	$(document).on('mse2_load', function() {
            	$('#mse2_results').masonry({
        		    columnWidth: 280,
                    itemSelector: '.grid_item',
                    gutter: 30
        		});
            });
        </script>
              Павел
              Павел
              23 июня 2015, 11:59
              Вызываю через mfilter:

              [[!mFilter2? 
		   &element=`pdoResources`
		   &parents=`22` 
		   &filters=`tv|video`
		   &includeContent=`1`
		   &includeTVs=`img_preview,HitsPage`
		   &tpl=`tpl_video`
		   &tplOuter=`tpl_video_outer`
		   &tplFilter.row.default=`tpl_video_chekbox`
		   &tplFilter.outer.default=`tpl_video_filter`
]]
                Максим Кузнецов
                Максим Кузнецов
                23 июня 2015, 15:40
                Если не проблемно — киньте линк на сайт.

                И у masonry, похоже, есть свой метод для обновления — container.masonry(«reloadItems»);. Возможно, вам вызывать на событие on('mse2_load') нужно его.
                  Павел
                  Павел
                  23 июня 2015, 15:43
                  Скинуть сайт сюда не могу, если только в личку…
                  Проблему решил, скидываю код:

                  <script>
	function masonryFunc(){
            var $container = $('#mse2_results');
            $container.masonry({
                columnWidth: 280,
                itemSelector: '.grid_item',
                gutter: 30,
                isAnimated: true,
                
            });
        } 
        setTimeout(masonryFunc,300);
        
        $(document).on('mse2_load', function() {
           $('#mse2_results').masonry('destroy');
           setTimeout(masonryFunc(),300);
        });
</script>
                    Максим Кузнецов
                    Максим Кузнецов
                    23 июня 2015, 15:46
                    Ну и отлично.
                    И да, если у вас будет время — посмотрите, все-таки, метод reload в этом скрипте — уничтожать и заново создавать древо, на мой взгляд, выглядит как костыль и грозит утечкой памяти.
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        11