Global Variables with jQuery - php

Question

Just got the FooTable responsive table plugin to work. Now I am trying to setup a PHP script to pull PostgreSQL and return a JSON encoded array.
Everything is working fine so far. I am really close to making this jQuery script work, but I'm not sure why my variables are not passing along.
Here is the script:
var columns_json;
var rows_json;
jQuery(function($){
$.ajax(
{
type: "POST",
dataType:"JSON",
url: "a.php",
data: {action: 'test'},
success: function(data)
{
columns_json = data[0];
rows_json = data[1];
console.log(columns_json);
console.log(rows_json);
},
failure: function(data)
{
alert("Something went wrong");
}
});
$('.table').footable(
{
"paging": {"enabled": true},
"filtering": {"enabled": true},
"sorting": {"enabled": true},
"columns": columns_json,
"rows": rows_json
});
});
If I look at my console, I can even see the two data arrays returned correctly... I even tried to output the data to make sure it was correct (no issue there):
console.log(JSON.stringify(columns_json))
So what I am not understanding about jQuery is:
When I update the variables I declared at the top of the scripts from within the $.ajax function, why are the JSON arrays not available at the $('.table').footable( function?
Admitting I've been only playing with jQuery for a little over a month so this is all new to me.
I did find one workaround to get this to work and that was the suggestion on this Post. I modified my script and got it to work. However the console throws a warning:
"Synchronous XMLHttpRequest on the main thread is deprecated because
of its detrimental effects to the end user's experience.".
Like always, any thoughts and suggestions are much appreciated.

Answer 1

Move the logic that fills your table inside the success callback.
Alternatively you can also encapsulate your logic in a function and call that function from the success callback.
The reason your code is not working, is because $.ajax is async, meaning it will not wait for the server request to finish, instead the next code will be executed immediately.
In the answer you linked you find async: false - wich is a (bad) alternative, because it will make your ajax call wait for the server response - but it will also look to the user as if the browser is frozen.
Suggestion: also show a loading animation/overlay, while you're doing ajax calls that may take a few seconds to finish.
After you've modified your code, check if your variables still need to be global.
var columns_json;
var rows_json;
jQuery(function($) {
$.ajax({
type: "POST",
dataType: "JSON",
url: "a.php",
data: {
action: 'test'
},
success: function(data) {
columns_json = data[0];
rows_json = data[1];
$('.table').footable({
"paging": {
"enabled": true
},
"filtering": {
"enabled": true
},
"sorting": {
"enabled": true
},
"columns": columns_json,
"rows": rows_json
});
},
failure: function(data) {
alert("Something went wrong");
}
});
});