Using Ajax does load div, but it changes position. How can I use replaceWith?

Question

I am using this function to refresh a part of my page, but the problem is that it's loading the ul#bla twice, which forces the list to change position by going to the right.

How can I use this function to replace ul#bla with itself? By using replaceWith? If so, how? I can't get it working

jQuery(document).ready(function() {
    var refreshId = setInterval(function()
    {
        jQuery('ul#bla').fadeOut("fast").load("testpage.php ul#bla").fadeIn("fast");
    }, 2000);

});

Answer 1

How about:

jQuery(document).ready(function() {
    var refreshId = setInterval(function() {
        jQuery('ul#bla').fadeOut("fast", function () {
            jQuery(this).load("testpage.php ul#bla", function () {
                jQuery(this).fadeIn("fast");
            });
        });
    }, 2000);
});

fadeIn(), fadeOut() and load() are sync in jQuery so you need to place them in callback of each other.

Answer 2

Try to empty the container before loading again.

$(function() 
{
    var refreshId = setInterval(function()
    {
        var $container = $('ul#bla');

        $container.fadeOut("fast");
        $container.empty();
        $container.load("testpage.php ul#bla");
        $container.fadeIn("fast");

    }, 2000);

});