Why doesn’t this setTimeout work?

Question

My goal is when I click the button, 3 seconds after a div reread the page...

Why does that code not work?

<button id="btn-cadastra-tarefa" ng-click="adicionaTarefa()" onclick="atualiza()" 
        type="button" data-dismiss="modal" >
    <span class="glyphicon glyphicon-ok-sign"></span>Salvar
</button>

<div id="atualizaPagina"></div>

function atualiza() {
    setTimeout(function(){ $('#atualizaPagina').location.reload(); }, 3000);
}

Answer 1

Mostly because it doesn’t make sense.

$('#atualizaPagina') returns an HTML element and no HTML element has the property location, consequently, there is no method reload().

If you want to update the whole page use window.location.reload(). There is no method to update a div, because it wouldn’t make sense. It would update based on what?

What you must really want to do is just modify the data that is shown in this div, for that, you need to make an Ajax call pro backend and then update the div via Javascript based on the answer to your Ajax call.

I cannot show an example with code because this part of the code does not exist in the question.

See a generic example that makes an Ajax request and then updates the tag img:

const reqUrl = 'https://api.giphy.com/v1/gifs/search?api_key=9e4393bfcf774cd08e0757b4688b11f7&q=javascript';

$('#ajax').on('click', function() {
  $.get(reqUrl, function(r) {
    $('#img').attr('src', r.data[0].images.original.url);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ajax">Faça uma requisição Ajax</button><br>

<img id="img" src="http://netcoders.com.br/wp-content/uploads/2015/10/js3.png" width="250" height="250" />

Answer 2

If really the need is to refresh the page all you can use:

Works in IE:

setTimeout(function(){ window.location.href = window.location.href; }, 3000);

Not tested on all browsers, may not work on some:

setTimeout(function(){ location = '' }, 3000);
setTimeout(function () { location.reload(); }, 3000);

---

To reload a page via javascript you can use one of the following options:

Javascript 1.0

window.location.href = window.location.pathname + "pagina";

Creates page history entry

Javascript 1.1

window.location.replace(window.location.pathname + "pagina");

Does not create page history entry

Javascript 1.2

window.location.reload();

Reload the cache page

window.location.reload(false);

Reload the cache page

window.location.reload(true);

Reload server page (force new GET)