CODEWITHSUNDEEP
javascriptjquery
cyprian
cyprian

Reputation: 497

how to run function after another one completes

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?

Upvotes: 1

Views: 4052

Answers (4)

Satpal
Satpal

Reputation: 133403

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

Upvotes: 1

Sander Moolin
Sander Moolin

Reputation: 448

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.

Upvotes: 0

Pavel Gatnar
Pavel Gatnar

Reputation: 4053

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

Upvotes: 0

Eric Herlitz
Eric Herlitz

Reputation: 26257

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

Upvotes: 0

Related Questions