'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>
javascriptphpjqueryhtml


Solution 1:[1]

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

Solution 2:[2]

For div refreshing without creating div inside yours with same id, you should use this inside your function

$("#yourDiv").load(" #yourDiv > *");

Solution 3:[3]

Complete working code would look like this:

<script> 
$(document).ready(function(){
setInterval(function(){
      $("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>

<div id="here">dynamic content ?</div>

self reloading div container refreshing every 3 sec.

Solution 4:[4]

The following is the best if you are planning to just reload a <div> element:

$('#yourDiv').load('#yourDiv > *')

Make sure to: use an id and not a class. Also, remember to paste: <script src="https://code.jquery.com/jquery-3.5.1.js"></script> in the <head> section of the HTML file, if you haven't already. In opposite case it won't work.

Solution 5:[5]

You can use jQuery to achieve this using simple $.get method. .html work like innerHtml and replace the content of your div.

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

And call this using javascript setInterval method.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 ???? ?????
Solution 3 pc_
Solution 4
Solution 5

Related Questions