2016-08-29 8 views
0

FooTableレスポンステーブルプラグインが機能しました。今私はPostgreSQLをプルしてJSONエンコードされた配列を返すPHPスクリプトをセットアップしようとしています。jQueryを使用したグローバル変数

これまでのところうまくいっています。私はこのjQueryスクリプトを動作させることに本当に近いですが、私の変数がなぜ渡っていないのか分かりません。ここで

はスクリプトです:

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     

     }); 
}); 

私は私のコンソールを見れば、私も2つのデータ配列が正しく返さ...私も必ずそれが(正しい作るために出力したデータを試してみました見ることができますそこには問題):

console.log(JSON.stringify(columns_json)) 

だから、私はjQueryのについて理解しておりませんことはありません: 私は$.ajax関数内からのスクリプトの先頭に宣言された変数を更新すると、なぜで利用できるJSONアレイではありません$('.table').footable(は機能しますか?

私はjQueryを1ヶ月以上プレイしていますので、これは私にとって初めてのことです。

これを動作させるための回避策が1つ見つかりました。これがこのPostの提案でした。私は自分のスクリプトを修正し、それを動作させました。 「メインスレッド上で同期のXMLHttpRequestは、エンドユーザーの体験への有害な影響の ため廃止されました。」

:しかし、コンソールは、警告をスローします。

いつものように、どんな考えや示唆も高く評価されます。

答えて

0

成功コールバック内でテーブルを埋めるロジックを移動します。

また、ロジックを関数にカプセル化し、その関数を成功のコールバックから呼び出すこともできます。

$ .ajaxが非同期であるため、サーバー要求が完了するのを待たずに次のコードがすぐに実行されるためです。

async: false - あなたのajax呼び出しがサーバーの応答を待つようになるため、あなたはasync: false(悪い)の代替手段ですが、ブラウザーがフリーズしているかのように見えます。

提案:また、アニメーション/オーバーレイの読み込み中に、ajax呼び出しを実行している間に完了するまでに数秒かかる場合があります。

コードを変更したら、変数が引き続きグローバルである必要があるかどうかを確認します。

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

 

 
});

関連する問題