How to perform a Reload on only one part of the page, from an ID?

Question

I’m trying to do a Reload just for the contents of a div.

<div class="panel-body">                          
   <pre>
     <p  id="content" th:utext="${log.content}">Log content</p>
  </pre>
 </div>

I managed to get the whole page up to date:

$(document).ready(function() { setInterval("location.reload(true)", 10000); });

But applying the same logic to an ID did not work very well:

$(document).ready(function() { setInterval("$('#content').reload(true)", 10000); });  

My doubt: How do I give a realod only in the content of this <div></div>, from an ID?

Answer 1

You can use Ajax to perform a certain function of a URL and update the contents of your div with the return of the function. That way you won’t be reloading your entire page. An example of ajax would be:

var formdata = new FormData($("#myform"));
$.ajax({
    url: "exemplo.php",
    type: "POST",
    data: formdata,
    success:function(data){
        $("#div-id").html(data);
    },
    error: function(){
        $("#div-id").html("Mensagem de Erro");
    }
});

You will find more details on this link: http://api.jquery.com/jquery.ajax/