Question

I am trying to store a token into a global var. When the alert is run it says null, but if I put 2 alerts one after the other the 1st shows null but the second shows the token.

Its like the token is not being set because the 1st alert is run before the ajax request has finished.

Does anyone have any ideas on what I am doing wrong?

var csrf_token = null;

$(document).ready(function(){
    get_csrf_token();
    alert('token 1 '+csrf_token);
    alert('token 2 '+csrf_token);
});

function get_csrf_token()
{
    $.ajax({
        type: "GET",
        url: "http://buscore/index.php/includes/csrf_token/",
        dataType: "json",
        success: function(resp, status) {
            if (resp.status != 'success')
            {
                alert('Error - Update CSRF Token\n\n' + resp.status);
                return;
            }

            csrf_token = resp.csrf_token;
        }
    });
}

Thanks

UPDATED

Ok thanks for your help everyone but still dont see how this would work. I use get_csrf_token() like jqgrid to send the token with the request like below. So how do I pass the token to and have it working?

beforeRequest: function (){
        get_csrf_token()
        //alert(csrf_token);
        $("#customer_grid").setPostDataItem('<?php echo $csrf_token_name; ?>', csrf_token);
    }

Answer 1

The A in AJAX stands for ‘asynchronous’. While you are busy clicking on the first alert, the AJAX request is going through and the value is filled. You will need to place all code that needs the variable csrf_token into your callback function. Alternatively, you can look into using jQuery 1.5 or above (if you aren’t already). It has so-called Deferred Objects

This API allows you to work with return values that may not be immediately present (such as the return result from an asynchronous Ajax request).

You can also set the async value on your post request tofalse, like this:

$.ajax({
    type: "GET",
    async: false,
    url: "http://buscore/index.php/includes/csrf_token/",
    dataType: "json",
    success: function(resp, status) {
        if (resp.status != 'success')
        {
            alert('Error - Update CSRF Token\n\n' + resp.status);
            return;
        }

        csrf_token = resp.csrf_token;
    }
});

This will make the browser wait for the response before proceeding with the rest of your code. I wouldn’t necessarily recommend it, but it should work.