How to update the contents of a DIV?

Question

<div id='here'></div> 

I am trying to update a specific div inside a div heap. The content of the div is mainly generated by PHP along with data from the MySQL database in addition to many variables sent via XMLHttpRequest.

The idea is to reload / update the div itself and not load the php file or overwrite it with .text or .html . In this case, I cannot use .load('file.php')

What I tried:

 <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 

and (for each 3 second update):

 $(document).ready(function () { setInterval(function () { $('#here').load('#here')); }, 3000); }); 

Ideally, I would require something like:

 function reloadDIV () {document.getElementById("here").innerHTML.reload} function reloadDIV () {$('#here').load(self)} 

so that I can use it in onClick:

 <a onclick='reloadDIV ();'>reload div</a> 

Answer 1

To reload a section of a page, you can use jquerys load with the current url and specify the fragment you need, which will be the same element that load calls, in this case #here :

 function updateDiv() { $( "#here" ).load(window.location.href + " #here" ); } 

This function can be called within an interval or attached to a click event.

Answer 2

You can use jQuery to achieve this using the simple $.get method. .html works like innerHtml and replaces the contents of your div.

 $.get("/YourUrl", {}, function (returnedHtml) { $("#here").html(returnedHtml); }); 

And call it with the javascript setInterval method.