jquery ajax async is not working accordingly

Question

This is my javascript code:

function getData(param1,param2) {
    $.ajaxSetup({async:false});
    var request = $.ajax({
        url: "http://someurl.com/xyz.php?p1="+param1+"&p2="+param2,
        type: "POST",
        async: false,
        success: function(imageurl){
            return imageurl;
        }
    });
}

and here is the PHP page in which, I am calling this function:

<html>
<head>
     <script src="jquery-1.9.1.js"></script>
        <script src="http://myjsdomain.com/myjs.js"></script>
        <script>

            function callMyFunction(box) {
                alert(box);
                box.value = "Waiting....";
                var data = getData('param1', 'param2'); 
                box.value = data;
                alert(data);    //here I am getting "Undefined"
            }
        </script>
</head>
<body>
        <?=$_SERVER["REMOTE_ADDR"]?><br />
        <input type="button" onclick="callMyFunction(this)" value="Click Here" />
</body>
</html>

Now When I am calling this getData() function in My php page then it returns "Undefined".

When I alert data in JavaScript code ,it alerts correct value but still "undefined" in PHP page.

It is an Ajax ASYNC problem but even after setting it false , I am still facing this problem.

I debugged it with firebug and I can see that the URL (from where I am getting the data using ajax) is returning correct value but it is not receiving on PHP page where I am calling this function.

Any suggestions to make this work

Change `POST` to `GET` since you're passing your data in the url. — Jack, Apr 30 '14 at 14:21
From the docs - As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success(). — Jay Blanchard, Apr 30 '14 at 14:21
Is the `getData()` function also on the PHP page, or included through a file anywhere? From that `Undefined` error it seems not. — Styphon, Apr 30 '14 at 14:25
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Bergi, Apr 30 '14 at 14:29

tarmaq · Accepted Answer · 2014-04-30T14:36:46.763

4

You have to return result from function getData, return in success function is not enough - it's in diferent scope

function getData(param1,param2) {
  var result;
  var request = $.ajax({
    url: "http://someurl.com/xyz.php?p1="+param1+"&p2="+param2,
    type: "GET",
    async: false,
    success: function(imageurl){
      result = imageurl;
    }
  });
  return result;
}

Or you can do it asynchronously this way:

function changeValue(box, param1, param2) {
  box.value = "Waiting....";
  var request = $.ajax({
    url: "http://someurl.com/xyz.php?p1="+param1+"&p2="+param2,
    type: "GET",
    async: true,
    success: function(imageurl){
      box.value = imageurl;
    }
  });
  return result;
}
function callMyFunction(box) {
  alert(box);
  changeValue(box, 'param1', 'param2')
}

edited Apr 30 '14 at 14:36

answered Apr 30 '14 at 14:23

tarmaq

422
2
7

You need to change the type. It's a `GET`, not a `POST`. – Styphon Apr 30 '14 at 14:26
Don't use `async:false`! – Bergi Apr 30 '14 at 14:30
@Bergi what should I use to make async:flase? – Despicable Apr 30 '14 at 14:48
@Despicable: See my answer, the code didn't fit well into a comment – Bergi Apr 30 '14 at 15:29

score 2 · Answer 2 · edited May 23 '17 at 10:28

2

Just as an alternative to the accepted answer, here's how to do it properly in an asynchronous way with promises. See the duplicate question How do I return the response from an asynchronous call? for more explanation.

function getData(param1, param2) {
    return $.ajax({
        url: "http://someurl.com/xyz.php",
        data: {p1:param1, p2:param2},
        type: "GET" // I think this is fine since you didn't send any data
    });
}
function callMyFunction(box) {
    alert(box);
    box.value = "Waiting....";
    getData('param1', 'param2').then(function(imageurl) { 
        box.value = imageurl;
        alert(imageurl);
    });
}

edited May 23 '17 at 10:28

Community

1
1

answered Apr 30 '14 at 15:28

Bergi

630,263
148
957
1,375

***Promises*** is stable ? – Kiquenet Mar 04 '16 at 08:24
@Kiquenet: Sure they are. And even when they are not natively available in some browsers, there are many libraries that implement them. Even jQuery comes with deferreds (which are used in this answer here). – Bergi Mar 04 '16 at 12:34

jquery ajax async is not working accordingly

2 Answers2