bind multiple functions to ajax success call

Question

Is it possible to bind multiple ajax functions to an ajax success call?

For instance, I have teh following code:

$('#deals').each(function() {
        var city_slug = $(this).data('city');
        $(".dealloader").show();
            //load deals
            setTimeout(loadDeals, 3000);
}); 

loadDeals function =

  function loadDeals() {    
    var city_slug = $("#deals").data("city");
     //var position = $(this).position();   
         $.ajax({
           cache: false,
           type: "POST",
           url: "get_deals.php",
           data: {'city' : city_slug},
            success: function(html) {
              showYelpStars(function() {
                $('.dealloader').hide();
                $('#deals').append(html);
              });
            }
         }).done(function( msg ) {
           //        
    });

}

yelp Stars Function =

 function showYelpStars(callback){
 $('.yelpreviews').each(function() {
     var passurl = $(this).data('yelpurl');
     var passname = $(this).data('name');
     var passstreet = $(this).data('address');
     var passcity = $(this).data('city');
     var passstate = $(this).data('state');
     var passreview = $(this).data('yelp');
     if (passreview.val = '1' && passname !== ""){
     $(this).load('yelpreviews.php', {yelp: passreview, name : passname, address : passstreet, city : passcity, state : passstate} );
     }
    });
    callback();
  }

Function showYelpStars triggers properly within the success call, however, being that its a live API call to yelp, it takes a few seconds to get the full results, All the content on the page is loaded and a few seconds later the yelp response comes in. I'm trying to figure out how to keep my loader showing until everything comes back as a success.
Thanks in advance!

Solution 1

I believe you can use .ajaxSuccess(function () {}) to add multiple functions, or you can just call multiple functions inside an anonymous function:

        success: function(html){
            run_function_one(html);
            run_function_two(html);
        }

Docs for .ajaxSuccess(): http://api.jquery.com/ajaxSuccess/

UPDATE

In a general sense if you want to show a loading message while an AJAX call is being made there are two easy ways to do it:

$.ajax({
    beforeSend : function () {/*show loading message now*/},
    success    : function () {/*hide loading message now*/}
});

OR

/*show loading message now*/
$.ajax({
    success : function () {/*hide loading message now*/}
});

On a side-note, you are selecting an element by ID which is guaranteed to only return a single result but you are then calling .each() on that selection. Either you don't need the .each() or you should change the selector to select something that can actually be multiple elements.

Solution 2

Implement a callback in your showYelpStars function:

function showYelpStarts(callback) {
  //Your other code here that loads the Yelp stars
  callback();
}

And then in your success callback:

success: function(html) {
  showYelpStars(function() {
    $('.dealloader').hide();
    $('#deals').append(html);
  });
}

Comments

[Mike]

showYelpStars(); is part of the success, but the page loads before the results are returned.

[Jasper]

@Mike I think I get you now. You only want to hide the loader once the AJAX request within showYelpStars() is complete. Well just use a callback function for the AJAX call within showYelpStarts() to hide the loader.

[Jasper]

Another approach is to do both AJAX requests at the same time and then hide the loader when they both resolve. This can be done using $.when().then();

[Mike]

I've updated the code to show the yelp function, Inserting callback(); at first gave me an error saying that callback is not a defined function, and now it doesn't process it at all. Am I using it wrong?

[Mike]

I'm somewhat new to jquery so its a bit of a learning curve/process, I've yet to come across $.when().then(); so am not sure how to use them. With that in mind, the end result is to be able to have all the php queries on the page wrapped in ajax so that no content is shown anywhere until its fully loaded.

[VNO]

Did you update your success callback from the loadDeals function? Also you will have to have a callback function every time you use showYelpStars or JS will throw (or check if there is a callback before running it). What you are doing is basically using a function as an argument to the showYelpStars function.

[VNO]

Also, you will need to use the success callback in your $.load function in Yelp, see the jQuery docs.

[Jasper]

@Mike Is the second AJAX request (to get the stars from yelp I presume) dependent on the first one being complete before it starts? Or can both be run at the same time? If they can be then you can reduce the lag your users experience on-load.

[Mike]

I've updated it yes, and have also edited the code on this page

[VNO]

And you are getting an error callback is not defined after that? Are you running showYelpStars anywhere else?

[Mike]

its not running anywhere else on the page, just there, not getting an error now, but its also not showing a response. ordinarily i'd atleast see the ajax call in firebug, its completely bypassing that.

[VNO]

let us continue this discussion in chat