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.
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");
}
});
});</div>