how to automatically reload a page after jquery ajax is finished

Question

here is my code for uploading some images on server
everything works except success - reloading the page after uploading is finished
I tried with another params - for example 20000 - without success
please help

inpfi.on('change', function(){
    var flist = inpfi[0].files;
    var fd = new FormData();
    for(let i = 0; i < flist.length; i++){fd.append('flist[]', flist[i]);}
    $.ajax({
        url: 'a_slike_up.php', 
        type: 'post',
        data: fd,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(){setInterval('location.reload()', 7000);}
    })
});

update

I tried plain js and it works
So I need the same - but in my jquery code

function handler_finito(e){
    location.href = location.href;
}

inpfi.on('change', function(){
    // ...
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("load", handler_finito, false);
    ajax.open("POST", "a_slike_up.php");
  ajax.send(fd);
});

Please explain why you think you need to reload the page or why you need ajax if you reload the page — mplungjan, Jan 14 '23 at 18:03
@mplungjan - I simpy want to see the new uploaded images on the current page — provance, Jan 14 '23 at 18:08
There is NO reason to use AJAX if you reload the page. Why would you? That is a code smell. The page you submit to needs to return the data you need to update the page with. Alternatively if you need to go somewhere else and return the submit, then form and redirect back to the page. Absolutely no way do you want to use setInterval — mplungjan, Jan 14 '23 at 18:08
Just put them there with script and return the OK stored in the success from the php. — mplungjan, Jan 14 '23 at 18:09
See the dupe. There are many more examples of [image preview before ajax](https://www.google.com/search?q=preview+images+before+ajax+php+stackoverflow+site:stackoverflow.com) — mplungjan, Jan 14 '23 at 18:11
@mplungjan - what a dupe ? I need reload AFTER ajax is finished, not while it is in proccess. Preview images doesn't solve because the new images should be clickable and triggering some additional code - which is not possible if they are NOT really on server — provance, Jan 14 '23 at 18:20
So return the image location instead. Save the image on the server and return the location and change the image on the client: `success: function(data) { document.getElementById('imageResult').src = data.imageSource},` where you return `echo "{ \"imageSource\":\"/images/$imageName\" }';` for example — mplungjan, Jan 14 '23 at 18:23
Like [this answer does](https://stackoverflow.com/questions/19557692/save-a-image-in-the-folder-and-getting-the-image-name-using-ajax) — mplungjan, Jan 14 '23 at 18:25
@mplungjan - plain js has this - `ajax.addEventListener("load", handler_fn, false).` I tried and it works. So I want the same, but in my jquery code — provance, Jan 14 '23 at 18:26
That does not fit your requirements. You need to post, so post and return the information needed to load the image again — mplungjan, Jan 14 '23 at 18:34
@mplungjan - this perfectly fits my task. See my update, pls — provance, Jan 14 '23 at 18:46
`success: function(){ location.reload(true)}` or `success:handler_finito,` - it is still not what I would do at all. No reason what so ever to reload after ajax or use ajax if you plan a reload. Instead submit the form without any script and do this in `a_slike_up.php`: `header("Location: $_SERVER['HTTP_REFERER']"); die();` — mplungjan, Jan 14 '23 at 21:29

score -2 · Answer 1 · answered Jan 14 '23 at 17:51

-2

use setTimeout function instead of setInteval:

success: function(data) {
    setTimeout(function(){
       location.reload();
}, 7000);

answered Jan 14 '23 at 17:51

Kaustubh Dwivedi

418
4
16

how to automatically reload a page after jquery ajax is finished

1 Answers1