2012-07-23 181 views
0

我使用pjax控制&頁面URL,所以內容& URL的一部分,將在不刷新當我按下導航按鈕進行更改,pjax和Facebook插件(PHP)

但現在我面臨的一個問題是我在頁面中插入了一個Facebook註釋插件,並且當第一次facebook註釋插件顯示時它是可行的,但是一旦我從其他頁面瀏覽頁面到Facebook註釋插件頁面,它就不再工作了,我試圖刪除'//connect.facebook.net/en_US/all.js#xfbml=1 & appId = xxxxxxxx',並在每次瀏覽此頁面時重新加載它,但結果仍然相同,任何人都可以請幫我解決這個麻煩?非常感謝。

我的代碼如下: -

// index.php文件的一部分

<div id="wrapper"> 
    <div id="content"> 
     <div id="navigation"> 
      <div id="timer">1</div> 
      <ul> 
       <li> 
        <a href="/html5/sample3/finished/index.php" title="You Get What You Give"> 
         You Get What You Give 
        </a> 
        <a href="/html5/sample3/finished/index.php?page=fortune-faded" title="Fortune Faded"> 
         Fortune Faded 
        </a> 
        <a href="/html5/sample3/finished/index.php?page=liar" title="Liar"> 
         Liar 
        </a> 
        <a href="/html5/sample3/finished/index.php?page=universal" title="Universal"> 
         Universal 
        </a> 
       </li> 
      </ul> 
     </div> 

     <div id="container"> 
      <div id="left"> 
       <?php echo $content['left']; ?> 
      </div> 

      <div id="right">    
       <?php echo $content['right']; ?> 
      </div> 
     </div> 

    </div> 

    <div class="clearer"></div> 
</div> 

<script src="js/jquery-1.7.1.min.js"></script> 
<script src="js/core.js"></script> 




//part of core.js 
var systemObject = { 
    run : function() { 
     this.content($('#navigation ul li a')); 
     this.pop(); 
    }, 
    content : function(obj) { 
     obj.live('click', function(e) { 
      var thisUrl = $(this).attr('href'); 
      var thisTitle = $(this).attr('title'); 
      systemObject.load(thisUrl); 
      window.history.pushState(null, thisTitle, thisUrl); 
      e.preventDefault(); 
     }); 
    }, 
    pop : function() { 
     window.onpopstate = function() { 
      systemObject.load(location.pathname); 
     }; 
    }, 
    load : function(url) { 
     $("#facebook-jssdk").remove();         //delete //connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxx 
     url = url === '/' ? '/ygwyg' : url; 
     jQuery.getJSON(url, { ajax : 1 }, function(data) {    //load content 
      jQuery.each(data, function(k, v) { 
       $('#' + k + ' section').fadeOut(200, function() { 
        $(this).replaceWith($(v).hide().fadeIn(200)); 
       }); 
      }); 
     }); 
    }, 
}; 
$(function() { 
    systemObject.run(); 
}); 



//part of index.php?page=fortune-faded 
<section> 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxx"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div> 
</section> 

回答

1

調用」 FB.XFBML.parse()」明確了AJAX成功函數內部,這將重新 - 解析html並呈現Facebook評論部分。

//facebook comments 
    var isFacebook = $data.find('.fb-comments'); 
    if(isFacebook != 'undefined') { 
     var scriptText = 'FB.XFBML.parse();'; 
     var scriptNode = document.createElement('script'); 
     scriptNode.appendChild(document.createTextNode(scriptText)); 
     contentNode.appendChild(scriptNode);     
    } 

爲您的代碼,寫內側載荷:

load : function(url) { 
     url = url === '/' ? '/ygwyg' : url; 
     jQuery.getJSON(url, { ajax : 1 }, function(data) { //load content 
      jQuery.each(data, function(k, v) { 

       //here check if the response data contains .fb-contents class 
       //Then call the FB.XFBML.parse() function  

       $('#' + k + ' section').fadeOut(200, function() { 
        $(this).replaceWith($(v).hide().fadeIn(200)); 
       }); 
      }); 
     }); 
    },