jQuery ajax return value

Question

How can I return the value "pinNumber" from jquery ajax so I can append it outside of the ajax. Here is my code

var x = pinLast + 1;
    for(i=x;i<=pinMany;i++) {
        var i = x++;
        var cardNumber = i.toPrecision(8).split('.').reverse().join('');
        var pinNumber = '';

        jQuery.ajax({
            type: "POST",
            url: "data.php",
            data: "request_type=generator",
            async: false,
            success: function(msg){
                var pinNumber = msg;
                return pinNumber;
                //pin number should return
            }
        });

        jQuery('.pin_generated_table').append(cardNumber+' = '+pinNumber+'
');
        // the variable pinNumber should be able to go here

    }

Please ask me if you don't understand.. ^^ thanks

Yet another "how do I return data from an asynchronous function" question. This kind of question is asked all too often. Voting to close. — Jacob Relkin, Feb 13 '11 at 07:22
How dare you ask this question! I vote to remove this person from the earth. — John Smith, Aug 18 '15 at 20:43

user229044 · Accepted Answer · 2014-02-07T16:53:51.693

15

AJAX is asynchronous by default, you cannot return a value from the callback without making a synchronous call, which you almost certainly don't want to do.

You should supply a real callback function to the success: handler, and put your program logic there.

edited Feb 07 '14 at 16:53

answered Feb 13 '11 at 07:21

user229044

232,980
40
330
338

oh thanks so much.. i already got the idea.. :) by putting my varibles inside of the ajax then append it in the inside. – Jorge Feb 13 '11 at 07:27
I don't really see the need for callbacks in SYNC AJAX. – Amjad Masad Feb 13 '11 at 11:04
4

Sync Ajax is an oxymoron. And sync XHR sucks. – Quentin Feb 13 '11 at 11:35

score 5 · Answer 2 · edited Jul 31 '15 at 11:36

5

var pinNumber = $.ajax({
    type: "POST",
    url: "data.php",
    data: "request_type=generator",
    async: false
}).responseText;
jQuery('.pin_generated_table').append(cardNumber+' = '+pinNumber+' ');

edited Jul 31 '15 at 11:36

RevanthKrishnaKumar V.

1,855
1
21
34

answered Feb 13 '11 at 10:19

Amjad Masad

4,035
1
21
20

2

Pls dont use this whoever will read this!!! This is WRONG! Our programmer now thinks that ajax is working like this! – Jaroslav Štreit Mar 17 '15 at 13:01

score 4 · Answer 3 · edited May 23 '17 at 11:46

4

It has to do with variable scope. The local variable pinNumber you create is not accessible outside its wrapping function.

Perhaps declare pinNumber globally or if it'll do the trick, simply stick your .append() inside your success function.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 13 '11 at 07:22

octopi

2,004
1
12
16

3

It has nothing to do with variable scope; the `.append` is executing before the success callback. – user229044 Feb 13 '11 at 07:23
2

`async` is false though, meaning `.append` will run after the AJAX call. – octopi Feb 13 '11 at 07:26
OP doesn't need to declare the `pinNumber` globally, it will suffice to not use the `var` keyword in the assignment to it inside the success handler. The assignment will then affect the enclosing scope. – aaronasterling Feb 13 '11 at 07:32

score 3 · Answer 4 · edited Jul 31 '15 at 11:16

3

var _successEvent = function(response){
    $('.pin_generated_table').append(cardNumber + ' = ' + response);
};

$.ajax({
    type: "POST",
    url: "data.php",
    data: "request_type=generator"
}).done(_successEvent);

edited Jul 31 '15 at 11:16

RevanthKrishnaKumar V.

1,855
1
21
34

answered Sep 14 '13 at 14:23

kayz1

7,260
3
53
56

score 1 · Answer 5 · edited Jul 31 '15 at 11:34

1

You can use this example:

window.variable = 'some data';

This make you variable global and you can access to this from anywhere

edited Jul 31 '15 at 11:34

RevanthKrishnaKumar V.

1,855
1
21
34

answered Oct 02 '13 at 20:15

Grigoriy

11
1

But when would the implementer know when the value set for `window.variable` is changed and accessible with the new value? – ojrask Jun 03 '16 at 09:48

score -3 · Answer 6 · answered Sep 14 '13 at 14:04

Here is the simple solution.

    //---------------------------Ajax class ------------------------------//
    function AjaxUtil()
    {
            this.postAjax = function(Data,url,callback)
            {
              $.ajax({
                 url: url,
                 async: true,     //must be syncronous request! or not return ajax results
                 type: 'POST',
                 data: Data,
                 dataType: 'json',
                 success: function(json)
                 {
                     callback(json);
                 }
               });
            }//--end postAjax
    }
    //--------------------------------End class--------------------//
    var ajaxutil = new AjaxUtil();

    function callback(response)
    {
          alert(response); //response data from ajax call
    }

  var data={};
  data.yourdata = 'anydata';
  var url = 'data.php';

  ajaxutil.postAJax(data,url,callback);

Your comment on `async: true` is simply lying and wrapping the callback in another function is pointless. Besides, this is unnecessary. What does wrapping it into a class have to do with the question? — Ingo Bürk, Sep 14 '13 at 14:55
Regardless of any of that he's the only one that gave a proper example of the use of `success:`. The accepted "answer" isn't even an answer as it doesn't give an example. — , Jul 10 '14 at 02:31

jQuery ajax return value

6 Answers6

Linked

Related