JavaScript get variable from function

Question

I'm no professional in JavaScript and I've seen searching a long time for this on the internet.

I'm having a problem getting a variable from another function. My code is looking like this:

var variabeltje;
$.post('js/ajax/handle_time.php', {'time': $(this).find('input').val()},
  function(data) {
    alert(data);
    variabeltje=data;
  }
);
alert(window.variabeltje);

The variable variabeltje must get the information from data. When I put the alert below variabeltje=data it's working, but I need the data variable after the function.

Edit:

I have changed it to what people said, I now have this:

                var XHR = $.post('js/ajax/handle_time.php', {time: $(this).find('input').val()});
                XHR.done(function(data) {
                    console.log(data); 
                    getData(data);
                }); 

                function getData(data) {
                if(data == 'true') {
                    alert(data);
                    $(this).unbind('keypress');
                    $(this).html($(this).find('input').val());
                }
                }

But now the $(this) isn't passing into the function. How can I solve this?

Answer 1

As it's asynchronous the data will only be available after the ajax call is completed, so you'll have to modify your code to work with that and wait until after the ajax is done to do your stuff:

var XHR = $.post('js/ajax/handle_time.php', {time: $(this).find('input').val()});

XHR.done(function(data) {
    console.log(data);
});

or in other function:

function XHR(time){
   return $.post('js/ajax/handle_time.php', {time: time});
}

function doStuff(element) {
    XHR($(element).find('input').val()).done(function(data) {
        console.log(data);
    });
}

EDIT:

based on your edit, it looks like it's a scoping issue:

var self = this,
    XHR = $.post('js/ajax/handle_time.php', {time: $(self).find('input').val()});

XHR.done(function(data) {
    console.log(data); 
    getData(data);
}); 

function getData(data) {
    if(data == 'true') { //normally you'd try to pass true as a boolean, not string
      alert(data);
      $(self).unbind('keypress').html($(self).find('input').val());
    }
}

Answer 2

This is because the $.post method runs asynchronously.

Please take a look at this question on SO.

Edit: You can change your code and put the part after post method inside the body of the anonymous function triggered on success. As follows:

$.post('js/ajax/handle_time.php', {'time': $(this).find('input').val()},
  function(data) {
    alert(data);
    variabeltje=data;
    alert(window.variabeltje); // or whatever function you need to call, call it here...
  }
);

Answer 3

The problem is that post method is executed asynchronously. This is, a post is sent to the server but execution flow continues so your alert is trying to access a value that wasn't set since post haven't returned yet.

You could use ajax method if you need a synchronic execution.