CODEWITHSUNDEEP
javascriptjqueryajax
matt
matt

Reputation: 44293

jQuery/Javascript: 2 function calls in line, wait for the other to finish?

I know this might sound silly but I have no idea how to do that …

$('#someButton').click(function(e) {
    e.preventDefault();

    // Do ajax stuff
    triggerAjaxSubmit('#signUpForm', false);


    modalSlide(modal, $('.loginTab'), $('.saveTab'));
});

On click on #someButton I want to submit an entire form via ajax. The function that does this is called triggerAjaxSubmit. This function has a simple $.ajax() function provided by jquery and does something on either success or error.

So what I wonder is how I can delay the next line modalSlide() until I get a success or error from the triggerAjaxSubmit() function. Right now triggerAjaxSubmit() gets fired and immediately after it the modalSlide() function fires. However I want the modalSlide() function only to fire once a success or error comes back.

Can I do that somehow? I mean like return "success" inside of the ajax() call and only than fire the modalSlide() function?

thank you in advance. Kind regards, Matt

edit:

   function triggerAjaxSubmit(formId, reset, callback) {

    $(formId).ajaxSubmit({
        type: "POST",
        cache: false,
        resetForm: reset,
        dataType: "text json",
        success: function(jsonObject, status) {

                // some other stuff

                console.log('success');

        },
        error: function(requestObject, status) {

            console.log('error');
        }
    });
}

triggerAjaxSubmit(form, true, function() {
            console.log('this is not happning')
            modalSlide(modal, $('.loginTab, .signUpTab'), $('.saveWeaveTab'), $('#newWeaveForm_title'));
        });

Upvotes: 1

Views: 421

Answers (4)

pimvdb
pimvdb

Reputation: 154818

You could return the deferred that $.ajax returns in triggerAjaxSubmit. Something like:

function triggerAjaxSubmit( .. ) {
  return $.ajax({ .. });
}

and:

triggerAjaxSubmit( .. ).done(function() {
  modalSlide( .. );
});

Edit: With the form plugin, you should be able to do this:

function triggerAjaxSubmit( .. , callback ) {
  $( .. ).ajaxSubmit({
    .. ,

    success: function() {
      console.log("success");
      callback();
    })
  });
}

and:

triggerAjaxSubmit( .. , function() {
  modalSlide( .. );
});

Upvotes: 3

Vivek
Vivek

Reputation: 641

call modalSlide function in success parameter of $.ajax() call

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

AJAX calls are asynchronous (unless you use the questionable async: false option in jQuery), so if you want to execute some code when the AJAX request receives a response, you'll need to put it in the success callback.

Depending on the rest of your code, this may be as simple as modifying the triggerAjaxSubmit function so that the callback supplied to the $.ajax() function includes the relevant code.

Or you may need to modify it a bit more to take a function as an argument, which is then provided as the success callback for the $.ajax() function.

Edit: I missed the "or error" in the question, hence why I only referred to the success callback. Same principle applies for the error callback, though.

Upvotes: 1

Ned Batchelder
Ned Batchelder

Reputation: 375484

You need to call your modalSlide function from the callback in your $.ajax() call.

Upvotes: 1

Related Questions