Question

1. I have a function that load a jquery ui accordion (differents accordions based on different id)

2. 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;
       }
   });
   

3. The “displayFB” function is:

   function displayFb(id){
       $.get('/fbcomments/' + id, function(data) {
           $("#facecomm").append(data);
           });
       }
   

   Where http://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>
   

4. 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.

5. 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.

6. Thank you for reading and try to help!!

UPDATE:

7. I made this little demo…I can’t make it work…maybe jsfiddle is not the best place to insert Facebook Comments: My First Fiddle

8. Maybe is important to say that I use cakephp on my site…

9. Please remember that my code works perfect at first accordion call and displayFb function…then when I change to other accordion…it crash…

10. Thank you again!!

UPDATE2:

11. This is another question of a user….very similar to mine. Please see that his doesn’t use an accordion…but jquery in common….maybe somebody could understand better than me the answer…

Answer 1

Where http://www.myweb.com/fbcomments/id is:

So you’re effectively adding the DIV element #fb-root and loading the JS SDK over and over again and place it inside your document … which is not a good idea.

Try loading only the .fb-comments element via AJAX, and run FB.XFBML.parse on that new piece of content afterwards.

Embed #fb-root and the JS SDK in your page from the beginning, and only once.