如何在另一个完成后运行功能

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?

Answer 1

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 ie 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();
});

Answer 2

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;
};

Answer 3

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;
}
};

Answer 4

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.