Skip to content
Advertisement

How do I refresh a DIV content?

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

I am trying to refresh a certain div within a bunch of divs. The div content is basically generated by PHP along with data from a MySQL database in addition to many variables being sent with the help of an XMLHttpRequest.

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

What I have tried :

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

and (for a every 3 second refresh) :

$(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 a onClick :

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

Advertisement

Answer

To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in this case #here:

function updateDiv()
{ 
    $( "#here" ).load(window.location.href + " #here" );
}
  • Don’t disregard the space within the load element selector: + " #here"

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

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement