jQuery - Execute 2 functions synchronously

Question

I have created a submit function for each form created on my application. It's similar to the one written below.

$('form').submit(function(){
  //Some variable declaration
  $.ajax({
   type:'post',
   url:'someurl',
   data:formdata
   success:function(){
     console.log('form submitted');
   }
  });
});

No doubt this works fine. Now for one of the forms I want to update a certain element after the response is received, similar to this.

$('#customform').submit();
console.log('custom form submitted');

So in this case I want the message "custom form submitted" to be printed only after 'form submitted' message is printed to the console (Synchronous loading). Anyone to help?

Your title is misleading. Nothing _synchronous_ with your code — hindmost, Nov 28 '16 at 09:49
There is option of `$.ajax({async: false})` but this will freeze your browser, I suggest you not to do it, better approach will be if you make the second ajax call in the first's success callback — codtex, Nov 28 '16 at 09:50
Have you tried this: http://stackoverflow.com/questions/17809056/how-to-add-additional-fields-to-form-before-submit — Sibeesh Venu, Nov 28 '16 at 09:51

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Just include the code into the success function:

success:function(){
  console.log('form submitted');
  console.log('custom form submitted');
}

You can also add complete function, so the code will run no matter if error or success:

success:function(){
  console.log('form submitted');
},
complete: function() {
  console.log('custom form submitted');
}

as @Tomalak mentioned in the comment, the modern way to do it:

var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
.done(function() {
  alert( "second success" );
})
.fail(function() {
  alert( "error" );
})
.always(function() {
  alert( "finished" );
});

can read more here: jQuery.post( ) .done( ) and success:

edited May 23 '17 at 11:59

Community

1
1

answered Nov 28 '16 at 09:52

Yan Mayatskiy

353
3
12

1

The modern way to do this is to use the `.done()` and `.always()` promise callbacks. Compare: http://stackoverflow.com/questions/22213495/jquery-post-done-and-success – Tomalak Nov 28 '16 at 10:08
@Tomalak - Agree, but the OP added code with success function, other methods might confuse him if he follow guide or whatever reason. – Yan Mayatskiy Nov 28 '16 at 10:27
@YanMayatskiy Thanks I wanted exactly what you said in "the modern way" to do it. – SanketR Nov 28 '16 at 10:58
@SanketR- you should thank Tomalak, as he was the one who suggested to add it, but both of those ways are almost the same. – Yan Mayatskiy Nov 28 '16 at 11:06

score 0 · Answer 2 · answered Nov 28 '16 at 09:56

I would take off $("form").submit eventlistener after forms finished submit, and add a custom one into it's success function

$("form").submit(function(){
    $.ajax({
        type:"post",
        url:"someurl",
        data:formdata,
        success:function(){
            console.log("form submitted");
            $("form").off("submit");

            $("#customform").submit(function(){
                $.ajax({
                    type:"post",
                    url:"someurl",
                    data:modifiedFormdata,
                    success:function(){
                        console.log("custom form submitted");
                    }
                });
            }); 
        }
    });
});

The OP does not want to send two Ajax requests. – Tomalak Nov 28 '16 at 10:06 — Tomalak, Nov 28 '16 at 10:06

jQuery - Execute 2 functions synchronously

2 Answers2

Linked

Related