jquery - Javascript: load AddThis upon clicking

I have been puzzling with this for quite a while and can't get it to work. Here is the situation. I want a SOCIAL MEDIA bar to ONLY appear if people click some DIV. It should not be loaded unless people click the div. For Social Media I have ADD THIS, and the GOOGLE+1 icon. But I can not get them to load by such an external call. Here is the code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ".dtd"> 
<html xmlns=""> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" /> 
<script type="text/javascript" src=".6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html');
            $.getScript('js-part.js');
    });

});
</script> 
</head> 
<body> 


<div id="socialmedia"> 
 Show the Social Media
</div> 

<div id="loadhere"> 

</div> 


</body> 
</html>

In the HTML part I have the HTML info that needs to be loaded:

html-part.html:

<!-- AddThis Button BEGIN --> 
    <div class="addthis_toolbox addthis_default_style "> 
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
        <a class="addthis_button_tweet"></a> 
        <a class="addthis_counter addthis_pill_style"></a> 
    </div> 

    <!-- AddThis Button END --> 
    <g:plusone size="medium" id="gg"></g:plusone> 
</div>

For the JS part I am struggling. Here is what needs to be loaded:

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> 
<script type="text/javascript" src=".js#pubid=ID"></script> 
<script type="text/javascript" src=".js"></script>

I have tried to call them one by one:

$.getScript('.js#pubid=ID');
$.getScript('.js');

But I guess this is a crossdomain problem...?

If I use PHP to obtain the content, and load a local PHP file, it still does not work. Before spending one more day on this... is this possible to achieve?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3/1999/xhtml"> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" /> 
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html');
            $.getScript('js-part.js');
    });

});
</script> 
</head> 
<body> 


<div id="socialmedia"> 
 Show the Social Media
</div> 

<div id="loadhere"> 

</div> 


</body> 
</html>

In the HTML part I have the HTML info that needs to be loaded:

html-part.html:

<!-- AddThis Button BEGIN --> 
    <div class="addthis_toolbox addthis_default_style "> 
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
        <a class="addthis_button_tweet"></a> 
        <a class="addthis_counter addthis_pill_style"></a> 
    </div> 

    <!-- AddThis Button END --> 
    <g:plusone size="medium" id="gg"></g:plusone> 
</div>

For the JS part I am struggling. Here is what needs to be loaded:

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> 
<script type="text/javascript" src="http://s7.addthis./js/250/addthis_widget.js#pubid=ID"></script> 
<script type="text/javascript" src="https://apis.google./js/plusone.js"></script>

I have tried to call them one by one:

$.getScript('http://s7.addthis./js/250/addthis_widget.js#pubid=ID');
$.getScript('https://apis.google./js/plusone.js');

But I guess this is a crossdomain problem...?

If I use PHP to obtain the content, and load a local PHP file, it still does not work. Before spending one more day on this... is this possible to achieve?

Share Improve this question asked Jun 9, 2011 at 1:26 joh-3

Add a ment |

3 Answers 3

Sorted by: Reset to default 8

The problem here is that addthis code fires on dom ready event. When you load it with jQuery the dom has already been loaded so the code is not executed. The fix is to use addthis.init() method to force the code execution after you load the code. There is no cross domain problem or anything.

Note that according to addthis documentation it should be possible by just passing a get variable through the widget url like this http://s7.addthis./js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1 but it didn't work for me.

I would also remend you store the html in a string variable, that way you don't have to do unnecesary requests for a little static html.

See working demo here: http://jsfiddle/z7zrK/3/

$("#socialmedia").click(function(){
    var add_this_html =
    '<div class="addthis_toolbox addthis_default_style ">'+
    '<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>'+
    '<a class="addthis_button_tweet"></a>'+        
    '<a class="addthis_counter addthis_pill_style">'+
    '</a>'+ 
    '</div>'+
    '<g:plusone size="medium" id="gg"></g:plusone>';

    $("#loadhere").html(add_this_html);
    $.getScript('http://s7.addthis./js/250/addthis_widget.js#pubid=xxx',
    function(){
        addthis.init(); //callback function for script loading
    });  

  $.getScript('https://apis.google./js/plusone.js');
});

Just used amosrivera's answer (huge kiss to you btw :) and ran into another issue :

Addthis object can only be loaded once, so when you have multiple addthis toolboxes on the same page it may only work for the first clicked toolbox.

The workaround is to do :

if (window.addthis){ window.addthis = null; }

before calling

addthis.init();

Here's what I've just done to start loading the buttons only when an article is hovered long enough :

HTML:

<article data-url="someUrl" data-title="someTitle" data-description="someDesc">
  .....
  <div class="sharing">
    <div class="spinner"></div>
    <div class="content"></div>
  </div>
</article>

JS :

// Only throw AJAX call if user hovered on article for more than 800ms
// Then show the spinner while loading buttons in a hidden div
// Then replace the spinner with the loaded buttons
$(function() {
  var t;
  $("article").hover(function() {
    var that = this;
    window.clearTimeout(t);
    t = window.setTimeout(function () {
      sharing_div = $('.sharing', that);
      add_this_html = 
'<div class="addthis_toolbox addthis_default_style "> \
  <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> \
  <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> \
</div>';
      if (sharing_div.find('.content div').length == 0) {
        sharing_div.find('.spinner').show();
        sharing_div.find('.content').html(add_this_html);
        sharing_div.find('addthis_toolbox').attr({
          'addthis:url': $(that).attr('data-url'),
          'addthis:title': $(that).attr('data-title'),
          'addthis:description': $(that).attr('data-description'),
        })
        if (window.addthis){ window.addthis = null; } // Forces addthis to reload
        $.getScript('http://s7.addthis./js/250/addthis_widget.js#pubid=xxx&async=1',
          function(){
            addthis.init();
            setTimeout(function() {
              sharing_div.find('.spinner').hide();
              sharing_div.find('.content').show();
            }, 2500);
        });
      }
    }, 800);
  });
});

To answer your official question, yes, I believe this is possible to achieve.

But, to further elaborate on this, I believe what you may want to try working with is the order in which your external scripts and external markup are loaded. An interesting situation we find when dealing with asynchronous actions such as these, is that they don't always plete, load, or execute in the order you would like unless you specifically say so. jQuery lets you do this through some callbacks you can pass to the getScript and load methods.

There also should not be a "cross-domain" problem with javascript files on other domains, though there certainly is when loading HTML.

I'm not sure if this will exactly solve the problem you're having, but it certainly feels like this is worth a try. You could try making sure the markup loads before the scripts do:

$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html', function() {
                // this waits until the "html-part.html" has finished loading...
                 $.getScript('js-part.js');
            });
    });
});

Now, we should also ask about how you are building your "js-part.js" file. (You only showed what you wanted, not what you've built.) If this is truly a JS file, you can't just use some HTML <script> tags to load other JS files. (You would instead want to continue calling getScript in this file, or use one of several other approaches to get your other JS stuff loaded, such as manually appending script elements to the document's head, or using another library, etc...)

Good luck!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Javascript: load AddThis upon clicking - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)