jQuery - 読み込んだ後のリストを表示

Question

私は、getJSON()を使って、MySQLデータベースから "親"ジャンルの子ジャンルを取得するためのスクリプトを作成しました。子ジャンルのリストを表示するには、show()関数を使用しましたが、リストはまだロードされていないため、ポップアップしてしまいます。 load()機能（または私の場合に役立つその他の機能）を使用してリストがロードされるまで待ってからshow()を使用するにはどうすればよいですか？

function getZvrsti(id){ 
     $.getJSON('test.php?parent='+id, function(data) { 
      var tmpLi; 
      $.each(data, function(id, name) { 
       tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>'); 
       $(".drugeZvrsti").append(tmpLi); 
       tmpLi = ""; 
      }); 
     }); 
    } 

これはgetJSONを使用する関数であり、そしてここで私はshow()を使用します。ここで、切り取られる：

$(".naprejZvrst").click(function(){ 
      if(!on2){ 
       parent = $(this).attr("id"); 
       getZvrsti(parent); 
       $(".drugeZvrsti").load(function(){ //my poor example of load() 
        druga.show(400); 
       }); 
       on2 = true; 

      } 
      else if(on2){ 
       druga.hide(400); 
       on2 = false; 
       $(".drugeZvrsti").html(''); 
      } 

     }) 

クラスdrugeZvrstiは、var drugaが<div>で、リストが表示され<ul>リストですどこに全体が<ul>リストです。 注：私はload()の例を見つけましたが、リストの使用方法はほとんど説明されていませんでした。

Answer 1

$.getJSONあなたがそれを呼ばれてきた後にコードの実行を継続することを意味し、デフォルトあたり非同期です。

あなたがしたいことは、リストアイテムを作成して追加したら、コールバックにリストを表示することです。

// Let's define our local scope variables 
var druga = $(".drugeZvrsti"), 
    request = false; 

function getZvrsti(id) { 
    // Save the request to our requests object 
    requests[id] = $.getJSON('test.php?parent='+id, function(data) { 
     var html = ""; 
     $.each(data, function(id, name) { 
      html += '<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>'; 
     }); 
     // Append the list items and then fade in 
     druga.append(html).show(400); 
     // We no longer have a request going 
     request = false; 
    }); 
} 

$(".naprejZvrst").click(function(){ 
    var id = $(this).attr("id"); 
    // Since we don't want multiple requests, abort any existing one 
    if (request) { 
     request.abort(); 
     request = false; 
    } 
    if (druga.is(":hidden")) { 
     getZvrsti(id); 
    } else { 
     // Stop any animations, fade out and 
     // use callback to empty the list when its hidden 
     druga.stop().hide(400, function(){ 
      druga.empty(); 
     }); 
    } 
}); 

あなたには、また、私がここでやったいくつかの他の変更、注意することができます：それはプレーンな文字列としてリストを構築する複数回

を使用していますので、リストのためのセレクタをキャッシュ

• を一度追加してください。これは、DOMの操作が遅いためですが、これを最小限に抑えることをお勧めします。
• 保存変数への要求リストは
• 隠されているとき、それは.isでdrugaの可視性を確認する代わりに、可変on2

Answer 2

getJSONが成功したときに実行されるコールバック関数を追加すると、終了した時点を確認できます。私がちょうどdrugaを作ったのですが、これを修正して変数を設定してから、クリックイベントをチェックインする必要があります。それはすべてdocsです。 $.ajaxの省略形です

function successFunction(data) { 
    druga.show(400); 
} 

function getZvrsti(id){ 
     $.getJSON('test.php?parent='+id, function(data) { 
      var tmpLi; 
      $.each(data, function(id, name) { 
       tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>'); 
       $(".drugeZvrsti").append(tmpLi); 
       tmpLi = ""; 
      }); 
     }, successFunction(i)); 
    } 

Answer 3

を使用して中止することができる任意継続的な要求があります場合は、コールバックを使用することができますので、このような：

function getZvrsti(id, callback){ 
    $.getJSON('test.php?parent='+id, callback(data)); 
} 

...

getZvrsti(parent, function(data) { 
     var tmpLi; 

     $.each(data, function(id, name) { 
      tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>'); 
      $(".drugeZvrsti").append(tmpLi); 
      tmpLi = ""; 
     }); 

     druga.show(400); 
}); 

テストされていないコード