2016-04-08 6 views
0

私はfacebookのグラフを使ってFacebookのポストを表示しています。 デフォルトの石工の初期化:ajaxの呼び出しで石工を初期化する方法

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

デフォルトのFacebookの投稿:

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

は今、私は限界に基づいてより多くのフィードをロードするために使用される負荷よりフィードボタンを持っています。

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

Facebookの投稿はうまくいっていますが、石工は機能していません。これを解決するには?前もって感謝します。

+0

小さなサイドのコメント:あなたは本当に必要ではないjqueryで多くのことをやっています。 $( "#hidden-next-feed")。val() - これはバニラjsの方がはるかに高速で正確です:document.getElementById( 'hidden-next.feed')。 jsを最初に使用し、本当に必要なときにのみjqueryを使用してください。たとえば、jqueryベースのプラグインの場合。 ajaxには、fetch apiがあります。 – luschn

答えて

0

$('#facebook-feed').masonry('reloadItems');を使用してアイテムをリロードすることはできますが、動作しない場合は、$('#facebook-feed').masonry('destroy');でストーンインスタンスを破棄してもう一度再初期化できます。

利用可能なすべてのメソッドhereを確認することができます。

+0

いいえ、それは動作していません。使用すると、1つのフィードしか表示されません。重複していると考えてください。 –

+1

あなたは 'destroy'を試しましたか?そしてそれをもう一度再初期化しましたか? –

+0

ありがとう。私のために働いた。 :) –

関連する問題