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');
}
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'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>
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>
I have a <div> which I am "blinking" every 5 seconds, here is my code:
var blink = function() {
$('.leftArrowMask').toggle();
};
$(document).ready(function() {
setInterval(blink, 5000);
});
I would like to change this so the blink effect happens every 5 seconds, but only blinks for say 1 second. Currently it stays visible for a 5 second duration, and then hides for 5 seconds.
I have tried the code above, but I don't think that's quite right. How can I achieve what I require?
Try this...
var blink1 = function() {
$('.leftArrowMask').hide();
setTimeout(blink2, 5000);
};
var blink2 = function() {
$('.leftArrowMask').show();
setTimeout(blink1, 1000);
};
$(document).ready(function() {
setTimeout(blink1, 1000);
});
It first runs blink1 which hides the div, and then runs blink2 after 1 second to show the div. Blink2 in turn runs blink1 again, 5 seconds later.
var blink = function() {
$('.leftArrowMask').hide();
setTimeout(function(){$('.leftArrowMask').show()},1000);
};
$(document).ready(function() {
setInterval(blink, 5000);
});
Working DEMO
use setTimeOut function in ur set interval function
var blink = function() {
$('div').hide();
setTimeout(function(){$('div').show()},1000);
};
$(document).ready(function() {
setInterval(blink, 5000);
});
div{
width:100px;
height:100px;
background:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div></div>
</body>
</html>
I am attempting to delay the swapping of text in a div. It should operate like a slider/carousel for text.
I must have the code wrong, as the final text replacement never happens.
Also, how would I animate introducing the replacement text (window blinds, for eg.)?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showDiv").click(function() {
$('#theDiv').show(1000, function() {
setTimeout(function() {
$('#theDiv').html('Here is some replacement text', function() {
setTimeout(function() {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
}); //END $(document).ready()
</script>
</head>
<body>
Below me is a DIV called "theDiv".<br><br>
<div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
This text is inside the Div called "theDiv".
</div><br>
<br>
<input type="button" id="showDiv" value="Show DIV">
</body>
</html>
.html() only takes a string OR a function as an argument, not both. Try this:
$("#showDiv").click(function () {
$('#theDiv').show(1000, function () {
setTimeout(function () {
$('#theDiv').html(function () {
setTimeout(function () {
$('#theDiv').html('Here is some replacement text');
}, 0);
setTimeout(function () {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
jsFiddle example
Try this:
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);
You can also use jQuery's delay() method instead of setTimeout(). It'll give you much more readable code. Here's an example from the docs:
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
The only limitation (that I'm aware of) is that it doesn't give you a way to clear the timeout. If you need to do that then you're better off sticking with all the nested callbacks that setTimeout thrusts upon you.
This is how I solved the problem
The menu closes a few seconds after mouse out (that if hover didn't fire),
//Set timer switch
$setM_swith=0;
$(function(){
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse").mouseleave(function(){
$setM_swith=1;
setTimeout(function(){
if($setM_swith==1) {
$(".navbar-collapse").collapse('hide');
$setM_swith=0;}
}, 3000);
});
$(".navbar-collapse").mouseover(function() {
$setM_swith=0;
});
});