Tricky scope issue?

Question

Pretty straightforward, but it doesn't work the way it should.

$(function(){   
  (function(){  
     /**
      * @return boolean Depending on success
      */
     function saveOnServer(data){            
         var result = false;            
         $.ajax({                 
             url : "/post/write.ajax",
             data : data, 
             success : function(response){                      
                  if (response == "1"){                           
                      alert('Response is 1. OK');                          
                      result = true;
                  }
             }
         });             
         return result;
     }                  

     $("#save").click(function(e){              
          e.preventDefault();               
          // This inserts some stuff (on the server), but always returns FALSE
          if ( saveOnServer($("form").serialize())) ){                  
              alert('1'); // This expected to be alerted              
          } else {                 
              alert('0'); // <- But... This will be alerted
          }
     });
  })($);
});

The problem is that response var always returns 1, and it alerts Response is 1. OK as well. But...

result is always FALSE. Why?

I had the same problem sometime back. What fixed it was `promise` and `deferred` object. Its an `async` call so your `if` doesnt wait for the server to give back data. try `async: false` as well — krishwader, Jun 09 '13 at 17:08
He, he @roasted. Exactly. It's like buying a gun but no bullets. — Andy G, Jun 09 '13 at 17:30

score 3 · Accepted Answer · answered Jun 09 '13 at 17:09

You can't return the result of an ansynchronous request before this request has been done.

What you must do is to use the result in the success callback :

 function saveOnServer(data, dowith){
     $.ajax({
         url : "/post/write.ajax",
         data : data, 
         success : function(response){
              doWith(response == "1")
         }, error : function() {
              doWith(false)
         }
     });
 }

 $("#save").click(function(e){
      e.preventDefault(); 
      // This inserts some stuff (on the server), but always returns FALSE
      saveOnServer($("form").serialize()), function(result){
         if (result) {
            alert('1'); // This expected to be alerted
         } else {
            alert('0'); // <- But... This will be alerted
         } 
      });
 });

score 1 · Answer 2 · answered Jun 09 '13 at 17:09

1

if ( saveOnServer($("form").serialize())) ){

You are testing the return result from the function saveOnServer(). This returns with the value false immediately, it does not wait for the ajax call to complete.

answered Jun 09 '13 at 17:09

Andy G

19,232
5
47
69

score 1 · Answer 3 · answered Jun 09 '13 at 17:13

1

Like most AJAX questions it seems to have something to do with AJAX being async, meaning you want the function to return a value, but the ajax request hasn't returned with it. Try adding async:false to make sure this is the problem.

$.ajax({                 
             url : "/post/write.ajax",
             data : data,
             async:false,
             success : function(response){                      
                  if (response == "1"){                           
                      alert('Response is 1. OK');                          
                      result = true;
                  }
             }
         });

if this is it, you should think about redoing your code in a way that functionality is made inside the success function.

answered Jun 09 '13 at 17:13

Skarlinski

2,419
11
28

`async:false` is deprecated and should be avoided as it blocks the browser – John Dvorak Jun 09 '13 at 17:14
@JanDvorak Jquery ver 1.8.1, what should be used then if `async : false` is deprecated? – Yang Jun 09 '13 at 17:15
1

@metal_fan callbacks or promises. Don't let your code wait. See the duplicate question. – John Dvorak Jun 09 '13 at 17:17
What a mess! First time I cant understand the jquery Manuel(about the deprecation). I used -to use async:false as a sanity check if something has gone wrong with ajax calls. – Skarlinski Jun 09 '13 at 17:19
1

`async:false` might be useful for debugging, but I try to avoid it nevertheless. Don't ever let it get to the production! – John Dvorak Jun 09 '13 at 17:21

Tricky scope issue?

3 Answers3