JQuery - slide up / edit html / slide down

I am trying to shift the div containing the table up, change the table rows to ajax calls, then slide the containing table back. I can't seem to get the series of callbacks to work efficiently.

$("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 () contains ajax calls to edit the html of the given line. The problem in the div is sliding up and then immediately indented. I need it to wait for the functions to execute on each line, changing the html of the table, before sliding it back.

+2


source to share


3 answers


If you want a slide down animation that happens after all ajax calls have been made, you can first count the number of lines to be edited, store that to a variable, and decrease that number for each successful ajax call. If ajasx call succeeds, decrements the number to 0, then do a slide down animation.

Something like that:



$("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');
             }
         }
 }

      

Warning. Completely untested code.

0


source


I'm assuming the first line is a "checkall" thing? Maybe it's a headline? Ideally you should use checked = "checked" not checked = "true". And you should just use the checked attribute attribute in jQuery.

The following should work in jQuery 1.3+

Try doing one or two steps first. Then try moving on to more complex materials.

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

      

If it works, then the next step ...



$("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"));
     });
});

      

And if that works, then go ...

$("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');
});

      

Remember to put your id = "" in the table row, not the checkbox.

+1


source


I think you should have $(this).slideDown('fast');

in the event a success from your ajax challenge. This won't work with your current situation (at least not in the way I think you would like it to work), because each of the ajax calls will hopefully result in a successful event. Is it possible to pass an array to your ajax call so that you can make one call and not a bunch of different ones? Not seeing exactly what you are doing is difficult, but I think your best bet.

+1


source







All Articles