AJAX jQuery refresh div every 5 seconds - javascript

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>

Related

Create img each x time

hello I need a script that has an image that shows for 30 seconds after it disappears but after 5 minutes it appears again and disappears after 30 seconds and so continue
Can you help me please?
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$(".content2").fadeIn(1500);
},3000);
});
</script>
<div class="content2" style="display:none;">IMAGE</div>
You could try something like this:
HTML
<div class="content2" style="display:none;">IMAGE</div>
JAVASCRIPT/JQUERY
<script type="text/javascript">
$(document).ready(function()
{
var showImageFor30sAndHide = function()
{
$(".content2").fadeIn(1500).delay(30 * 1000).fadeOut(1500);
};
// Start a interval that call previous method every 5 minutes.
setInterval(showImageFor30sAndHide, 5 * 60 * 1000);
});
</script>
setInterval and setTimeout can be used together.
hideInThirty();
setInterval(function() {
$("div").show();
hideInThirty();
}, 330000);
function hideInThirty() {
setTimeout(function() {
$("div").hide();
}, 30000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>IMAGE</div>

refresh table only on changes

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>

Get data from ajax every 2 seconds and display it

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');
}

Append unique value to url in Jquery function to prevent Internet Explorer caching

Under Chrome, Safari and Firefox the below function works fine, but under IE I believe its caching the page and doesn't actually refresh
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#checkuser').fadeOut('slow').load('chat_check.php').fadeIn("slow");
}, 15000);
</script>
<div id="checkuser" style="width:1px;height:1px;margin:0px;padding:0px;overflow:hidden;"></div>
Now I want to append a string to the url so IE doesnt cache the page
<script type="text/javascript">
var auto_refresh = setInterval(
fetch_unix_timestamp = function() { return parseInt(new Date().getTime().toString().substring(0, 10)) }
var timestamp = fetch_unix_timestamp();
function()
{
$('#checkuser').fadeOut('slow').load('chat_check.php?t='+timestamp).fadeIn("slow");
}, 15000);
</script>
But I think I'm doing something wrong with appending the timestamp variable to the url. I need the fix.
TIA
WORKING CODE BELOW:
In IE I had to wrap everything in $(document).ready(function() and add $.ajaxSetup({ cache: false });.
Seems to be the only way to prevent IE from caching the page. The meta tags dont work with IE9 to prevent caching. Anyway, here's the working code below:
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#checkuser').load('chat_check.php');
}, 15000);
});
</script>
Why not just use this:
var timestamp = Date.now().toString();
http://jsfiddle.net/jfriend00/Betuf/
The only way to prevent IE from caching the JQuery request is with AJAX it seems
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(
function()
{
$('#checkuser').load('chat_check.php');
}, 15000);
});
</script>
Converting the timestamp into integer is not required, try the belwo code.
<script type="text/javascript">
var auto_refresh = setInterval(
fetch_unix_timestamp = function() { return (new Date().getTime().toString().substring(0, 10)); }
var timestamp = fetch_unix_timestamp();
function()
{
$('#checkuser').fadeOut('slow').load('chat_check.php?t='+timestamp).fadeIn("slow");
}, 15000);
</script>
Try:
<script type="text/javascript">
$(function(){
var auto_refresh = setInterval(
function(){
var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
$('#checkuser').fadeOut('slow').load('chat_check.php?t='+timestamp).fadeIn("slow");
},
15000
);
});
</script>
Use a semicolon ; after the return statement.

Javascript Redirect Not Working

I have the below code in a HTML page on my site. The url parameter is loading fine on a pixel fire right above it but for some reason the redirect doesn't want to fire. Anyone have any ideas? It might be an IE issue but not sure.
<script type="text/javascript">
$(document).ready(function() {
setInterval("window.location = '{{$url}}'", 4000);
});
</script>
<script type="text/javascript">
var url = '...';
$(document).ready(function() {
setInterval(function() {
window.location.href = url;
}, 4000);
});
</script>

Categories