JQuery Masonry многократная проблема вызова ajax - PullRequest
Новая
       7

JQuery Masonry многократная проблема вызова ajax

0 голосов
/ 27 июня 2011

У меня возникла проблема при использовании плагина jQuery Masonry с вызовом ajax.

У меня есть функция фильтра, которая получает довольно стандартный HTML-контент с сервера (divs, без изображений): 

var searchResults   = $('div#results');

function filter() {

    var text        = 'text';
    var orderby     = 'order';
    var source      = 'source';
    var media       = 'media';
    var format      = 'format';
    var tags        = 'tags';

    var fetchUrl    = '/search/results/ ' + text + '/' + orderby + '/' + source + '/' + media + '/' + format + '/' + tags;


    $.ajax({
            type: "POST",
            url: fetchUrl,
            cache: false,
            data: "after=000000",
            success: function(data){ 

                searchResults.html(data);

                $('#results').masonry({
                  columnWidth: 360, 
                  itemSelector: '.related' 
                });
            }
        });

}

Затем он вызывается при загрузке страницы следующим образом: 

if (searchResults.length > 0) {

    filter();

}

Все работает как положено.Тем не менее, когда я пытаюсь вызвать filter() одним щелчком мыши, содержимое получается нормально, но кладка не форматирует его: 

$('nav#view-types a#grid, nav#view-types a#list').click(function() {

    filter();

    return false;

});

Поскольку я вызываю кладку в функции успеха Ajax, и она работаетпри первом запуске я не могу понять, в чем проблема ... у кого-нибудь есть идеи?

Спасибо!

Джеймс

Ответы [ 2 ]

3 голосов
/ 15 сентября 2013

Вы должны указать масонству "refire" после окончания загрузки ajax:

пример: 

$( document ).ajaxComplete(function() {
  console.log("Ajax finished"); //remove this if you want, useful for debugging
      $(document).ready(function() {
      $('#content').masonry({
       columnWidth: 260, //change this accordingly
       itemSelector: '.item'
      });
    });
});

У масонства есть .reload (), но я обнаружил, что он не очень хорошо работаетесли вы не добавляете или не добавляете.Чтобы позвонить при полном изменении содержимого, мне пришлось сделать это следующим образом.

Может быть, лучшее решение здесь: 

$(document).ready(function() {
      $('#admin_content').masonry({
       columnWidth: 260,
       itemSelector: '.masonry-item',
       isAnimated:true,
                animationOptions: {
                    duration: 500,
                    easing:'swing',
                    queue :false
               }
      });
    });
$( document ).ajaxComplete(function() {
    $('#admin_content').masonry('reloadItems').masonry();
});
1 голос
/ 11 сентября 2011

Вам нужно вызвать $ ('# results'). Masonry ('reload') после того, как вы добавили свои элементы.

...