double calls ajax using jquery

Question

two calls:

$('#add').live('click', function() {

    $('.simplebox').slideUp(200, function() {
        $('html, body').animate({scrollTop:140}, 350, function() {
            $('#loading-add').slideDown(300, function() {
                $.ajax({
                    type: "POST",
                    url: "..",
                    data: getDataToPost(),
                    cache: false,
                    success: function(data){

                        alert(data);

                        $('#loading-add').delay(1000).fadeOut(200, function() {
                            $('#successfull-add').fadeIn(200);
                        });

                    }
                });
            });
        });
    });

})

But if i call to the ajax immediately after the live event, it calls on time (as it should be):

$('#add').live('click', function() {
                $.ajax({
                    type: "POST",
                    url: "..",
                    data: getDataToPost(),
                    cache: false,
                    success: function(data){

                        alert(data);

                        $('#loading-add').delay(1000).fadeOut(200, function() {
                            $('#successfull-add').fadeIn(200);
                        });

                    }
                });
})

There are any ideas why it happens? really strange..

Thank you.

I think you might have left off some of your question, this is a little unclear. Can you add anything to give us a better understanding of your problem? — Steve O, Mar 15 '12 at 18:35
possible duplicate of [jQuery $.animate() multiple elements but only fire callback once](http://stackoverflow.com/questions/8793246/jquery-animate-multiple-elements-but-only-fire-callback-once) -- the problem is that your `animate` callback is called once for each element, in this case `html` and `body`. Either use only `body` or the answer to that question. The problem might be with the other animation methods as well. — Felix Kling, Mar 15 '12 at 18:37
@FelixKling Thank you very much, it works great, understood the problem. if you want, write it as an answer and i'll accept it. — Luis, Mar 15 '12 at 18:40

Abdullah Jibaly · Answer 1 · 2012-03-15T18:54:21.023

0

Try using queue():

$('.simplebox').slideUp(200);
$('.simplebox').queue(function() {
    $('body').animate({scrollTop:140}, 350);
    $('body').queue(function() {
        $('#loading-add').slideDown(300);
        $('#loading-add').queue(function() { 
            //ajax call
        });
    });
})

edited Mar 15 '12 at 18:54

answered Mar 15 '12 at 18:43

Abdullah Jibaly

53,220
42
124
197

`$('body')` will suffice, it's similar though I update the code to reflect that. – Abdullah Jibaly Mar 15 '12 at 18:55

double calls ajax using jquery

1 Answers1