JQuery - слайд вверх / редактировать HTML / слайд вниз - PullRequest
Новая
       13

JQuery - слайд вверх / редактировать HTML / слайд вниз

2 голосов
/ 19 августа 2009

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

Ответы [ 3 ]

1 голос
/ 20 августа 2009

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

1 голос
/ 19 августа 2009

Я предполагаю, что первый ряд - вещь типа "checkall"? Может быть, это заголовок? В идеале вы должны использовать зарегистрированный = проверенный, не проверенный = истинный. И вам просто нужно использовать проверяемый атрибут в 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');
});

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

0 голосов
/ 28 октября 2009

Если вам нужна анимация скольжения вниз после выполнения всех вызовов 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');
             }
         }
 }

Внимание. Полностью непроверенный код.

...