Question

I’ve been pulling my hair out trying to fix this issue.

if I go to: https://rbzexercise.herokuapp.com/workouts/4

the Facebook like button shows up, but if I click on another workout (i use ajax to get to another workout) the like button disappears. When I refresh the like button returns. I know it has something to do with my use of jquery, but I dont know how to fix it.

I’m using rails 3.2.1, ruby 1.9.2. I hope thats enough info, if not let me know.

Thanks for any help!

Update:
the facebook code is in script within a partial

     <script>
     $(document).ready(function() {
     $("div.dright").append('<div class="fb-like" data-href="<%= likepage_workout_url(workout) %>" data-send="true" data-width="450" data-show-faces="true"></div>')
     });
     </script>

its run via my show.js.erb file:

     $("div.descbar").html("<%= escape_javascript(render('workouts/title', :workout => @workout)) %>");

Answer 1

You’re not calling FB.XFBML.parse on the HTMLElement object that contains the FB Like button. When you switch workouts, in your event handler, use the following at the end of the function:

FB.XFBML.parse($(".dright")[0]);

This means: grab the .dright container, and have the FB JS SDK parse its contents for any Like buttons (and any other markup-based FB social plugins).

NB: You cannot use this on the element itself, but the containing element: hence my grabbing your .dright container, and not each .fb-like element.