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.
source to share
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.
source to share
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.
source to share
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.
source to share