Why is this returning me 'undefined'

Question

Trying to run a script, (test.al();) and inside test.al, its called getcrypt.php();, the php script is on a webserver, and it is working. Currently, these are my scripts

JS

var getcrypt = {
    php: function () {

        $.ajax({
            url: "server.com/return.php",
            type: "POST",
            async: true,
            data: "id=getit",
            success: function (msg) {
                var v = msg.match(/^.*$/m)[0];
                return v;
            }
        });
    }
}

var test = {
    al: function () {
        a = getcrypt.php();
        alert(a);
    }
}

PHP

<?php
    $id = $_POST['id'];
    if ('getit' == $id){
        $value = 'VALUE';
        echo $value;
    }else{
        echo 0;
    }
?>

In this way, it will show an alert with 'unidefined', and if i add a alert(v); right before return v, it will show me 'VALUE', but not able to use it outside the variable...

var getcrypt = {
    php: function () {

        $.ajax({
            url: "server.com/return.php",
            type: "POST",
            async: true,
            data: "id=getit",
            success: function (msg) {
                var v = msg.match(/^.*$/m)[0];
                alert(v);
                return v;
            }
        });
    }
}

This will give me an alert with the correct value (AFTER THE 'undefined')

Maybe this could help: http://stackoverflow.com/questions/5403342/js-return-result-from-nested-ajax-success-function — vodka, Feb 15 '13 at 11:32

Asken · Answer 1 · 2013-02-15T11:37:56.720

4

This is because of the asynchronous call you're making. The return is only for the success function and not for the php function.

To get the value out you would need to write:

var value;

var getcrypt = {
  php: function (callback) {

    $.ajax({
        url: "",
        type: "POST",
        async: true,
        data: "id=getit",
        success: function (msg) {
            var v = msg.match(/^.*$/m)[0];
            alert(v);
            callback(v);
        }
    });
  }
}

getcrypt.php(function(v) {
  alert(v);
  // This happens later than the below
  value = v;
});

// The below will still not work since execution has already passed this place
// alert will still return undefined
alert(value);

edited Feb 15 '13 at 11:37

answered Feb 15 '13 at 11:29

Asken

7,679
10
45
77

funny if the return is fast enough the last alert will work because you set the value global ;) – EaterOfCode Feb 15 '13 at 11:35
I don't think a php call is that fast so will probably never happen. – Asken Feb 15 '13 at 11:36
no it will not but why is there `value = value` that confused me a bit – EaterOfCode Feb 15 '13 at 11:37
its okay ;) everyone makes mistakes at some point, we just like to call them bugs – EaterOfCode Feb 15 '13 at 11:39

score 1 · Answer 2 · answered Feb 15 '13 at 11:31

The problem is jQuery ajax works with callbacks and does not work with return value's so you need to add an callback to your getcrypt function so say

var getcrypt = {
php: function (callback) {

    $.ajax({
        url: "server.com/return.php",
        type: "POST",
        async: true,
        data: "id=getit",
            success: function (msg) {
                var v = msg.match(/^.*$/m)[0];
                callback(v);
            }
        });
    }
}

so now if you call

getcrypt.php(function(returnVar){
   alert(returnVar)
});

you will get an alert with VALUE

score 0 · Answer 3 · answered Feb 15 '13 at 11:30

$.ajax returns immidiately (well, almost :)) upon calling, before the response is received. You should rewrite your code to accomodate to this fact, something like this;

var getcrypt = {
    php: function(){
        $.ajax({
           //..other params ..//
           success: function(msg){
               var v = msg.match(/^.*$/m)[0];
               alertResponse(v);
           }
        });
    },
    alertResponse: function(processedResponse) {
         alert(v);
    }
}

var test = {
al: function(){
        getcrypt.php();
    }
}

If you need your response in test object, you move alertResponse to that object and call it from success method. I think this tutorial might be useful for you to learn javascript event-driven programming model.

score 0 · Answer 4 · answered Feb 15 '13 at 11:32

$.ajax calls are async. So what you get is the return value of $.ajax (when the request is sent, before a response is received). It is only when the browser receives a response to the ajax call that the success callback is run, as a seerate process from the $.ajax call. In other words the return value of $.ajax will always be null. I'm not sure it's possible to do anythging with the return value of the success callback, you need to put your logic (or a call to another function with the logic) in the success callback itself, in the same way you did with the alert in your final example

Why is this returning me 'undefined'

4 Answers4