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?

The reason why is given below by answers, but no solution as to what you are trying to do. That's because it is hard to do so without more of an idea of what you are trying to do. For example, a good way to fix the problem in this code is to move the alert up two lines, but that may very well not work in your actual code. — Jasper, Oct 30 '12 at 13:04
Thanks for your answer. In the file handle_time.php I'm checking for validation and it will be edited in the database. If it's edited succesfully it will return true; And variabeltje has to get the value true. Then after the alert I want to check if it's true or not and display things or not. — Marnix, Oct 30 '12 at 13:11
Well, then I suppose you shouldn't be trying to do so below the `$.post()` call (which is right after the request is *sent*) Instead, you should do it inside the function you pass to `$.post()` which will be executed after request is complete. — Jasper, Oct 30 '12 at 13:15

adeneo · Accepted Answer · 2012-10-30T15:48:10.723

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());
    }
}

Thank you very much. Just one more question, when I put this one in the function: $(this).html($(this).find('input').val()); How do I pass the $(this) into the XHR.done(function(data) {? — Marnix, Oct 30 '12 at 14:03
You need to figure out the scope, and what `this` is, then if needed you use a variable or pass it to a function like you would anything else really, to avoid scoping issues. — adeneo, Oct 30 '12 at 15:18

score 2 · Answer 2 · edited May 23 '17 at 12:21

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...
  }
);

score 1 · Answer 3 · answered Oct 30 '12 at 13:01

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.

JavaScript get variable from function

3 Answers3