I am trying to display a message before an auto refresh div. I have created this code for the auto refresh.
$(document).ready(function()
{
if setInterval(function() {
$("#pagere").load(location.href + " #pagere");}, 10000);
});
I also need to display a message like "page auto refresh in 3 sec...". How can I do that?
Try this :)
$(document).ready(function()
{
var alertTimeSec = 3000; //alert time in ms
var delayTimeSec = 10000; //time delay to refresh in ms
setTimeout(function () {
alert("3 Sec more")
}, (delayTimeSec-alertTimeSec));
setInterval(function() {
$("#pagere").load(location.href + " #pagere");}, delayTimeSec);
});
<script>
setInterval(function()
{
$("#pagere_container").load(location.href + " #pagere");
}, 3000);
</script>
<div id="pagere_container">
<div id="pagere">
page auto refresh in 3 sec...
</div>
</div>
setTimeout(function() {
$('#load_status').show();
}, 5000);
$("#pagere").load(location.href + " #pagere");}, 10000);
-this will give you 5 sec of timeout before refresh
Related
I'm get data from excel file with php.After this data get from php file with ajax.In fact, I want to get data from excel file once per 5 min and print page.How can i do?
data.php
include "Classes/PHPExcel/IOFactory.php";
try {
$url="https://docs.google.com/spreadsheets/d/1ngOuUvGk07r69HEonmYdjl9En1F1COAB8fAhNXNT1Y8/pub";//Bu url 'i load'ın içine girdiğimde File not exist hatası veriyor.Ben localde denemek için aşağıdak inputfile .
$inputFile = 'a.xlsx';
$objPhpExcel = PHPExcel_IOFactory::load($inputFile);
$rows = $objPhpExcel->getActiveSheet()->toArray(null, true, true, true);
$i=0;
$data_en=array();
$data_tr=array();
$word=array();
foreach ($rows as $row)
{
$i++;
$data_en[$i] = $row['C'];
$data_tr[$i]= $row['D'];
echo $data_en[$i];echo "<br>";
}
}
catch(PHPExcel_Exception $e)
{
echo $e->getMessage();
}
index.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.get("data.php", function(data){
$('#container').html(data);
});
});
</script>
<body>
<p id="container"></p>
</body>
You need to use setInterval() javascript function and set it to 5 minutes.
The JavaScript setInterval() function can be used to automate a task
using a regular time based trigger.
also you can clear scheduled work by clearInterval()
it is a native JavaScript function.
var duplicateWork = setInterval(function() {
// Do something every 1 seconds
}, 1000);
// To cancel scheduled work use similar code
clearInterval(duplicateWork);
look at the example :
var l = $('#list');
var duplicateWork = null;
var seconds = 1000 * 2;//2 second
$('#start').click(function(){
$('#title').html('Start : add item once per 2 second');
duplicateWork = setInterval(function() {
// Do something every 2 seconds
l.append('<li>duplicate work</li>');
}, seconds);
});
$('#stop').click(function(){
$('#title').html('Stop');
clearInterval(duplicateWork);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>
<h3 id="title"></h3>
<hr />
<ul id="list">
</ul>
In your case , you can use similar code
$(document).ready(function()
{
var seconds = 1000 * (60 * 5);//5 minute
var refreshId = setInterval( function() {
$.get("data.php", function(data){
$('#container').html(data);
});
}, seconds);
});
I'm working on a notification message i want to load new message from a page call check_new-reply.php in every 10 second using Ajax and Jquery but my code is not showing anything i don't know what the error is please can someone help me out?
<script>
$(document).ready(function(){
$(function(){
var timer = 10;
var test = "";
function inTime(){
setTimeOut(inTime, 1000);
$("#timer-u").html("Time refreshing"+timer);
if(timer == 8){
$("#message-u").html("Loading....");
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
})
timer = 11;
clearTimeout(inTime);
}
timer--;
}
inTime();
});
});
</script>
Here is PHP
<?php include($root . '_inc/Initialization.php');?>
<?php require_once("_inc/dbcontroller.php"); $db_handle = new DBController();?>
<?php
$users = $_SESSION['username'];
$newquery = "SELECT * FROM blog_post
INNER JOIN replys
ON blog_post.UserName = '$users'
WHERE replys.read = 0
ORDER BY rtime";
$newhisory = mysql_query($newquery);
while($newrow = mysql_fetch_array($newhisory)){
echo '<div class="fnot">'.htmlentities($newrow['blog_title']).'';
echo '<span class="ttcredit"><font color="darkgreen">94</font> </span> <a class="reqttag reqttag2" href="#">No</a> ';
echo '</div>';
echo '<input type="hidden" id="unr" name="unr" value="'.$newrow['BID'].'"/>';
}
?>
If you just want to call it every 10 seconds, use 10000 milliseconds in the setTimeOut . Also, it is best to call again the function only when the previous Ajax call is done:
$(document).ready(function(){
$(function(){
var test = "";
function inTime(){
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
setTimeout(inTime, 10000);
});
}
inTime();
});
});
To call any function with some intervals you will have to use
<script>
$(document).ready(function(){
window.setInterval(function(){
myAjaxCall();
}, 10000);
});
function myAjaxCall() {
alert("Hi");
$("#message-u").html("Loading....");
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
});
}
</script>
window.setInterval will call your function on every 3 seconds with above code, and will generate an alert message,
what you have to do is set your ajax code in a function and use above method, change 3000 to 10000 and your ajax call will defiantly work with every 10 seconds,
This is the code which will call our javascript function on every 10 seconds,
just copy it and check it, you will get an idea, also i have included the jquery as we have discussed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
<script>
$(document).ready(function(){
window.setInterval(function(){
myAjaxCall();
}, 3000);
});
function myAjaxCall() {
alert("Call your Ajax here");
$("#message-u").html("Loading....");
$.POST("check_new_reply.php",{testing:test}, function(data){
$("#message-u").html(data);
});
}
</script>
javascript too fast when i set setInterval(function() down (or up i guess, speed wise) to 100 or 500 and wont load mypage.php as it doesn't have time i think? don't want to slow counter down either. so is there a php equivalent that can? (with the little number display like this, see jsfiddle) or is there a better javascript counter ? would prefer php, any ideas?
Thanks heaps, any help would be great.
Changed the page link to # as it will freeze things otherwise
http://jsfiddle.net/aEXgB/2/ Also added exit;but didn't help.
<html>
<head>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)>=3000) {
location.href = 'mypage.php';
exit;
}
i.innerHTML = parseInt(i.innerHTML)+1;
}
setInterval(function(){ countdown(); },.75);
</script>
</head>
<body>
<div style="margin-left:20px; float:left;"><p>Countdown:<font color="#33CC00"> <span id="counter">10 </span></font></p></div>
</body>
</html>
replace
setInterval(function(){ countdown(); },.75);
with
var t = setInterval(function(){ countdown(); },.75);
then just before the exit in the function, add;
clearInterval(t);
First, I don't understand why it's called a countdown when you count UP.
Second, I think it's better to update the counter and THEN check the value. That way you don't have an extra call to the coundown function.
Third, clear the interval before changing location because the interval is probably getting fired again too quickly.
Fourth, this won't actually work in jsfiddle because of how jsfiddle uses iframes :)
var interval = setInterval(function(){ countdown(); },.75);
function countdown() {
var i = document.getElementById('counter');
i.innerHTML = parseInt(i.innerHTML)+1;
if (parseInt(i.innerHTML)>=3000) {
clearInterval(interval);
window.location.href = "mypage.php";
}
}
JS:
var sec = 0;
var interval = 750; // milliseconds
var stop = 5; // seconds
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
if(document.getElementById("seconds").innerHTML < stop) {
document.getElementById("seconds").innerHTML=pad(++sec%60);
} else {
location.href = 'http://google.nl'
}
}, interval);
Html:
<div id="seconds></div>
Fiddle:
http://jsfiddle.net/5tM3A/5/
I have a php page with a variable that is set true or false on pageload. I want to show a specific div when the variable is true and then the div disappears after x seconds. When its false the div stays hidden.
My code shows the div but it doesn't disappear after x seconds.
if($showNotification == TRUE){
echo "<div class='notification'>notification!!</div>";
echo '<script type="text/javascript">
$(document).load(
function() {
$("div.notification").fadeIn();
setTimeout(function() {
$("div.notification").fadeOut("slow");
}, 3000);
});
</script>';
}
Replace your JS with this:
$(function() {
$('div.notification').hide().fadeIn().delay(3000).fadeOut('slow');
});
Demo: http://jsfiddle.net/nEsg9/
Instead of using:
$(document).load( ...
use
$(document).ready( ...
if($showNotification == TRUE){
echo "<div class='notification' style='display:none'>notification!!</div>";
echo '<script type="text/javascript">
$(document).load(
function() {
$("div.notification").fadeIn();
setTimeout(function() {
$("div.notification").fadeOut("slow");
}, 3000);
});
</script>';
}
It shows because it is not hidden before you do the fadein. So fadein has no effect (it is already there).
Use ready instead of load.
Here is a working example, but without fade in, cause it's always displayed
http://jsfiddle.net/2JKxr/1/
$(document).ready(
function() {
$("div.notification").fadeIn();
setTimeout(function() {
$("div.notification").fadeOut("slow");
}, 3000);
});
<script>
$(document).ready(function() {
$.get("database.php", function(data){
var xp = data + "%";
$('#exp_bg').animate({
width: xp
}, 1500, function() { });
});
});
</script>
Database.php:
<?php
$xp = 50;
$level = 100;
$xp_percent = $xp * 100 / $level;
echo $xp_percent;
?>
What i'm trying to do, is that if $xp_percent increases in database.php, then #exp_bg's width will animate into desired width without refresh.
I tried to do that with time interval, which takes data from database.php every speciefed interval of time, but i failed doing that.
Could anyone help me with that?
Your probably going to have to put it inside a setTimeout function like so:
var refreshId = setInterval(function() {
$.get("database.php", function(data){
var xp = data + "%";
$('#exp_bg').animate({
width: xp
}, 1500, function() { });
});
}, 1000);
This would check every second.