How do I make jQuery wait for an Ajax call to finish before it returns

Question

I have a  server side function that requires login  If the user is logged in the function will return 1 on success  If not  the function will return the login-page   I want to call the function using Ajax and jQuery  What I do is submit the request with an ordinary link  with a click-function applied on it  If the user is not logged in or the function fails  I want the Ajax-call to return true  so that the href triggers    However  when I use the following code  the function exits before the Ajax call is done   How can I redirect the user gracefully to the loginpage       my link   click      function          ajax           url    this  attr  href            type   GET           cache  false          timeout  30000          error  function                return true                     success  function msg                if  parseFloat msg                    return false                else                   return true

User · Answer

In modern JS you can simply use async await  like     async function upload         return new Promise  resolve  reject    gt              ajax               url    this  attr  href                type   GET               timeout  30000              success   response    gt                    resolve response                              error   response    gt                    reject response                                       Then call it in an async function like   let response   await upload

User · Answer

since async ajax is deprecated try using nested async functions with a Promise  There may be syntax errors   async function fetch my data  url   dat        async function promised fetch  url   dat           return new Promise  resolve  reject    gt               ajax               url    url              data   dat              type   POST               success   response    gt                   resolve JSON parse response                               error   response    gt                   reject response                                                 var  data   await promised fetch  url   dat          return  data     var  my data   fetch my data  server php    get my data 1

User · Answer

Since I don t see it mentioned here I thought I d also point out that the jQuery when statement can be very useful for this purpose   Their example looks like this     when    ajax   test aspx      then function  data  textStatus  jqXHR       alert  jqXHR status       Alerts 200       The  then  part won t execute until the  when  part finishes

User · Answer

I am not using   ajax but the   post and   get functions  so if I need to wait for the response  I use this     ajaxSetup  async  false      get

User · Answer

I think things would be easier if you code your success function to load the appropriate page instead of returning true or false   For example instead of returning true you could do   window location  appropriate page     That way when the success function is called the page gets redirected

User · Answer

It should wait until get request completed  After that I ll return get request body from where function is called   function foo         var jqXHR     ajax           url  url          type   GET           async  false              return JSON parse jqXHR responseText

User · Answer

The underlying XMLHttpRequest object  used by jQuery to make the request  supports the asynchronous property  Set it to false  Like   async  false

User · Answer

If you don t want the   ajax   function to return immediately  set the async option to false     quot  my link quot   click      function          ajax           url    this  attr  href            type   GET           async  false          cache  false          timeout  30000          fail  function                return true                     done  function msg                if  parseFloat msg                    return false                else                   return true                                       But  I would note that this would be counter to the point of AJAX  Also  you should be handling the response in the fail and done functions  Those functions will only be called when the response is received from the server

User · Answer

Instead of setting async to false which is usually bad design  you may want to consider blocking the UI while the operation is pending   This can be nicely achieved with jQuery promises as follows      same as   ajax but settings can have a maskUI property    if settings maskUI  true  the UI will be blocked while ajax in progress    if settings maskUI is other than true  it s value will be used as the color value while bloking  i e settings maskUI  rgba 176 176 176 0 7      in addition an hourglass is displayed while ajax in progress function ajaxMaskUI settings        function maskPageOn color       color can be ie   rgba 176 176 176 0 7   or  transparent          var div       maskPageDiv            if  div length     0                  document body  append   lt div id  maskPageDiv  style  position fixed width 100  height 100  left 0 top 0 display none  gt  lt  div gt        create it             div       maskPageDiv                      if  div length     0                div 0  style zIndex   2147483647              div 0  style backgroundColor color              div 0  style display    inline                       function maskPageOff             var div       maskPageDiv            if  div length     0                div 0  style display    none               div 0  style zIndex    auto                       function hourglassOn             if     style contains  html hourGlass     length  lt  1      lt style gt    text  html hourGlass  html hourGlass     cursor  wait  important      appendTo  head               html   addClass  hourGlass              function hourglassOff                html   removeClass  hourGlass               if  settings maskUI   true  settings maskUI  transparent        if    settings maskUI            maskPageOn settings maskUI           hourglassOn               var dfd   new   Deferred          ajax settings           fail function jqXHR  textStatus  errorThrown                if    settings maskUI                    maskPageOff                    hourglassOff                              dfd reject jqXHR  textStatus  errorThrown              done function data  textStatus  jqXHR                if    settings maskUI                    maskPageOff                    hourglassOff                              dfd resolve data  textStatus  jqXHR                    return dfd promise        with this you can now do   ajaxMaskUI       url  url      maskUI  true    or try for example  rgba 176 176 176 0 7      fail function  jqXHR  textStatus  errorThrown        console log  error     textStatus      done function  data  textStatus  jqXHR        console log  success     JSON stringify data          And the UI will block until the ajax command returns  see jsfiddle

[jquery] How do I make jQuery wait for an Ajax call to finish before it returns?

Examples related to jquery

Examples related to ajax