delaying output data with ajax?

I'm trying to work on a toggle

a div element currently has some information and when a user clicks a link, it will slide up, and slide down with new information.

I'm working on ajax so when user clicks on the link, the new information that appears is coming from another page.

('a').toggle(function(){
    $('.content').slideUp("fast");  
    $.ajax({
        type: "GET",
        url: "URL",
        data: data,
        success: function(data){
                $('.element').delay("slow").slideDown("fast").html(data);
        }
    });
},function(){
    $('.element').slideUp("slow");
    $('.content').delay("slow").slideDown("slow");

});


<div class='content'>
old information
</div>
<div class='element'>
New information from another page, being shown through ajax
</div>

Thats the basics of my script. Right now when I click on the link, the new information shows right away before the old information gets to slide up.

Any thoughts or ideas on how I should go about this? Maybe a better way to write this?

Also, is there a way to remove the .html(data)? so when I slide back to the original folder, it'll disappear? Or would I just have to use the .hide() function? Maybe .remove()?

Thanks!

Solution

It sounds like you might want to use the callback on your slideup. It will run the callback function once the slideup function is complete. So something like this:

$('a').toggle(function(){
    $('.content').slideUp("fast", function(){
        $.ajax({
            type: "GET",
            url: "URL",
            data: data,
            success: function(data){
                $('.element').delay("slow").slideDown("fast").html(data);
            }
        });
    });

Although the drawback of that is it wouldn't load results through AJAX until after the slideup happens, which has the possibility if making you wait an additional length of time, however, it doesn't sound like waiting the problem, so that might be all you need.

If I were running into the same issue it sounds like you're running into, I would probably create 2 variables, one to hold the slideup state and one to hold the HTML returning from AJAX. I would then make both the ajax success callback and the slideup callback run a function that would insert the HTML and slide down if 2 conditions are met: 1) the slideup is completed and 2) the AJAX request has returned a result.

This way, both the request and the slideup/slidedown will work together as fast as possible but without overlapping.

// here's an example of the function you would have both slideUp and ajax success callbacks run
var $html,
    $slide = false; // false indicates we're not in the process of a slideup

function process_data()
{
    // only process the slidedown if we're not in the process of a slideup and we have the html we're after
    if (!$slide && $html)
    {
        $('.element').slideDown('fast').html($html);
        // make sure to empty $html afterwards so we don't assume we have data next time this runs
        $html = '';
    }
}

so your slideup would include the above function in the callback

$slide = true;
$('.content').slideUp('fast', function(){
     // the slideup is completed, so set the slide back to false
     $slide = false;

    // process data
     process_data();
});

and your ajax success would also use process_data

success: function(data){
    // store the returning data in the html variable
    $html = data;

    // process data
    process_data();