2

I have a page with a kind of infinite scrolling. That means the homepage loads n posts everytime the user reach the bottom of the page. Every post has facebook comments loaded with the XFMBL way: after AJAX had loaded the post, the following script will parse the facebook plugin:

$( document ).ready(function() {
                    FB.XFBML.parse(document.getElementById("<?php echo $_id ?>"), function() {});
                });

Actually the "infinite scrolling" does not give me any problems but a the beginning. In fact when I load the whole page, supposing the site will firstly load 5 posts to fill the screen, every facebook comments will be refreshed 5 times. After that I have no other problems (every post loaded later doesn't give any problems).

Can you help me? Thanks in advance

user1315621
  • 3,044
  • 9
  • 42
  • 86

1 Answers1

1

Based on this answer:

FB.XFBML.parse() on individual element does nothing

What you can do is the following:

On your success callback (when requesting new posts), first, create an unique id for those posts. In the above example, you can use:

newDivName = "d" + String(new Date().valueOf());

Then cache the newly requested post (again, same example):

var $newhtml = $("<div id='" + newDivName + "'>" + html + "</div>");

Append it to wherever you have to; and finally, using that unique id, you can do:

FB.XFBML.parse($newhtml[0]);

Basically, the previous mentioned question should solve your question.

Now, it depends on which infinite scroll plugin you are using, but sure it will have a success callback where you can place this code. I don't know if you will access to every post individually or your AJAX request will return all posts in a row. You have to reach the point where you can identify each single of your post, so you can refresh them individually, and the parse the XFBML markup on the fly but individually, so it wont load more times than needed.

Hope it helps !

Community
  • 1
  • 1
avcajaraville
  • 9,041
  • 2
  • 28
  • 37
  • But what is the difference with my code? I have already used an unique id – user1315621 Jun 07 '14 at 09:48
  • You are using php on JS, that is the difference. Your call to document.getElementById("") returns null, thus, the FB.XFBML.parse is executed without parameters, so it is re-parsing all of the XFBML on the page. You have to find a way to output your posts with an id, and the target it through JS so you can use FB.XFBML.parse with the right ID for each post. – avcajaraville Jun 08 '14 at 08:40
  • Yeah but my php code prints a different id for every post. Isn't it the same? – user1315621 Jun 09 '14 at 08:43
  • Yes, on the first time your page is loaded, because PHP is compile on the server and then it is outputted as static content to the client. But once you have the document loaded and more parts (posts) are loaded, this content is not updated anymore, not via PHP, now its must be done on JS, not in PHP. And this two languages "dont" communicate between each other. PHP occurs on the server. JS occurs on the client. – avcajaraville Jun 09 '14 at 08:59
  • Of course, but I print a new function (the one that I wrote above) for every post I print. – user1315621 Jun 09 '14 at 10:27
  • So, this function comes in the ajax call properlly written. Then, I will suggest you to expand the code or post a git repository, so I can debug it properly. I cannot with the data you gave. – avcajaraville Jun 09 '14 at 10:31
  • Maybe I found the reason why I have the problem. Is it possible that, after every FB.XFBML.parse() the document.ready() is called? – user1315621 Jun 09 '14 at 10:36
  • 1
    Actually Im not sure, cause it doesnt matter hiw many documents.ready you have. It will only get fire one. So maybe yes. But now you said, you should use FB.XFBML.parse() inside the ajax success callback function. This way you will parse them when the ajax is completed. Try and let me know. – avcajaraville Jun 09 '14 at 10:47
  • 1
    I think you already had the parse call in the success function of ajax. At this point you really dont need document.ready, its already loaded (your ajax call should be already in the document.ready, right ? ). – avcajaraville Jun 09 '14 at 10:57
  • Actually I don't have the function inside the ajax success function. I'll try this evening and I'll let you know ;) I belive it will works! – user1315621 Jun 09 '14 at 11:47
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55359/discussion-between-user1315621-and-avcajaraville). – user1315621 Jun 10 '14 at 09:14
  • Ok guys I solved the problem. It wasn't that but I'll explain this evening why it didn't work. – user1315621 Jun 11 '14 at 10:28
  • Would be nice if you can give the answer on chat, and I edit the answer so we keep for further search. Good to hear it's finally solved ! – avcajaraville Jun 11 '14 at 10:31