Variables globales avec jQuery

Question

Vous venez de recevoir le plug-in FooTable responsive table. Maintenant, j'essaye de configurer un script PHP pour tirer PostgreSQL et retourner un tableau codé JSON.

Tout fonctionne bien jusqu'à maintenant. Je suis vraiment proche de faire fonctionner ce script jQuery, mais je ne suis pas sûr de savoir pourquoi mes variables ne passent pas.

Voici le 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     

     }); 
}); 

Si je regarde ma console, je peux même voir les deux tableaux de données correctement ... Je suis retourné même essayé de sortir les données pour vous assurer qu'il était correct (pas de problème là-bas):

console.log(JSON.stringify(columns_json)) 

donc ce que je ne comprends pas à propos de jQuery est: Lorsque je mets à jour les variables je déclarai en haut des scripts à partir de la fonction $.ajax, pourquoi sont les tableaux JSON pas disponible à le $('.table').footable( fonction? Admettre J'ai seulement joué avec jQuery pendant un peu plus d'un mois, donc c'est tout nouveau pour moi.

J'ai trouvé une solution de contournement pour que cela fonctionne et c'était la suggestion sur ce Post. J'ai modifié mon script et je l'ai mis au travail. Cependant, la console lance un avertissement :

« XMLHttpRequest synchrone sur le thread principal est dépréciée parce de ses effets néfastes sur l'expérience de l'utilisateur final. ».

Comme toujours, toutes les pensées et suggestions sont très appréciées.

Answer 1

Déplacez la logique qui remplit votre table dans le rappel de succès.

Vous pouvez également encapsuler votre logique dans une fonction et appeler cette fonction à partir du rappel réussi.

La raison pour laquelle votre code ne fonctionne pas, est que $ .ajax est asynchrone, ce qui signifie qu'il n'attendra pas la fin de la requête du serveur, le code suivant sera exécuté immédiatement.

Dans la réponse que vous avez liée, vous trouvez async: false - ce qui est une (mauvaise) alternative, parce que votre appel ajax attendra la réponse du serveur - mais il verra également l'utilisateur comme si le navigateur était gelé. Suggestion: affiche également une animation/superposition de chargement, pendant que vous effectuez des appels ajax qui peuvent prendre quelques secondes pour se terminer. Après avoir modifié votre code, vérifiez si vos variables doivent toujours être globales.

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

 

 
});