Cant access variable inside jQuery $.post

Question

I went through many posts about this, but didnt find any solution working for me - cleaned up code:

  $('#form-new').submit(function(e){
    e.preventDefault();

    $curForm = $(this);
    $textbox = $( '.new-box' ,this);

    window.tmp_input_ok = false;

    var wasError = false;
    if( $.trim($textbox.val()) == "" ){  
      wasError = true; 
    }    

    if( wasError ){
      //possible message
    } else{

      var jqxhr = $.post(
        $(this).attr('action'),
        $(this).serialize(),
        function(data, textStatus, jqXHR){

          if( data=="200" ){
            console.log('post OK'); //this shows in console!
            window.tmp_input_ok = true;  
          } else{
            console.log('not OK');       
          } 

        }
      ).fail(function() {
        console.log('POST fail)');
      });    

    }

    //however, window.tmp_input_ok is false here so the textbox does not empty:
    if(window.tmp_input_ok == true) $textbox.val(''); 
      else console.log('input not ok :('); //and this is outputted to console

  }); 

Originaly, there was just a var tmp_input_ok = false initialization and then working with the tmp_input_ok variable, but it wasnt working so I tried global window... does not work either... I am starting to be desperate.

Answer 1

Your if statement is executed before the call is finished.

$.post is an async call and the rest of the code continues while the post is processing

You are already using .fail(), you can add .always() if you want to execute your if statement always on completion or add it to your .success() if you only want to check it when the call succeeds, similar to this:

if (wasError) {
    //possible message
} else {
    var jqxhr = $.post($(this).attr('action'), $(this).serialize(), function (data, textStatus, jqXHR) {
        if (data == "200") {
            console.log('post OK'); //this shows in console!
            window.tmp_input_ok = true;
        } else {
            console.log('not OK');
        }

        // either add it here if you only want to process it on success
        if (window.tmp_input_ok == true) $textbox.val('');
        else console.log('input not ok :(');
    }).fail(function () {
        console.log('POST fail)');
    }).always(function(){ // or add it here if you always wan to execute on completion regardless of fail or success
        if (window.tmp_input_ok == true) $textbox.val('');
        else console.log('input not ok :(');
    });
}

Answer 2

The reason your XHR request has an onSuccess callback is because the call is asynchronous.

Take for instance this simple bit of code:

$.get(
    '/foo',
    function(){
        alert("data received");
    }
)

alert ("End of script reached");

The success callback is set up to something that will be called when the request is successfully received, rather than when that line of code is read by the browser.

Often you'll see the "End of script reached" alert before the "data received" alert simply because a full XHR request will take over 100 milliseconds, while reading those few lines will take a fraction of that.

Code that depends on having a response for a state must be called by the callback. There's far too many ways to do this for me to go into detail.