jQuery的全局变量

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


});

</div>