Wait until all social buttons loaded through jquery are fully loaded before displaying them

I have implemented social buttons on my WordPress site, neatly arranged in a bar.

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

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

            $(".dd_outer").fadeIn('slow')

}

The `str` parameter represents the post ID and `dd_outer` is the container div of the floating bar. I trigger the `update_social` function while loading post contents via AJAX.

While everything works smoothly, there's an issue where the bar sometimes fades in before all the social buttons are fully loaded. Is there a way to ensure that the entire bar appears only after all buttons have been loaded?

I initially thought utilizing `FadeIn` and `FadeOut` would suffice. Your insights are appreciated!

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>
javascriptjquerycss

Answer №1

Make sure to include the return statement in your functions as shown below:

function AddProductToCart(productId)
        {
            var cartItem = $(document.createElement("li"));
            // code to add product to shopping cart
            return true;
        }   

 function RemoveProductFromCart(productId)
        {
            // code to remove product from shopping cart
            return false;
        }

To use these functions, simply call them like this:

function manageCart(productID)
{
          $(".cart").fadeIn();
          if(AddProductToCart(productID)){
              alert("Product added to cart successfully!");
          } else {
              alert("Failed to add product to cart.");
          }
}

Answer №2

It's important to remember to call the code within a callback function after the fadeOut operation is complete. This way, the code will only run once the bar has faded out successfully. Give this a try:

function update_social(str)
{
  $(".dd_outer").fadeOut("slow");

   UpdateLikeButton(str);
   UpdateTweetButton(str);
   UpdatePlus1Button(str);

   //Delaying the fadeIn by 1 second to allow button functions to finish
   setTimeout(function(){
     $(".dd_outer").fadeIn('slow');
   },1000);


};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript within a button that has been generated by PHP

When trying to print a button using the code below, everything works as expected except for IE. How can I incorporate JavaScript into it? print "<td>" ."<a href='advancedview.php?id=$uniqueid' STYLE='text-decoration: none'> ...

phpjavascript

Disabling a button based on the result of a database query

Is there a way to dynamically enable or disable a button based on the result of a database query in JavaScript? I have managed to display an error message (with id="error") depending on the result, but toggling the button (with id="generate") doesn't ...

javascriptphpajaxdatabaseoracle

How can jQuery grep be used with dual arrays?

Could it be a problem with my syntax, or am I completely off track with my approach here? I'm working with two arrays that store attributes selected by the user. I'm then attempting to filter a JSON file using $.grep() to find pillows that match ...

javascriptjquery

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

jqueryhtmlajaxformsfile

The method of updating a variable based on the function result when the window is resized in

I need help updating a global variable on the fly whenever the window is resized. The variable called body_size should be updated with the result of the function below it. I know that the variable is out of scope, but I'm not sure how to pass it out o ...

jquery

Creating a bootstrap carousel configuration

I recently encountered a problem while using a single bootstrap carousel. The carousel contains multiple items/images to display, with one of them needing to be active initially. Below is the code snippet: <div id="myCarousel" class="caro ...

javascriptphphtmlcssbootstrap-4

"Utilize jQuery to trigger a click event at the current position

Is there a way to trigger a click event at the cursor's current position using jQuery? I know how to select an element and invoke a click, but I'm specifically interested in triggering a click at the location of the cursor. For instance, is it p ...

javascriptjqueryclick

Achieve an overlapping effect between absolutely positioned sibling divs without the need to specify a background color

Exploring the development of a swipe-to-action list component. <div class="list-container"> <div class="row"> <div class="content"> Sample Content 1 </div> <div class="action"> ...

cssangulardomcss-position

Set the background image width to 75% of the screen size

I want to use this image https://i.sstatic.net/gt30c.jpg as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid. Is it possible to achieve this ...

htmlcsstwitter-bootstrap

Adjust the image dimensions within the DIV container

I am currently working on creating my personal portfolio website. I have encountered an issue where the image inside a div element enlarges the size of the entire div as well. My goal is to keep the image slightly larger while maintaining the same size for ...

javascriptjquerycsshtml

attempting to transform promise-queue demo for use in a nodejs environment

Looking to adapt the promise-queue from a sample JQuery fiddle to Nodejs due to it meeting my needs. However, I'm running into some issues where my code is throwing an error: "TypeError: dfd.promise is not a function" return dfd.promise(); The g ...

javascriptnode.jspromisequeuebluebird

Utilizing JSX interpolation for translation in React JS with i18next

I am trying to utilize a JSX object within the interpolation object of the i18next translate method. Here is an example code snippet along with its result: import React from "react"; import {useTranslation} from "react-i18next&qu ...

javascriptreactjsjsxi18next

Guide on utilizing VueJS plugins in the browser without any added layers

I have decided to incorporate VueJS into an old system instead of using JQuery. However, I am facing difficulties in utilizing plugins like I would with JQuery. For instance, when trying to import the "vuetable" library directly into my HTML using script t ...

jquerymodulevue.jsvue-tables-2

Is it possible to set an onmousedown event to represent the value stored at a specific index in an array, rather than the entire array call?

Apologies if the question title is a bit unclear, but I'm struggling to articulate my issue. The challenge lies in this synchronous ajax call I have (designed to retrieve json file contents). $.ajax({ url: "/JsonControl/Events.json", dataTyp ...

javascriptjqueryhtmlajaxjson

Tips on including a series of selected items in an input box and later accessing them

Currently, I am selecting country regions by clicking on them and adding their name to an input field. This is necessary for sending the input value to the backend. For each country, I do the following: <input type="text" id="usp-custom-3"> functio ...

javascriptjquery

Having trouble parsing multiple JSON rows in JavaScript

I tried using the twitterapi to fetch my friends list in php and encoded the result as a json array. However, I'm facing difficulty parsing the json array in javascript. I have confirmed that the json array generated by the php code is valid. Below is ...

javascriptphpjsontwittertwitter-oauth

When using CSS @media print with inches, different dimensions are displayed post-printing

I'm currently working on a project that involves printing a single div from my webpage. However, I've encountered some issues with the @page tag not affecting the print output as expected. I attempted to manually set the dimensions of the element ...

htmlcssreactjsprintingmedia-queries

What is the best way to import an external file from the project's root directory using webpack?

I am currently working on a unique npm package that will allow for the integration of custom rules from the project root. This functionality is similar to how prettier searches for a .prettierrc file in the project root. For this particular package, I am ...

javascriptreactjsnpmwebpackwebpack-2

Ways to leverage the power of Reactivity APIs in Vue.js

In my Vue application, I am trying to create a Drop Down Menu by using a variable called "showDropDown". The idea is to use a v-if directive to check if the value of showDropDown is true, and then display the menu accordingly. Additionally, I want to imp ...

javascriptvue.jsvuejs3

What strategies can be implemented to avoid re-rendering in Angular 6 when the window is resized or loses focus?

I am currently working with a component in Angular 6.0.8 that consists of only an iframe element. Here is the code in page.component.html: <iframe [src]="url"> The logic for setting the URL is handled in page.component.ts: ngOnInit() { this.u ...

javascriptangulartypescript