I have a function that load a jquery ui accordion (differents accordions based on different id)
When I click on the tab titled "Facebook Comments" I do:
$("#myaccordion").bind('accordionchange', function(event, ui) {
id = $("#myaccordion").data('id');
switch (ui.newHeader.text()) {
case "Facebook Comments":
displayFb(id);
break;
}
});
The "displayFB" function is:
function displayFb(id){
$.get('/fbcomments/' + id, function(data) {
$("#facecomm").append(data);
});
}
Where www.myweb.com/fbcomments/id is:
<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/es_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="<?php echo '/fbcomments/'.$id ?>" data-num-posts="10" data-width="220"></div>
When I load the homepage, then choose an accordion, then open a Facebook Comments, it works perfect. If I reload the page and choose another accordion, work perfect again. The problem is when I choose another accordion or the same again without reload the whole page. The accordions loads very well, all the data on them (some tabs of images, text, videos, etc), but the facebook comments don't appear.
I tried:
loading the #fb-root and facebook comment <script> on the main layout....doesn't work.
adding FB.XFBML.parse(); into displayFB function....doesn't work
adding FB.XFBML.parse(); into a $(document).ready(function(){} ...doesn't work.
Thank you for reading and try to help!!
