I have this code which change value on click
$.post('test.php', {val:value}, function (data) {
var value = document.getElementById('value');
val.value = value;
}
I need to change value on time(for example on 10 sec) how i can do that with Ajax?
If I understand your question correctly, you need to call the server (i.e. "poll") and get the latest value based on a set time interval. If that is the case, you should look at the setInterval() function and have it call your update method. For example:
function update() {
$.post('test.php', {val:value}, function (data) {
var value = document.getElementById('value');
val.value = value;
}
}
// Call every 10 seconds
var seconds = 10;
var int = setInterval(update, seconds * 1000);
Be aware that this sort of polling, especially on Apache (my guess since you tagged PHP) can quickly use up your max connections if you have a lot of traffic and effectively DDOS your own web server.
So since you said after 10 seconds:
You want to use the setTimeout function, after the delay specified in miliseconds
function postValue() {
$.post('test.php', {val:value}, function (data) {
var value = document.getElementById('value');
val.value = value;
}
}
Now we set the click handler to call the postValue function after a timeout of 10 seconds
var seconds = 10;
$('#button').click(function(){
setTimeout(postValue, seconds * 1000)
});
Related
I have an a.php page containing a variable x = 10;
and a page b.php which contains var y = 10;
my question is can i add x + y and write the result in b.php? knowing that the ajax code is in a.php
<?php
if (isset($_POST['y']) && isset($_POST['x']) ) {
$y = 50;
$x=$_POST['x'];
echo $x+$y ;
}
?>
<script type="text/javascript">
$('button').on('click' , function(){
$.post('b.php' , { x:10, y:10 } , function(data){
$('div').html(data);
} );
} );
</script>
in first sight i think that you should use java script ajax on your a.php for sending data to page b.php but that is not enough so for getting you result a+b=something you need to use something called java script concurrence and those technique allow you to listen for a period of time on the existence of a so i will try to give you the solution o some steps :
Step 1: you've done your ajax sending data
step 2: you need to go check on the java script concurrence you have set interval and set timeout so use one of them but you will need to use set interval cause it will be more efficient
step 3 :use a Php condition called !empty()to check each period of time with the set Interval that a don't equal the default value if it's equal to that default value you should use clear Interval since keeping the execution of set Interval doesn't have any meaning and you will consume of the load of your page and your page will run slower
step 4: you've done with everything and you can do your operation.
i will let a short code for set Interval and you can find them on w3schools with execution example
var myVar;
function myFunction() {
myVar = setInterval(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
for the clearInterval
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
I've this while loop here:
$payment_timeout = time() + 300;
while ( time() < $payment_timeout ) {
if (is_valid()) {
continue;
}
break;
}
This loop get's called via an AJAX function. The plan is to wait until a customer paid something. To check this, I've build a is_valid() function which does a check against the database to check if the order was paid.
The problem is that in this case my database will crash because of the amount of requests. So I'm looking for a way to execute the check every 10 seconds or so and the other times just do the continue.
Is there a way to do this?
You can do a "long-polling" with javascript.
It is very simple: a javascript function that runs every X seconds (in your case 10) and do a call to the server.
From this post Using setInterval() to do simplistic continuous polling you can do:
// This function is called every 10000 milliseconds (10 seconds)
function refresh() {
// make Ajax call here, inside the callback call:
// call itself again after 10 seconds
setTimeout(refresh, 10000);
}
// if you want to wait 10 seconds for the first call
setTimeout(refresh, 10000);
// or if you want to call immediately the first time
refresh();
If you want to stop the calls after 5 minutes, you just have to set a counter variable and check it in the refresh function.
Something like (pseuso code):
IF YOUR_COUNTER < 5 MINUTES THEN
CALL REFRESH AGAIN
at the end of the refresh function.
Below is a simple generic implementation of a polling mechanism in Javascript, working with variable endpoint, intervals, durations, and callback.
The assumption is that you remove the while loop from the PHP code, and make sure you send back a valid JSON response. In the callback parameter I've given below the assumption is that PHP sends back json_encode(['paid' => true]).
// interval & duration in seconds
function poll(endpoint, interval, duration, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', endpoint);
xhr.onload = function() {
var message;
try {
message = JSON.parse(xhr.response);
} catch(err) {
// malformed json
}
if (duration >= 0 && callback(message) !== false) {
setTimeout(function() {
poll(interval, duration - interval, callback);
}, interval * 1000);
}
};
xhr.send();
}
// usage
var endpoint = '/your-validity-check.php',
interval = 10, // every 10 seconds
duration = 5 * 60, // for 5 minutes
callback = function(response) {
var date = new Date();
console.log(response.paid);
// return false to abort the polling when we know the purchase is paid
if (response.paid) {
window.alert('Thank you for your purchase!');
return false;
}
};
poll(endpoint, interval, duration, callback);
NB: XHR = XMLHttpRequest; what #Giacomo shows is not long-polling, long-polling is a client-server technique which involves keeping connection requests open.
I'm using now a setInterval() function to check:
let interval = setInterval( function () {
//If max time of 5 minutes exceeded (5 * 60000) I leave the interval
if ( new Date().getTime() - startTime > 300000 ) {
clearInterval( interval );
}
//Here I'm doing my AJAX request to check the payment status
}, 5000 ); //<- Execute every 5 seconds
This works great for me and is simple
We are using the following countdown function on our bidding site.
setInterval(function(){
$(".countdown").each(function(){
var seconds = $(this).data('seconds');
if(seconds > 0) {
second = seconds - 1;
$(this).data('seconds', second)
var date = new Date(null);
date.setSeconds(second);
$(this).html(date.toISOString().substr(11, 8))
}
else
{
$(this).html("Finished");
alert('finished');
}
});
}, 1000);
we pass the number of seconds where we want the counter to appear (sometimes more than once on our page:
echo "<div id=\"".$auctionid."\" class=\"countdown\" data-seconds=\"".$diff."\"></div>";
So far it should be clear an it works. Now we have a situation where when someone bids somewhere on the site - the time left for auction is prolonged for 15 seconds, which is written to mysql.
$diff variable is calculated from mysql end time, and it's passed to jQuery on page load.
The question is how to check the mysql time for that auction and sync it in jQuery counter? We had the idea to maybe check every 5 seconds and after it reaches zero to make sure it's over? Any suggestions?
It should look nice to the user.
EDIT:
This is what we have so far:
$(".countdown").each(function() {
var countdown = $(this);
var auctionid = $(this).attr('id');
var interval = setInterval(function() {
var seconds = countdown.data("seconds");
if( seconds > 0 ) {
var second = --seconds;
var date = new Date(null);
date.setSeconds(second);
countdown.data("seconds", second).html(date.toISOString().substr(11, 8))
} else {
// countdown.html("Finished <img src=\"loading.gif\" class=\"tempload\">");
startUpdateingTimeFromDatabase(auctionid);
countdown.html("Finished");
clearInterval(interval);
}
}, 1000);
});
function startUpdateingTimeFromDatabase(auctionid) {
$.getJSON("timer.php?auctionid="+auctionid, function(response) {
// console.log(response.seconds);
$(".countdown#"+auctionid).data("seconds", response.seconds);
if( response.seconds > 0 ) {
// setTimeout(startUpdateingTimeFromDatabase(auctionid), 1000);
} else {
}
});
}
This simply isn't doing what we need it to do. We need to update the seconds (query startUpdateingTimeFromDatabase) every time it reaches zero. Now I think there are two approaches. First is simply return seconds via startUpdateingTimeFromDatabase function and then do everything in the main function, second is update the div via startUpdateingTimeFromDatabase. I think first will be better but I simply can't find a way to do it properly.
Any help is appreciated. Thanks.
You store the seconds left in the elements data. So why not fetch the remaining time maybe via ajax and just pass the new seconds to the elements? Within the next interval run all times will be updated.
Something like this:
$.get("yourGetRemainingTimeScript.php", {auctionId: 1}, function(response) {
$(".countdown").data("seconds", response.seconds);
});
How you check and get the remaining time is up to you. You can set the time for all everywhere again.
$(".countdown").data("seconds", 1337);
Another hint from my side: don't loop all elements with each in the setInterval. Create the intervals inside the loop once. Then your script doesn't need to search every second again over and over for the elements.
And clear the interval when it's finished.
$(".countdown").each(function() {
var countdown = $(this);
var interval = setInterval(function() {
// do your stuff ...
// when finished stop the interval
if( finished ) {
clearInterval(interval);
}
}, 1000);
});
Full working example.
I have an ul with 9 li elements. I want to load some information to these li elements through ajax in asynch mode.
It's so simple, isn't it?
I just created a for(i = 1; i<=9; i++) loop, and called the $.post.
Fail: i will be always 10, because the for loop running more faster, then the $.post. So let's search the $.post in loop on net.
I found three solutions. Two are here, and one is here.
All of it has the same effect: does not works asynchronously. Every time it load the first, then second, then third etc... Sometimes the order is changing, but every request wait while the previous finish.
I am using WIN 10 64bit, Apache 2.4 64 bit, php 5.6 64bit. Already tried on debian box, effect is the same.
In my php file, there is a sleep(1) and an echo 'a'.
My first attempt:
$('.chartContainer').each(function(index,obj) {
var cnt = index + 1;
$.post(getBaseUrl() + 'ajax.php', {dateTime: $('#chart_' + cnt).data('time'), action: 'getChartByDateTime'}, function (reponse) {
$(obj).html(reponse);
});
});
My second attempt:
for (var i = 1; i <= 9; i++) {
(function (i) {
var $obj = $('#chart_' + i);
$.post(getBaseUrl() + 'ajax.php', {dateTime: $('#chart_' + i).data('time'), action: 'getChartByDateTime'}, function (reponse) {
$($obj).html(reponse);
});
})(i);
}
My third attempt:
function loadResponse(i) {
var $obj = $('#chart_' + i);
$.post(getBaseUrl() + 'ajax.php', {dateTime: $('#chart_' + i).data('time'), action: 'getChartByDateTime'}, function (reponse) {
$($obj).html(reponse);
});
}
$(function () {
for (i = 1; i<=9; i++) {
loadResponse(i);
}
});
Expected result:
Every 9 li loaded in 1 second in the same time.
Can somebody lead me to the right solution?
EDIT
Maybe I was not clear. In the production, the script will run for approx. 3 seconds. If I send one request to get all the data back, then it will take 9*3 = 27 seconds while the response arrives. This is why I want to send 9 request, and get back all the data in 3 seconds. I think this is why we use threads.
What I want is to get all the data for all li in the "same" time. Not one by one, or get all in one request.
EDIT 2
Ok guys, shame on me, I think I mislead all of you. There is a session start in my php script.
If I remove everything, and then just echo something and die after sleep. In this case 5 request is responding in 1 sec, other 4 is later. But I think that is a new thred.
From the jQuery manual:
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
Are you sure the requests are not sent by your browser? It is possible your php script does not allow multiple sessions. Have you tried inspecting the ajax calls with firebug/chrome inspector?
Edit:
PHP writes its session data to a file by default. When a request is made to a PHP script that starts the session (session_start()), this session file is locked. What this means is that if your web page makes numerous requests to PHP scripts, for instance, for loading content via Ajax, each request could be locking the session and preventing the other requests from completing.
The other requests will hang on session_start() until the session file is unlocked. This is especially bad if one of your Ajax requests is relatively long-running.
Possible solutions:
Do not use sessions when you don't need them
Close your session after reading/writing the necessary information:
session_write_close();
Store your sessions in Redis/mySQL for example
function loadResponse(i) {
var $obj = $('#chart_' + i);
$.post(getBaseUrl() + 'ajax.php', {dateTime: $('#chart_' + i).data('time'), action: 'getChartByDateTime'}, function (reponse) {
$($obj).html(reponse);
if(i<=9) loadResponse(++i);
});
}
var i = 1;
$(function () {
loadResponse(i);
});
Here loadResponse function is being called first time at the page load. Then it is being called recursively on the response of the POST request.
You can try this.
for (var i = 1; i <= 9; i++) {
var $obj = $('#chart_' + i);
var time = $('#chart_' + i).data('time');
(function ($obj, time) {
$.post(getBaseUrl() + 'ajax.php', {dateTime: time, action: 'getChartByDateTime'}, function (reponse) {
$obj.html(reponse);
});
})($obj, time);
}
Try sending all the data at once
var dateTime = [];
$('.chartContainer').each(function(index,obj) {
var cnt = index + 1;
dateTime.push({date:$('#chart_' + cnt).data('time'),el:'#chart_' + cnt});
});
$.post(getBaseUrl() + 'ajax.php', {dateTime:dateTime , action: 'getChartByDateTime'}, function (reponse) {
$.each(reponse,function(i,v){
$(v.el).html(v.procesedData);
});
});
php :
$ajaxresponse =[];
foreach($_POST['dateTime'] as $datetime) {
$data = $datetime['date'];//change this with your results
$ajaxresponse[]= array('procesedData'=>$data,'id'=>$datetime['id'])
}
return json_encode($ajaxresponse);
My question has part solutions on this site but not a complete answer.
On my wordpress homepage I display a counter of the number of questions answered within our webapp. This is displayed using jQuery and AJAX to retrieve the question count from a php file and works fine with this code.
jQuery(document).ready(function() {
function load() {
jQuery.get('/question_count.php', function(data) {jQuery('#p1').html( data ); });
}
load();
setInterval(load,10000);
});
Is there a way to display counting up to the new number retrieved rather than just immediately displaying it?
Something like this?
function countTo(n) {
var p = $("#p1"),
c = parseInt(p.html(), 10) || 0,
dir = (c > n ? -1 : 1); // count up or down?
if (c != n) {
p.html((c + dir) + "");
setTimeout(function() {
countTo(n);
}, 500);
}
}
Call it in your success handler
jQuery.get('/question_count.php', function(data) {
var n = parseInt(data, 10);
countTo(n);
});
Example
You will need to do a setInterval event so that the count up is visable to human eyes.
This may be a problem if you eventually reach enough questions where the count takes a long time to reach the end.
Code will look like this:
function load(){
jQuery.get('/question_count.php', function(data){
var curr = 0;
var max = parseInt(data);
var interval = setInterval(function(){
if(curr==max){
clearInterval(interval);
}
jQuery('#p1').html( curr );
curr+=1; //<-- if the number of questions gets very large, increase this number
},
10 //<-- modify this to change how fast it updates
});
}
}