Facebook like button not displaying after refreshing a div by using load();

Question

I'm using a simple script to reload a div

$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");

The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.

Is there any way to force the button to re-draw?

Is load('# #mydiv') a typo? What is it you think .load() is suppose to do with # #myDiv? — dbf
– dbf, Commented Sep 16, 2012 at 13:33
It's not a typo. I found that putting it simply #myDiv does not refresh the PHP include that I have (using WordPress to generate a random post) but rather produces the same random post it drew when the page first loaded. — Edvinas Vor Paulauskas
– Edvinas Vor Paulauskas, Commented Sep 16, 2012 at 17:02

dbf · Accepted Answer · 2012-09-16 13:59:37Z

As I stated in my comment, I think the .load is misunderstood, as you stated in your question

I can see it updated inside the source, but the button is hidden for some reason

.. so with that in mind, I assume you have load functioning with the correct parameters.

You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.

So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.

$('#myDiv').fadeIn('300', function() { // callback when #myDiv is faded out (display:none;) $(this).load('url', function() { // callback when #myDiv is loaded with new content from the given 'url' $(this).fadeIn('300'); }) });

I've just tried this on the website. It seems to break the button I use to randomize the post completely. The code i use is: function nextPost() { $('#myDiv').fadeIn('300', function() { $(this).load('randompost.php', function() { $(this).fadeIn('300'); }) }); }
and how does the function nextPost() get called? In $(document).ready() or equivalent?
(Just brainstorming here) try calling FB.init() inside .load's callback, and see what happens.

ibtarek · Accepted Answer · 2012-09-16 13:50:20Z

The facebook button won't display because it is configured normally just AFTER document.load.

If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.

If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.

Otherwise, if you've come to that, you'll certainly have to review the application's design.

Embedding the JS SDK multiple times is not a good idea. To re-parse XFBML tags, FB.XFBML.parse is the designated method.

Collectives™ on Stack Overflow

Facebook like button not displaying after refreshing a div by using load();

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related