jQuery masonry 多个ajax调用问题

发布于 2024-11-17 10:51:24 字数 1294 浏览 2 评论 0原文

我在使用 jQuery Masonry 插件进行 ajax 调用时遇到问题。

我有一个过滤器函数，它从服务器获取一些非常标准的 html 内容（div，无图像）：

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() 时，它的内容很好，但 masonry 没有格式化它：

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

    filter();

    return false;

});

当我在 Ajax 成功函数中调用 masonry 时，它正在处理第一次运行，我真的看不出问题是什么......有人有任何想法吗？

谢谢！

詹姆斯

原文

I'm experiencing an issue using the jQuery Masonry Plugin with an ajax call.

I have a filter function which is getting some pretty standard html content from the server (divs, no images):

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' 
                });
            }
        });

}

This is then called on page load like so:

if (searchResults.length > 0) {

    filter();

}

This is all working as expected. However, when I try and call filter() from a click, it's getting the content fine but masonry isn't formatting it:

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

    filter();

    return false;

});

As I'm calling masonry in the Ajax success function and it's working on the first run, I can't really see what the issue could be... anyone got any ideas?

Thanks!

James

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〃安静 2024-11-24 10:51:24

你需要告诉 masonry 在 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'
      });
    });
});

Masonry 有一个 .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();
});

You need to tell masonry to "refire" after the ajax load finishes:

example:

$( 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'
      });
    });
});

Masonry has a .reload() but I found it didnt really work well unless you were appending or prepending. To call it when completely changing the contents I had to do it like this.

Maybe a better solution here:

$(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();
});

回复收藏 0 原文