JQuery ajax function in success function is not taken into account if page redirection is present

Question

I have an ajax request where I would like the jQuery animation to finish before reloading the page. The problem is that my flyToChart animation function is completely ignored and the page reloads immediately. If I comment on the reload page code, the animation works just fine. How can I make my animation first and then reload the page or even redirect to another page? Here is my code:

jQuery.ajax({
            url: 'session/phpSession.php',
            type: 'POST',
            data: {
                ProductDescription: productDescription,
                ProductPrize: productPrize,
                ProductSize: productSize,
                ProductId: productId,
                ProductCount: productListJson.length,
                ProductSmallImage: productSmallImg,
                ProductQuantity: productQuantity,
                ProductUniqueId: idGen.getId(),
                ProdId: prodId,
            },

            success: function() {
                flyToCart(reload);
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus + " " + xhr + " " + errorThrown );
            }
        });

function flyToCart(reload) {
    $('html, body').animate({
        'scrollTop' : $(".cart_anchor").position().top
    });

    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));

    reload();
}

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

function reload()
{
    window.location.reload();
}

Answer 1

Check out the code below:

jQuery.ajax({
            url: 'session/phpSession.php',
            type: 'POST',
            data: {
                ProductDescription: productDescription,
                ProductPrize: productPrize,
                ProductSize: productSize,
                ProductId: productId,
                ProductCount: productListJson.length,
                ProductSmallImage: productSmallImg,
                ProductQuantity: productQuantity,
                ProductUniqueId: idGen.getId(),
                ProdId: prodId,
            },

            success: function() {
                flyToCart();               
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus + " " + xhr + " " + errorThrown );
            }
        });

function flyToCart() {
    $('html, body').animate({
        'scrollTop' : $(".cart_anchor").position().top
    });

    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));
   window.location.reload();
}

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

Run codeHide result

Answer 2

, , .promise(). done (function() {           window.location.reload();} . . . , ... .

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    }).promise().done(function(){
        window.location.reload();
    });
}

Answer 3

, , , :

function flyToCart(reload) {
$('html, body').animate({
    'scrollTop' : $(".cart_anchor").position().top
});

var itemImg = $('.productBigImageContainer').find('img');
flyToElement($(itemImg), $('.cart_anchor'));

reload();
}

, :

• success AJAX flyToCart().
• ( , , , ).

:

reload() .

:

jQuery animate() , .

A prom , ". .

, A B. B A. B , A ().

, reload() (.. reload() ), reload(), animate().

, , animate, , animate() .

:

, complete animate():

function flyToCart(reload) {
$('html, body').animate({
    'scrollTop' : $(".cart_anchor").position().top
}, 
function(){   // the callback that is executed once the animation is over
    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));  // move reload() to the callback of the animate in this function
});
}

/** your flyToElement function */
function flyToElement(flyer, flyingTo) {
/* ... */
 $(flyerClone).animate({
    opacity: 0.4,
    left: gotoX,
    top: gotoY,
    width: $(flyer).width()/divider,
    height: $(flyer).height()/divider
}, 700, function(){
    /*...*/
    reload(); // call reload() here
});

, , animate() ( ):

$(selector).animate({ /* ... */ }).promise().done(function(){
    //do some stuff when the promise is resolved.
});

:

$(flyerClone).animate({ /* ... */ }).promise().done(function(){
    reload();
});

. animate() . reload() animate(), .