how can i reload jquery functions after Infinite s

Question

im using a jquery plugin for infinite scrolling, and its working perfectly except for the client side scripts that need to run.

my infinite scrolling script is:

<script type="text/javascript">
    $('.infinite-container').waypoint('infinite', {
      container: 'auto',
      items: '.infinite-item',
      more: '.infinite-more-link',
      offset: 'bottom-in-view',
      loadingClass: 'infinite-loading',
      onBeforePageLoad: $.noop,
      onAfterPageLoad: $.noop
    });
</script>

what i think i need to do is somehow call my server side scripts using this:

onAfterPageLoad:

my key issue is that my twitter and facebook buttons arnt loading. all i can see is the word "twitter" and facebook buttons dont show up at all. But on the initial page they load no problem.

i somehow need to load this again:

<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/en_GB/all.js#xfbml=1&appId=***********";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

as well as these:

    <script>
        $(document).ready(function() {
            $('.container').stickem();
        });
    </script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

im pretty new to javascript/jquery so any advice is welcome. thanks.

Answer 1

You typically want to place all your code inside a function that gets called after your page's DOM has finished building. In jQuery, you do this with the ready function:

<script type="text/javascript">
    $(document).ready(function() {
        $('.infinite-container').waypoint('infinite', {
            container: 'auto',
            items: '.infinite-item',
            more: '.infinite-more-link',
            offset: 'bottom-in-view',
            loadingClass: 'infinite-loading',
            onBeforePageLoad: $.noop,
            onAfterPageLoad: $.noop
        });
    });
</script>

facebook and twitter already do this, as do most other libraries that have been developed for use by anyone-on-the-web, so you usually only have to make sure your own scripts don't kick in until after the HTML source has been parsed enough to build the initial element tree (the "DOMContentLoaed" event).

Answer 2

For twitter you need:

twttr.widgets.load()

See: https://dev.twitter.com/discussions/890

For facebook you need:

FB.XFBML.parse();

See: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

This can be called below the dynamically rendered buttons.

onAfterPageLoad is used for calling a function, if using it just be careful to call it like this:

onAfterPageLoad: functionName

not

onAfterPageLoad: functionName()

However for the issue of the fb/twitter buttons I think you are better off placing the code immediately below the buttons.