<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>
This question is related to
javascript
php
jquery
html
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" );
}
+ " #here"This function can be called within an interval, or attached to a click event
For div refreshing without creating div inside yours with same id, you should use this inside your function
$("#yourDiv").load(" #yourDiv > *");
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.
This one $("#yourDiv").load(" #yourDiv > *"); is the best if you are planning to just reload a <div>
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.
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.
Source: Stackoverflow.com