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?

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?

• javascript
• jquery
• function
• variables

Share Improve this question Follow edited Oct 30, 2012 at 15:41 Marnix asked Oct 30, 2012 at 12:58 MarnixMarnix 30311 gold badge33 silver badges1414 bronze badges 3

• 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 Commented Oct 30, 2012 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 Commented Oct 30, 2012 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 plete. – Jasper Commented Oct 30, 2012 at 13:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As it's asynchronous the data will only be available after the ajax call is pleted, 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());
    }
}

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

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.