jQuery - スライドアップ/編集html /スライドダウン

Question

テーブルを含むdivをスライドさせ、ajax呼び出しでテーブルの行を変更してから、そのテーブルを元に戻します。私は効果的に動作するように一連のコールバックを取得することはできません。

editrow（）には、指定された行のhtmlを編集するためのajax呼び出しが含まれています。問題は、 divが上にスライドし、すぐに下に戻ることです。関数を各行で実行し、テーブルのhtmlを変更してから、それを元に戻すまで待つ必要があります。

Answer 1

すべてのajax呼び出しが完了した後でスライドダウンアニメーションが必要な場合は、最初に編集する行の数をカウントし、それを変数に保存し、成功したAjax呼び出しごとにその数値を減らします。成功したajasx呼び出しが数値を0に減少させた場合、スライドダウンアニメーションを行います。このような

何か：

$("div#grid").slideUp('fast', function() { 
    //every row but the first 
    rowsToUpdate = $("#testtable tr") 
     .not(":first") 
     .filter(":has(input[type='checkbox'][checked])"); 
    $("#testtable").data('rowsToUpdate', rowsToUpdate.length); 
    rowsToUpdate.each(function() { 
     //change html using ajax calls 
     editrow($(this).attr("id")); 
    }); 

}); 

function editrow(id) { 
    $.ajax({ 
     complete : function() { 
      // On complete, not success as we always want to show the table again? 
      rowsToUpdate = $("#testtable").data('rowsToUpdate')--; 
      $("#testtable").data('rowsToUpdate', rowsToUpdate); 
      if (rowsToUpdate == 0) { 
       $("div#grid").slideDown('fast'); 
      } 
     } 
} 

警告。完全にテストされていないコード。

Answer 2

私は最初の行が "チェックアウト"タイプのものだと思いますか？多分それはヘッダーですか？ 理想的には、checked = "checked" not checked = "true"を使用する必要があります。そして、単にjQueryで検証された "checked"属性を使うべきです。

次は、最初に行われる1つのまたは2つの手順を試してみてもらうのjQuery 1.3以降で

を動作するはずです。次に、より複雑なものに移動してください。

$("div#grid").slideUp('fast', function() { 
    $(this).slideDown('fast'); 
}); 

それが動作する場合は、次の段階...

$("div#grid").slideUp('fast', function() { 
    // For each table row with a checkbox that isn't in the first row 
    $("#testtable tr").not(":first").filter(":has(input[type='checkbox'][checked])") 
    .each(function(){ 
      // I substituted your custom function so we can find out if this works first 
      alert($(this).attr("id")); 
    }); 
}); 

そして、それが動作するかどうか、そして上に移動...

$("div#grid").slideUp('fast', function() { 
    // For each table row with a checkbox that isn't in the first row 
    $("#testtable tr").not(":first").filter(":has(input[type='checkbox'][checked])") 
    .each(function(){ 
      // Original function reinserted 
      editrow($(this).attr("id")); 
    }); 
    $(this).slideDown('fast'); 
}); 

はちょうどあなたのIDを置くことを忘れないでください=テーブル行のチェックボックス自体ではありません。 "

Answer 3

あなたはajaxコールの成功イベントに$(this).slideDown('fast');があるはずです。これは、あなたの現在の状況（少なくとも、あなたがそれが働きたいと思う方法ではない）ではうまくいきません。なぜなら、それぞれのajax呼び出しはうまくいけば成功イベントが引き起こされるからです。あなたはajax呼び出しに配列を渡すことができますので、1つの呼び出しを行うことができます。あなたのやっていることが困難になるのを正確に見ていないが、私はそれがあなたの最善の策だと思う。