wie Maurerarbeit auf Ajax Call

Question

initialisieren Ich zeige facebook Beiträge über Facebook Graph und mit Mauerwerk. Standard Mauerwerk Initialisierung:

$('#facebook-feed').masonry({ 
     itemSelector: '.grid-item', 
     percentPosition: true 
}); 

Standard Facebook-Beiträge:

$(document).ready(function() { 

     var accessToken ='xxx'; 

     //$("#mainContainer").show(); 
     $.ajax({ 
      url: 'https://graph.facebook.com/v2.5/abc/posts?fields=full_picture,id,is_published,link,story,message,name,updated_time,description,from,source,caption,created_time,permalink_url,type,target&access_token=' + accessToken + '&limit=5', 
      type: 'GET', 

      success:function(result){ 
       $.each(result.data, function(index, value) { 
        var link; 
        var imgSrc = ''; 
        var name = ''; 
        var message = ''; 
        if(typeof(value.link) != "undefined" && value.link !== null) { 
          link = value.link; 
         } else { 
          link = value.permalink_url; 
         } 
         if(typeof(value.full_picture) != "undefined" && value.full_picture !== null) { 
          imgSrc = value.full_picture; 
         } 
         if(typeof(value.name) != "undefined" && value.name !== null) { 
          name = value.name; 
         } 
         if(typeof(value.message) != "undefined" && value.message !== null) { 
          message = value.message; 
         } 
        $("#facebook-feed").append(
         '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+ 
          '<div class="thumbnail">'+ 
          '<img src="'+imgSrc+'" alt="'+name+'" >'+ 
          '<div class="caption">'+ 
          '<h3>'+name+'</h3>'+ 
          '<p>'+message+'</p>'+ 
          '</div>'+ 
          '</div>'+ 
         '</a></div>' 
        ); 
       }); 
      }, 
      error:function() { 
       $("#facebook-feed").html('Failed To Load Resource'); 
      } 
     }); 
    }); 

Jetzt habe ich Last mehr Vorschubtaste, die verwendet wird, mehr RSS-Feeds auf Begrenzung basiert zu laden.

$(document).on("click", "#load-more-feeds", function() { 
     $.ajax({ 
      url: $("#hidden-next-feed").val(), 
      type: 'GET', 
      success: function(result) { 
       $("#hidden-next-feed").val(result.paging.next); 
       $.each(result.data, function(index, value) { 
        var link; 
        var imgSrc = ''; 
        var name = ''; 
        var message = ''; 
        if(typeof(value.link) != "undefined" && value.link !== null) { 
         link = value.link; 
        } else { 
         link = value.permalink_url; 
        } 
        if(typeof(value.full_picture) != "undefined" && value.full_picture !== null) { 
         imgSrc = value.full_picture; 
        } 
        if(typeof(value.name) != "undefined" && value.name !== null) { 
         name = value.name; 
        } 
        if(typeof(value.message) != "undefined" && value.message !== null) { 
         message = value.message; 
        } 
        var moreFeeds = '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+ 
         '<div class="thumbnail">'+ 
         '<img src="'+imgSrc+'" alt="'+name+'" >'+ 
         '<div class="caption">'+ 
         '<h3>'+name+'</h3>'+ 
         '<p>'+message+'</p>'+ 
         '</div>'+ 
         '</div>'+ 
        '</a></div>'; 
        var $moreFeeds = $(moreFeeds); 
        // Append new blocks 
        $("#facebook-feed").find("div.grid-item:last").after($moreFeeds); 
        // Have Masonry position new blocks 
        $("#facebook-feed").find("div.grid-item:last").masonry('appended', $moreFeeds); 
        /*$("#facebook-feed").find("div.grid-item:last").after(
         '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+ 
         '<div class="thumbnail">'+ 
         '<img src="'+imgSrc+'" alt="'+name+'" >'+ 
         '<div class="caption">'+ 
         '<h3>'+name+'</h3>'+ 
         '<p>'+message+'</p>'+ 
         '</div>'+ 
         '</div>'+ 
        '</a></div>' 
        );*/ 
       }) 
      }, 
      error:function() { 
       $("#facebook-feed").html('Failed To Load Resource'); 
      }, 
     }) 
    }) 

der Facebook-Beiträge kommt in Ordnung, aber das Mauerwerk nicht funktioniert. Wie löst man das? Danke im Voraus.

Answer 1

Sie können $('#facebook-feed').masonry('reloadItems'); verwenden, um Objekte neu zu laden, aber wenn es nicht funktioniert, können Sie die Mauerwerksinstanz mit $('#facebook-feed').masonry('destroy'); zerstören und erneut initialisieren.

Sie können alle verfügbaren Methoden überprüfen here.