I'm using setTimeout + .load to reload my php file: table.php every 5 seconds, but I don't want it to reload the file if there isn't a change. A solution I came up with is to create a file called changes.php which currently echos 1 if there's a change or 0 if there isn't. If changes.php echos 1 I would like to refreshTable else it needs to wait another 5 seconds to check again. Any help would be appreciated as I'm confused with how to handle the javascript portion.
<div id="table"></div>
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
// if changes.php = 0 then load table.php else wait another 5 seconds
$('#table').load('table.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
<script>
$(document).ready(function(){
checkForChanges();
setTimeout(checkForChanges, 5000);
});
function checkForChanges() {
$.get("changes.php", function(response) {
if(response === "1") {
refreshTable();
}
});
}
function refreshTable(){
$('#table').load('table.php');
}
</script>
Related
I am trying to exceute a javascript function after another div that has been popupated by javascript has loaded. The div has been populated first with javascript is '#am-events-booking'. The function i am trying to use is:
$(window).load(function ()
{
var i = setInterval(function ()
{
if ($('#am-events-booking').length)
{
clearInterval(i);
}
}, 1000);
alert('Page is loaded');
});
I always use $(document).ready() to run code after the page has loaded. Not sure what the difference is, but at least then it works.
Furthermore you need to use .text() to get the text inside an element.
Working code snippet:
$(document).ready(function() {
var i = setInterval(function() {
if ($('#am-events-booking').text().length) {
clearInterval(i);
console.log('Text detected!');
} else {
console.log('Waiting...');
}
}, 1000);
console.log('Page is loaded');
});
setTimeout(loadText, 2200);
function loadText() {
$('#am-events-booking').html("<h2>Hello</h2>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-events-booking"></div>
$(document).ready(findDiv);
function findDiv() {
if($('#am-events-booking').is(':visible')){ // if the div is visible
alert('Page is loaded');
} else {
console.log("loading...");
setTimeout(findDiv, 50); // wait 50ms,
}
}
$('body').html('<div id="am-events-booking"></div>');
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
you can use is :visible form JQuery to check if div is added or not
I am new to JQuery and facing an issue while refreshing div using following script
< script >
$(document).ready(
function() {
setInterval(function() {
$("#dbq").load("dbqtest.php");
}, 10000); //Delay here = 10 sec
});
</script>
<?php
echo '<section class="col-lg-6" id="dbq">';
echo '<p>My Section </p>';
echo '</section>';
?>
The section i am trying to refresh is declared as below
The problem i am facing is that whenever the page loads for the first time, table from "dbqtest.php" is not visible for 1st 10 seconds. and My section stays there even after loading data from "dbqtest.php"
You need a wrapper for reloading section. Somthing like this must work:
<script>
$(document).ready(
function() {
setInterval(function() {
$("#dbq-wrapper").load("dbqtest.php");
}, 10000); //Delay here = 10 sec
});
</script>
And the HTML:
<div id="dbq-wrapper">
<section class="col-lg-6" id="dbq">
<p>My Section </p>
</section>
</div>
Hoever you can use div inside section and reload data to that and use section as parent, anyway you need wrapper.
As you want to the first time load without delay, the solution is somthing like this:
< script >
function dbqLoader {
$("#dbq").load("dbqtest.php");
}
$(document).ready(function() {
dbqLoader(); // for first time.
function() {
setInterval(function() {dbqLoader();}, 10000); // Loop with Delay
});
});
</script>
This has to be it:
<script>
$(document).ready(function() {
$("#dbq").load("dbqtest.php");
setInterval(function() {
$("#dbq").load("dbqtest.php");
}, 10000);
});
</script>
It's very similar to M.Abooali's answer but I've fixed some issues and minimised it.
I have a fancybox that is loaded in a iframe.
<script type="text/javascript">
$(document).ready(function () {
$("#prodacom_aerohivebundle_aerohivessid_ssid_inschakelen").fancybox({
type: "iframe",
href: "http://localhost/aerohive_ap/web/app_dev.php/queue"
});
});
</script>
This is working fine but now i want to refresh the iframe every 5 seconds without closing the iframe/fancybox.
Is this possible ?
Thanks!
You can use:-
setInterval(function () {
document.querySelector('.fancybox-wrap iframe').contentWindow.location.reload();
},5000);
As per a related answer on SO
$.fancybox.update(); // update
setInterval(function () {
$.fancybox.update();
}, 5000); // calls update every 5 seconds
Plot
I save every visit to a count.dat file on my website. It just outputs 123450. So it displays pageviews till the second of website.
Problem
Firstly I was displaying it using file_get_contents but then I tried to display it every two seconds using ajax. But the resulting div is empty, always.
What I have tried so far is..
JS:
(function(d, s, id) {
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tth').load('count.dat', function(){
setTimeout(refreshTable, 2000);
});
}
count.dat
123456
HTML
<div id="tth"></div>
Additional info :
Jquery version
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Instead of
(function(d, s, id) {
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tth').load('count.dat', function(){
setTimeout(refreshTable, 2000);
});
}
try
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tth').load('count.dat', function(){
setTimeout(refreshTable, 2000);
});
}
Why don't just
$(document).ready(function(){
setInterval(refreshTable, 2000);
});
function refreshTable(){
$('#tth').load('count.dat');
}
I got this code from a website which I have modified to my needs:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<div id="links">
</div>
<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php #links',function () {
$(this).unwrap();
timeout = setTimeout(reloadChat, 5000);
});
}
</script>
In test.php:
<?php echo 'test'; ?>
So I want test.php to be called every 5 seconds in links div. How can I do this right?
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.
Try using setInterval and include jquery library and just try removing unwrap()
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php');
}
</script>
UPDATE
you are using a jquery old version so include the latest jquery version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Try to not use setInterval.
You can resend request to server after successful response with timeout.
jQuery:
sendRequest(); //call function
function sendRequest(){
$.ajax({
url: "test.php",
success:
function(result){
$('#links').text(result); //insert text of test.php into your div
setTimeout(function(){
sendRequest(); //this will send request again and again;
}, 5000);
}
});
}
you can use this one.
<div id="test"></div>
you java script code should be like that.
setInterval(function(){
$('#test').load('test.php');
},5000);
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>