Do not show social buttons (downloaded via jquery) until they are fully loaded

Question

On my Wordpress site, I use social buttons collected in a panel.

These buttons are dynamically updated when the content is updated via jquery-ajax.

function update_social(str) { $(".dd_outer").fadeOut("slow"); UpdateLikeButton(str); UpdateTweetButton(str); UpdatePlus1Button(str); $(".dd_outer").fadeIn('slow') } 

where str is the message identifier. and dd_outer is a wrapper of a div of a floating strip. I call update_social when I call the function responsible for dynamically loading message contents through AJAX.

Everything works like a charm, but the problem is that sometimes the panel disappears before the social buttons are fully loaded. How can I make a total score until all buttons are loaded?

I thought FadeIn and FadeOut enough. Your gracious help.

Edit:

 function UpdateLikeButton(str) { var elem = $(document.createElement("fb:like")); elem.attr("href", "http://www.bag.com/Arabic/Arra2issia/"+str+"/"); elem.attr("send", "false"); elem.attr("layout", "box_count"); elem.attr("show_faces", "false"); $("#zzzz").empty().append(elem); FB.XFBML.parse($("#zzzz").get(0)); } function UpdateTweetButton(str) { var elem3 = $(document.createElement("a")); elem3.attr("class", "twitter-share-button"); elem3.attr("href","http://twitter.com/share"); elem3.attr("data-url","http://www.bagh.com/"+str+"/"); elem3.attr("data-counturl","http://www.bagh.com/"+str+"/"); elem3.attr("data-count", "vertical"); elem3.attr("data-via", "#"); elem3.attr("data-text",str); elem3.attr("data-lang","en"); $("#tweet").empty().append(elem3); $.getScript("http://platform.twitter.com/widgets.js",function(){ twttr.widgets.load(); }); } function UpdatePlus1Button(str) { var elem4 = $(document.createElement("g:plusone")); elem4.attr("href","http://www.bagh.com/"+str+"/"); elem4.attr("size", "tall"); $("#plus1").empty().append(elem4); $.getScript("https://apis.google.com/js/plusone.js"); } 

Original buttons:

  <div id="zzzz" ><fb:like href="<?php the_permalink();?>" send="false" show_faces="false" layout="box_count"></fb:like></div> <div id="plus1"><g:plusone size='tall' href='<?php the_permalink();?>'></g:plusone></div> <div id="tweet"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink();?>" data-counturl="<?php the_permalink();?>" data-count="vertical" data-via="#" data-text="<?php the_ID();?>" data-lang="en"></a></div> 

Answer 1

Add return to your functions as follows:

 function UpdateTweetButton(str) { var elem3 = $(document.createElement("a")); elem3.attr("class", "twitter-share-button"); elem3.attr("href","http://twitter.com/share"); elem3.attr("data-url","http://website/"+str+"/"); elem3.attr("data-counturl","http://website/"+str+"/"); elem3.attr("data-count", "vertical"); elem3.attr("data-via", "#"); elem3.attr("data-text",str); elem3.attr("data-lang","en"); $("#tweet").empty().append(elem3); return $.getScript("http://platform.twitter.com/widgets.js",function(){ twttr.widgets.load(); }); } function UpdatePlus1Button(str) { var elem4 = $(document.createElement("g:plusone")); elem4.attr("href","http://website/"+str+"/"); elem4.attr("size", "tall"); $("#plus1").empty().append(elem4); return $.getScript("https://apis.google.com/js/plusone.js"); } 

Name them as follows:

 function update_social(str) { $(".dd_outer").fadeOut("slow"); UpdateLikeButton(str); $.when(UpdateTweetButton(str), UpdatePlus1Button(str)).done(function(){ $(".dd_outer").fadeIn('slow'); }); } 

Answer 2

It seems to me that you may need to call the code in a callback from the fadeOut function so that it does not start until the panel disappears ... Try

 function update_social(str) { $(".dd_outer").fadeOut("slow"); UpdateLikeButton(str); UpdateTweetButton(str); UpdatePlus1Button(str); //Make fadeIn wait 1 second before running to allow button functions to complete setTimeout(function(){ $(".dd_outer").fadeIn('slow'); },1000); };