jQuery - slide up/edit html/slide down

Question

Я пытаюсь сместить div, содержащий таблицу вверх, изменить строки таблицы с помощью вызовов ajax, а затем сдвинуть содержащую таблицу обратно. Кажется, я не могу заставить серию обратных вызовов работать эффективно.

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

    }) 
    .slideDown('fast'); // want this to wait until editrow() has been run on each row 

editrow() содержит ajax-вызовы для редактирования html данной строки. Проблема . Слайд спуска вверх, затем сразу же вниз. Мне нужно, чтобы он подождал, пока функции будут выполняться в каждой строке, изменив 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

Я предполагаю, что первая строка - вещь типа «checkall»? Может быть, это заголовок? В идеале вы должны использовать checked = "checked" not checked = "true". И вы должны просто использовать проверенную проверку атрибута в jQuery.

Следующие должны работать в 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'); 
}); 

Только не забудьте поставить идентификатор = "" в строке таблицы не является флажком.

Answer 3

Думаю, у вас должно быть $(this).slideDown('fast'); в успешном событии от вашего вызова ajax. Это не будет работать с вашей текущей ситуацией (по крайней мере, не так, как я думаю, вам бы хотелось, чтобы она работала), потому что каждый из вызовов ajax, надеюсь, приведет к успешному событию. Возможно ли передать массив на ваш аякс-вызов, чтобы вы могли сделать один вызов, а не кучу разных? Не видя точно, что делает ваше дело, сложно, но я думаю, что это ваш лучший выбор.