jquery reload page after using ajax to update data

Question

I'm trying to find a way to reload the page after completing an AJAX update.

My Basic code is:

updateEdit = function() {
    $('#editSection').on('click', '#Changes', function() {  
        /*set var here*/
        $.ajaxSetup({ 
            data: {
                var1: 1,
                var2: 2
            }
        })
        ajaxUpdate();   
    });
}

ajaxUpdate = function() {
    $.ajax({
        type: 'GET',
        url: 'update.php',
        data: {},
        success: function(data) {
            alert(data);
            centerItem('#savedBox');
        },
        error: function(jqxhr) {
            alert(jqxhr.responseText);
        }
    })  
}

So far so good. I now need to pause for 1 second, then roload the page. Looking around suggests I need to use setTimeout(location.reload, 1000);

so I added in

complete: function() {
    setTimeout(location.reload, 1000);  
}

to the $.ajaxsetup() but that seemingly did nothing. I then added it to the main ajaxUpdate() function, (not ideal as I don't want it to fire on every ajaxUpdate) whereby I got an Uncaught TypeError: Illegal invocation error. (and no page reload). What am I doing wrong?

possible duplicate of [Why can't I pass "window.location.reload" as an argument to setTimeout?](http://stackoverflow.com/questions/10839989/why-cant-i-pass-window-location-reload-as-an-argument-to-settimeout) — Chop, Aug 12 '15 at 08:34
[This answer](http://stackoverflow.com/a/10840058/1734119) should help you. Basically, you can't pass `location.reload` as is as an argument to `setTimeout`. — Chop, Aug 12 '15 at 08:35

Nathan · Answer 1 · 2015-08-12T08:35:30.303

1

Reload is a method. Call it via a function

setTimeout(function(){location.reload()}, 1000);

Hope this helps.

edited Aug 12 '15 at 08:35

answered Aug 12 '15 at 08:29

Nathan

1,520
1
12
21

Sorry, I forgot to put it inside a function. – Nathan Aug 12 '15 at 08:35

score 1 · Accepted Answer · answered Aug 12 '15 at 08:36

1

the syntax for setTimeout function is not correct

please use this:

setTimeout(function(){location.reload();}, 1000);

answered Aug 12 '15 at 08:36

Karim Seoudy

117
1
10

score 0 · Answer 3 · answered Aug 12 '15 at 08:37

updateEdit = function() {
        ...

        // Will wait 1 sec and then reload the page
        var waitCallback = function () {
           setTimeout(function() { location.reload(); }, 1000);
        };

        ajaxUpdate(waitCallback);
    });
}

ajaxUpdate = function(cb) {
    $.get('update.php',
       function(data) {
          alert(data);
          centerItem('#savedBox');

          cb();
        })
        .fail(function(jqxhr) {
            alert(jqxhr.responseText);
        });
};

jquery reload page after using ajax to update data

3 Answers3