Ajax Jquery Refresh Div Every 5 Seconds

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



Leave a reply



Submit