I've a simple javascript code like below and I'd like to reload page after fadeOut and fadeIn fileds but I don't know where should I put window.location.reload(); function. Do You have any suggestions ? I'm new in JavaScript.

    <script>$(document).ready(function() {

        $('.updateButton').on('click', function() {
        var member_id = $(this).attr('member_id');
        var city = $('#city'+member_id).val();
        var continent = $('#continent'+member_id).val();
        var country = $('#country'+member_id).val();
        var id = $('#id'+member_id).val();

        req = $.ajax({
            url : '/deleteRequest',
            type : 'POST',
            data :
                {city : city,continent : continent,country : country,id : id}
        });
        req.done(function(data) {
            $('#city'+member_id).fadeOut(500).fadeIn(500);
            $('#continent'+member_id).fadeOut(500).fadeIn(500);
            $('#country'+member_id).fadeOut(500).fadeIn(500);
            $('#id'+member_id).fadeOut(500).fadeIn(500);
             });

    });
});
</script>

I've a simple javascript code like below and I'd like to reload page after fadeOut and fadeIn fileds but I don't know where should I put window.location.reload(); function. Do You have any suggestions ? I'm new in JavaScript.

    <script>$(document).ready(function() {

        $('.updateButton').on('click', function() {
        var member_id = $(this).attr('member_id');
        var city = $('#city'+member_id).val();
        var continent = $('#continent'+member_id).val();
        var country = $('#country'+member_id).val();
        var id = $('#id'+member_id).val();

        req = $.ajax({
            url : '/deleteRequest',
            type : 'POST',
            data :
                {city : city,continent : continent,country : country,id : id}
        });
        req.done(function(data) {
            $('#city'+member_id).fadeOut(500).fadeIn(500);
            $('#continent'+member_id).fadeOut(500).fadeIn(500);
            $('#country'+member_id).fadeOut(500).fadeIn(500);
            $('#id'+member_id).fadeOut(500).fadeIn(500);
             });

    });
});
</script>

• javascript
• jquery

• 2 in the done function usualy – madalinivascu Commented Jul 25, 2017 at 6:45
• end of the req done function, maybe setTimeout("window.location.reload()",2000); is better. – NicoXiang Commented Jul 25, 2017 at 6:47

5 Answers 5

you should try

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

it will work always whether you get resonse or not.if you want to reload when you get response you can check out tutorial here.

Here is updated code that you can have a look and try. I have merged all your elements and fadeIn has a callback, where you can refresh your page. So the page will reloaded only when the fadeIn is pleted:

$('#city' + member_id + ',#continent' + member_id + ', #country' + member_id + ', #id' + member_id).fadeOut(500).fadeIn(500, function() {
  location.reload();
});

req.done(function(data) {
        $('#city'+member_id).fadeOut(500).fadeIn(500);
        $('#continent'+member_id).fadeOut(500).fadeIn(500);
        $('#country'+member_id).fadeOut(500).fadeIn(500);
        $('#id'+member_id).fadeOut(500).fadeIn(500);
        window.location = '';  // This will reload your page.
});

Put it inside a timeout function

  req.done(function(data) {
                    $('#city'+member_id).fadeOut(500).fadeIn(500);
                    $('#continent'+member_id).fadeOut(500).fadeIn(500);
                    $('#country'+member_id).fadeOut(500).fadeIn(500);
                    $('#id'+member_id).fadeOut(500).fadeIn(500);
                     setTimeout(function(){
                     window.location.reload();
                       },TotalTimeNeededbyThheAnimationInmiliseconds)
                     });

            });

in latest jquery

Deprecation Notice:

The jqXHR.success(), jqXHR.error(), and jqXHR.plete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their

eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

use .done(), .fail() and .always() instead of success(), error() and plete().

i believe you want to fade and hide only on ajax success so you are placing it in done().

if you want to reload everytime the ajax finishes use always()

eg :

req.always(function(){
   window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.
});

or

if you want it both in done() then

req.done(function(){
 // you fadein,fadeout code 

window.location.reload();
});