0

開発環境または実稼働環境に基づいてユーザー インターフェイス機能を有効/無効にする構成 JavaScript ファイルを実装しようとすると、いくつかの奇妙な動作に気付きました。いくつかの説明を使用できます。

これはフラットなアプリケーションで、javascript を index.js、dashboard.js、taxonomy.js の 3 つのファイルに分割しました。 

<script type = "text/javascript" src = "/static/js/taxonomy.js"></script>
<script type = "text/javascript" src = "/static/js/dashboard.js"></script>
<script type = "text/javascript" src = "/static/js/index.js"></script>
<script type = "text/javascript" src = "/static/js/config.js"></script>

インデックス スクリプトは、ログイン、ログアウト、および要素の初期化機能を処理します。そのように定義されています

$(document).ready(function(){ 
  $.ajax({
    //query db for login
    success : function(){
      loginHandler()
    }
});

function loginHandler(){
  initializeDashboardElements()
  initializeTaxonomyElements()
}

taxonomy.js 内には定義はありませんが、指定された HTML 要素に jQuery UI バインディングを適用する$(document).ready()定義が存在します。initializeTaxonomyElements()そのような要素の 1 つは、現在 4 つのタブを含むタブ ウィジェットですが、さらに大きくなると予想されます。

内部config.jsには、本番環境用に次のものがあります。

$(document).ready(function(){
  $("#tabs").tabs("option", "disabled", [1, 2]);
});

このセットアップを考えると、エラーが発生します

Error: cannot call methods on tabs prior to initialization; attempted to call method 'option'

また、宣言initializeTaxonomyElements()内でこれを試しました。$(document).ready()同じエラーが発生します。

この問題を解決するための提案はありますか?

4

1 に答える 1

0

その理由は、AJAX 呼び出しがすぐに終了するためです (その目的はイベント ハンドラーをアタッチすることであり、イベントを待機することではありませんsuccess。その部分は、サーバーによって AJAX 要求が満たされた後にのみ起動されます)。$(document).ready(function(){ $("#tabs").tabs("option", "disabled", [1, 2]); });での初期化が行われる前に、での関数が実行されることはほぼ確実ですinitializeTaxonomyElements()。

これを修正するに$("#tabs").tabs("option", "disabled", [1, 2]);は、AJAXsuccessメソッドの一部として実行する呼び出しを行います ( の後initializeTaxonomyElements())。

于 2013-09-11T19:54:21.220 に答える