CODEWITHSUNDEEP
javascriptjquery
soonic
soonic

Reputation: 615

jquery ajax get data and set to global variables

At the beginning of my JS script I want assign some global variables from a php file which I need to use allover the page in different functions. So, first I did like this:

HTML

<button onclick="somename()"> CALL FUNCTION </button></div>

JS

var a,
    b;

$.ajax({
    type: "POST",
    url: "test.php",
    data: {getvar: "getvar"},
    success: function(data) {
        a = data["a"];
        b = data["b"];
    },
    dataType: "json",
    async: false
}); 

    console.log(a);
$(document).ready(function() {  
    console.log(a);
    console.log(b);
});

function somename() {
    console.log(a);
}

For the above way I need to use async: false, but this is already deprecated and not good solution because the browser can freeze but it works as needed. Then, I changed to this way:

$.post(
    "test.php",
    {getvar: "getvar"},
    function(data) {
        funget(data);       
    },
    "json"
);  

function funget(param) {
    $(document).ready(function() {  
        console.log(param["a"]);
        console.log(param["b"]);
    });

    function somename() {
        console.log(param["a"]);
    }
}

but having the whole js script in one function doesn't seem to be a good solution as well, at least the function somename() will not work there can be some other problems. So, what to do to get things working as needed and have save solution?

Upvotes: 0

Views: 1942

Answers (2)

Louis XIV
Louis XIV

Reputation: 2224

// we put a and b in global scope
var a, b;

// we delay ready event
$.holdReady( true );

$.post(
    "test.php",
    {getvar: "getvar"},
    function(data) {
        funget(data);       
    },
    "json"
);  

var funget = function(param) {
    // since defined in global scopes, we will be able to access them from everywhere
    a = param["a"];
    b = param["b"];

    // we release ready event
    $.holdReady( false );
}

https://api.jquery.com/jquery.holdready/

I used something close to your example for better understanding. But, it's true that a complete callback on the ajax request is simpler. holdReady suggests a bad design actually in this case.

Upvotes: 0

Cole Twitchell
Cole Twitchell

Reputation: 145

You can use ajaxComplete or to wait for the ajax call to complete before moving on.

var a,
b;

$.ajax({
    type: "POST",
    url: "test.php",
    data: {getvar: "getvar"},
    success: function(data) {
        a = data["a"];
        b = data["b"];
    },
    dataType: "json"
}); 

// do "asynchronous" things here

$.ajaxComplete(function() {
   // do stuff now that call is complete
});

Another method is to use the ajax method's complete property.

var a,
b;

$.ajax({
    type: "POST",
    url: "test.php",
    data: {getvar: "getvar"},
    success: function(data) {
        a = data["a"];
        b = data["b"];
    },
    complete: function(data) {
        // do stuff now that call is complete
    },
    dataType: "json"
}); 

// do "asynchronous" things here

Upvotes: 2

Related Questions