1

I am calling two function on change event.

function1();
function2();

function1() : is a ajax call
function2() : is getting executed before function1().

Why is this happening?

Any help?

MaVRoSCy
  • 17,747
  • 15
  • 82
  • 125
eegloonew
  • 89
  • 1
  • 8
  • 2
    the function 1 has to accept a callback method, inside which you will call function2... the callback will be executed after the ajax call is finished – Arun P Johny Apr 10 '14 at 08:40
  • 1
    you can get a basic idea from http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Arun P Johny Apr 10 '14 at 08:41
  • You've to learn more about two concepts 1) Ajax calls and how they're asynchronous. 2) Javascript callbacks. Read on these two and you'll know why this is happening. – Niks Apr 10 '14 at 08:43

6 Answers6

3

The first A of Ajax means asynchronous, i.e. the regular Javascript program flow will continue while the Ajax request is still being processed. Therefore, function2 will be executed before the Ajax request initiated from function1 will be finished.

Solution: Every asynchronous method in Javascript will provide you with a so-called callback, which is a function that will be called after the asynchronous method finished. In jQuery.ajax() this callback is provided with the parameter success. If you put the call to function2 inside this callback, it will work.

function1() {
   ...
   $.ajax({
      url: '...',
      type: 'GET',
      success: function(data) {
         // this will be executed after the asynchronous method finishes
         function2();
      }
   });
}
devnull69
  • 16,402
  • 8
  • 50
  • 61
1
Please look at the code written below:

function1() {
  $.ajax({
  url: myurl,
  type: 'GET',
  async:false,
  success: function(response) {
     function2();
  }
 });
}

Please note here the "async:false" will ensure that the success method will call when the first function has been successfully executed. So you should use "async:false" to ensure that the function2() will call after function1().

Naveen Chandra Tiwari
  • 5,055
  • 3
  • 20
  • 26
0

if function1() is ajax function then call function2() on the success of your ajax

if you are using jquery ajax

function1() {
   $.ajax({
      url: myurl,
      type: 'GET',
      success: function(response) {
         function2();
      }
   });
}
Govind Singh
  • 15,282
  • 14
  • 72
  • 106
0

Call your function2 after successful response from Ajax.

function function1()
{
  //Ajax Call
  ..
  ..

  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    function2();
  }
}
Vitthal
  • 327
  • 1
  • 13
0

Normally Call like this

function1(function() { 

           function2(); 

        });

If it is Ajax call like this

function function1() {
    $.ajax({
        url: "url",
        type: 'POST',
    }).success(function (html) {
        function2();
    });
}

Fiddle

Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
0

jQuery ajax returns deferred object (http://api.jquery.com/category/deferred-object/), its really usefull for things like yours. By the way, deferred object support chaining pattern, so you can call more than one function.

So, to run one function after another you can do next

function ajaxCall(){
   return $.get('your/api/call', {param:1});
}

function fun1(){
   console.log('Function 1 was called');
}

function fun2(){
   console.log('Function 2 was called');
}


ajaxCall().done(fun1).done(fun2);

Or you can use $.when

$.when( $.get('your/api/call') )
   .then(function(){ alert(1); })
   .then(function(){ alert(2); });

Usefull links:

jQuery ajax

jQuery when

jQuery deferred

KillaBee
  • 139
  • 7