how to run function after another one completes

Question

I have problem to run function after another completes. I try callback like in this post but this dont work Execute jquery function after another function completes so maybe i do something wrong or my case is more complicated.

So I have function that run when I submit the form

$("#search-form").submit(ajaxSubmit(addSearchfuntion)); // addSearchfuntion is callback

function ajaxSubmit(callback) {
    var $form = $(this);
    var settings = {
        data: $(this).serialize(),
        url: $(this).attr("action"),
        type: $(this).attr("method")
    };

    $.ajax(settings).done(function(result) {
        var $targetElement = $($form.data("ajax-target"));
        var $newContent = $(result);
        $($targetElement).replaceWith($newContent);
        $newContent.effect("slide");
    });

    callback();

    return false;
};

After this when I get new form to my page i want to run another function that will handle this new form.

 function addSearchfuntion(){
     $('.Amount').change(updateQuantity);
 }

So how to solve this case?

oops. pasted the wrong link.. check this question.. http://stackoverflow.com/questions/30606021/javascript-execute-function-after-other-function-completes?lq=1 — Rifky, May 02 '16 at 17:41

Satpal · Accepted Answer · 2016-05-02T17:47:36.617

You need to use anonymous function to bind the submit event handler. As of now you are executing the ajaxSubmit() method and binding its return value i.e. false as event handler.

$("#search-form").submit(function(){
    ajaxSubmit.bind(this)(addSearchfuntion);
});

And, invoke the callback method in the done() callback method of $.ajax()

$.ajax(settings).done(function(result) {
    // Your existing code
    ....
    ....
    // call the callback
    callback();
});

score 0 · Answer 2 · answered May 02 '16 at 17:35

You where pretty close, you need to place the callback call inside the method that is asynchronous

function ajaxSubmit(callback) {
    // this will be executed linear
    var $form = $(this);
    var settings = {
        data: $(this).serialize(),
        url: $(this).attr("action"),
        type: $(this).attr("method")
    };

    // this will be executed async
    $.ajax(settings).done(function(result) {

        // anything in here must be handled async, hence put your callback here

        var $targetElement = $($form.data("ajax-target"));
        var $newContent = $(result);
        $($targetElement).replaceWith($newContent);
        $newContent.effect("slide");

        // call the callback
        callback();
    });

    // this will be executed linear and most likely before the async method
    return false;
};

score 0 · Answer 3 · answered May 02 '16 at 17:38

Simply return function in ajaxSubmit:

function ajaxSubmit(callback) {
  return function(){
  var $form = $(this);
  var settings = {
    data: $(this).serialize(),
    url: $(this).attr("action"),
    type: $(this).attr("method")
  };

  $.ajax(settings).done(function(result) {
    var $targetElement = $($form.data("ajax-target"));
    var $newContent = $(result);
    $($targetElement).replaceWith($newContent);
    $newContent.effect("slide");
  });

  callback();

  return false;
}
};

score 0 · Answer 4 · edited May 23 '17 at 12:34

Place your callback execution in your ajax(settings).done section. It'd look like this:

$.ajax(settings).done(function(result) {
    var $targetElement = $($form.data("ajax-target"));
    var $newContent = $(result);
    $($targetElement).replaceWith($newContent);
    $newContent.effect("slide");

    if (typeof callback === "function") {
        callback();
    }
});

You should also check to make sure callback exists before calling it, which is the thinking behind the if (typeof callback)... check. See this answer for more information.

how to run function after another one completes

4 Answers4