Search code examples
javascriptajaxjqueryjquery-effects

How can I run some code when a ajax call is complete in jquery?

I have a div that contains some content. I want this div to be able to slide up and download some new content. When the content has been loaded via ajax, I want the div to slide down again and show the new content. I know how to handle each piece separately, but I do not know how to do them all at once. This is what I have:

$(element).slideUp('fast'); // slide up
$(element).slideDown('fast'); // slide down 
$(element).ajax(url); // download the text
Solution

  • You need to use the slideUp's callback and the success handler for your ajax as well. Your code would look something like this:

    $(element).slideUp('fast', function() {
    $.get(url, data, function (result) {
        $(element).html(result);
        $(element).slideDown('fast');
    });
});