AJAX jQuery refresh div every 5 seconds
Try this out.
function loadlink(){
$('#links').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Hope this helps.
Reload a div via AJAX immediately and then every 5 seconds
You need to setup the interval timer and then call the function directly. Try this:
function autoRefresh_div() {
$("#div").load("load.html");
}
setInterval(autoRefresh_div, 5000); // every 5 seconds
autoRefresh_div(); // on load
Also note that it's better practice to chain the requests using setTimeout()
, rather than queue them. This is because if the server slows, or gets bogged down in requests you won't keep piling them on, as the next request only fires after the previous one completes. Try this:
function autoRefresh_div() {
$("#div").load("load.html", function() {
setTimeout(autoRefresh_div, 5000);
});
}
autoRefresh_div();
How to refresh a div every X seconds which reads data from file?
Write two seperate files index.php
(It contains the div that you want to refresh) and filehandle.php
(file contents that you should recieve).
index.php
<?php
session_start();
if (! check_write()) {
redirect('testlogin.php');
return;
}
?>
<!doctype html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<div>
<h1>Website Title</h1> <a href="logout.php">Logout</a> </div>
<div>
<p>Welcome back,
<?= $_SESSION['user_id'] ?>!</p>
</div>
<!-- How can I refresh below div every x seconds? -->
<div class="update_content"></div>
<form method="post">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" name="submit" value="Save Data"> </form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var update_time = 1000;
$.get('filehandle.php', function (data, status){
$('.update_content').html(data);
});
setInterval(function(){
$.get('filehandle.php', function (data, status){
$('.update_content').html(data);
});
}, update_time);
$(function() {
$('form').submit(function(e) {
e.preventDefault();
$.post({
url: 'save.php',
data: $(this).serialize(),
}).done(response => {
response = JSON.parse(response);
if(response.message) {
alert(response.message);
}
});
});
});
</script>
</body>
</html>
filehandle.php
<?php
if (file_exists('lmt.json')) {
$lmt = json_decode(file_get_contents("lmt.json"), true);
}
if (isset($lmt)) {
echo "<p>Last modified by ".$lmt['fname']." at ".$lmt['ts']."</p>";
}
?>
change the value of update_time
value in index.php
to your desired value (it refers to update every update_time
seconds).
Note: update_time = 1000 -> 1sec, 2000 -> 2sec, ...
How to Refresh a DIV every X Seconds
If your advert isn't random, and it's just refreshing the div contents (maybe due to the content being a video), then you can use jQuery in this way:
$(document).ready(function()
{
function refresh()
{
var div = $('#target-div'),
divHtml = div.html();
div.html(divHtml);
}
setInterval(function()
{
refresh()
}, 300000); //300000 is 5minutes in ms
})
this will refresh div contents every 5 minutes.
refs:
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
https://api.jquery.com/Html/
Getting an AJAX call to reload a div every x minutes
Change your code to this:
setInterval(ajaxCall, 300000);
To pass an argument:
setInterval(function(){ ajaxCall(someCoolValue); }, 300000);
Notice the lack of parentheses in ajaxCall
. You want to pass the function itself, not call the function. More examples on MDN.
Related Topics
How to Make a JSONp Request from JavaScript Without Jquery
JavaScript Function Declaration and Evaluation Order
React-Router - Pass Props to Handler Component
Remove Property for All Objects in Array
What Does ':' (Colon) Do in JavaScript
Jquery.Parsejson Single Quote VS Double Quote
How to Make Div Fixed After You Scroll to That Div
Getting Bootstrap's Modal Content from Another Page
Html5 Canvas Ctx.Filltext Won't Do Line Breaks
Request Header Field Access-Control-Allow-Headers Is Not Allowed by Access-Control-Allow-Headers
JavaScript Swap Array Elements
How to Make Exe Files from a Node.Js App
Es6 Variable Import Name in Node.Js
How to Use Multiple Refs for an Array of Elements with Hooks