Declaring Variable within AJAX function and Calling It Later (jQuery)

Question

I've got an AJAX function that works correctly but I can't seem to access variables that I'm declaring within the function later in the page. If you look at the below code, you'll see I alert the variable number_rows within the function which works but when I try to log it outside of the function, it comes back as 'undefined.'

var newData = "user_id=" + id;

    $.ajax({
        type: 'POST', // HTTP method POST or GET
        url: 'ajax.php', //Where to make Ajax calls
        dataType:'text', // Data type, HTML, json etc.
        data:newData, //post variables
        success:function(response){

            var number_rows = response;
           alert(number_rows);

        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(xhr + " " + ajaxOptions + " " + thrownError); //throw any errors
        }
    });

console.log(number_rows);

I understand my scope may be off. I tried to move all of my code within the success function but that causing a bunch of other issues so the easiest thing would be to get the response variable to be a global variable that I could use throughout the rest of the page's code. I also tried something like this:

success:function(response){

        $('body').append('<span class="ajax_response" id="' + response + '"></span>');

    }

var number_rows = $('.ajax_response').attr('id');
console.log(number_rows);

But for some reason it isn't able to pick up the ID value immediately that way. I can confirm that the span does get made with the correct ID value but for some reason it doesn't handle it correctly. Any help with this would be greatly appreciated.

Thanks!

Answer 1

Changed the scope of your variable.
Change async: false or wait till you get the response from server, then use the value.

var newData = "user_id=" + id;
var number_rows = "";  //Declare Here

    $.ajax({
        type: 'POST', // HTTP method POST or GET
        url: 'ajax.php', //Where to make Ajax calls
        dataType:'text', // Data type, HTML, json etc.
        data:newData, //post variables
        async: false,
        success:function(response){

            number_rows = response;  //assign here
           alert(number_rows);

        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(xhr + " " + ajaxOptions + " " + thrownError); //throw any errors
        }
    });

console.log(number_rows);  //Use here

Answer 2

Yes, your scope is off. If you defining a variable inside a function, as you do, you cannot access it outside. Also your ajax call is async and any code you.

Put your console.log inside the success function otherwise it will probably log undefined even if you declare the variable globally outside of the function.

var newData = "user_id=" + id;
var number_rows;
$.ajax({
    type: 'POST', // HTTP method POST or GET
    url: 'ajax.php', //Where to make Ajax calls
    dataType:'text', // Data type, HTML, json etc.
    data:newData, //post variables
    success:function(response){
        number_rows = response;
        alert(number_rows);
        console.log(number_rows); // here, so we are sure it's set. 
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(xhr + " " + ajaxOptions + " " + thrownError); //throw any errors
        }
    });

Answer 3

Just add to your configuration:

async:false

Your code maybe look like this:

var newData = "user_id=" + id;
var number_rows = ""; //This is a global variable

    $.ajax({
        type: 'POST', 
        url: 'ajax.php',
        dataType:'text', 
        data:newData,
        async:false, //<------This is the option you must add
        success:function(response){

            number_rows = response;  //<----- receive data from the server
           alert(number_rows);

        },
        error:function (/*stuff here*/){
            //stuff here
        }
    });

  //Check data
   console.log(number_rows); 

Good luck ^^!