Share This not working in content called via AJAX

Question

I have a page this is pulling in content dynamically with AJAX request and JQuery. Once the content has loaded I use colorbox’s on complete function to Load any script that is needed. One of the things I am trying to load is a ShareThis button and my mark-up is as such:

HTML

<span class="st_sharethis_custom"></span>

Inside colorbox's onComplete function i have this.

  $.getScript("http://w.sharethis.com/button/buttons.js", function() {});
  var switchTo5x=false;
  stLight.options({publisher: "ur-a4a2b4d1-36da-c1a3-4eee-8eedd1e95feb"});

When I run the lightbox and hover over the ShareThis button I get the following error.

stButtons.messageQueueInstance is null

Any help on this would be greatly appreciated.

Thanks

Answer 1

getScript loads the script async. Thus in your code stLight.option() is called before the script has loaded. Try changing your code to:

$.getScript("http://w.sharethis.com/button/buttons.js", function() {
    var switchTo5x = false;
    stLight.options({publisher: "ur-a4a2b4d1-36da-c1a3-4eee-8eedd1e95feb"});
});

This tells jQuery to run you initialisation(stLight.options()) after it has completed the getScript() call.

Answer 2

You might have called button.js twice. One in the main page and the other one in the ajax page. You can try to call stButtons.locateElements() instead.