Update the database when timer counts down to zero - javascript

I have a countdown timer which uses ajax calls to update itself. Something like
<div class="timer5">--:--:--</div>
I want to call a PHP function (only once) using jQuery which will update the database once the timer goes to 00:00:00.
The thing is, the timer can be increased at any time (it's an auction) so I can't just run a script after X time that will update the DB. I have to call the script when the timer really reaches zero.
How can this be done? Is there a some sort of an event in jQuery for that?

In my experience jquery countdown plugin is good for these things.Using this plugin you can easily do this.
var auction_id = array('1','2','3','4','5') // auction ids in array
jQuery(auction_id).each(function(key, val){
jQuery('.countbox-'+val).countdown({
//other options ref in plugin link
onExpiry: function(){
sold(val); // passing argument
//ajax call goes here to update db
}
});
}
To update your clock, I already answered here. The second part of the answer will be help full for you.
if you want to create multiple auction clock in page.you need to collect all auction ids
in array.then you can create clock for each of auction.

If it's done using AJAX you already get a call to your server, updating the timer and knowing how much time is left. Do the database update there.

Related

Create a count up timer in React JS that resumes on page change

I have a timer function that counts up along with start, pause, and reset functionalities. Now, I have to make it so that when the page is changed within the application or refreshed, the timer is paused and resumed when I return to the timer page. I've read about using sessionStorage, localStorage, and useContext, but am not able to figure out how to use these in my program. How can I accomplish that?
As you said, I would recommend using localStorage. Session storage only persists until the user closes the tab, but localStorage will persist until removed. You can use localStorage as follows:
//Set item:
localStorage.setItem("foo", "bar") //The first item is the key, the second is the value you are storing
//Get item:
localStorage.getItem("foo") //Will return "bar"
I would recommend storing the timestamp for the end-time of the timer in localStorage when the timer is first started. Then, you can remove this value when the timer reaches 0. This will allow you to also then read the value from localStorage when the page is first loaded to see if it has a value, and if it does you can know when the timer will end.

Creating a delayed search with a delay reset

I have a search function that I need to fire about 2 seconds after the user stops typing in a search bar (which then filters entries of a table). If the user types or otherwise edits the contents of the search bar within those 2 seconds, the timer resets back to 2 seconds before the search request fires.
If I need to, I will post example code of what I have if requested, but I have little idea what should be included at the moment.
Edit: Tags and fact that the project is in Laravel is irrelevant.
This is not a laravel problem but off JavaScript
this should get you started in what you're trying to achieve:
var countDown;
const functionForSearching=()=>{
//do your searching here
}
const delayedSearch() {
clearTimeout(countDown);
countDown = setTimeout(()=>{
//call your search Function Here
functionForSeaching()
},2000);
}

How to use the Firebase real time database for web application

In my website I'm Showing my database after user has given the database name, Is there any way I can constantly update the web shown databasebase without refreshing the page . I've tried using setInterval but it's not working for some reason .
function c(){
setInterval(beta, 1000);
}
function beta(){
var d = document.getElementById("opopo").value;
var firebaseRefff= firebase.database().ref('LOCATION/'+d);
firebaseRefff.on('child_added', snap=> {
var slot=snap.getKey();
var alloted=snap.child("ALLOTED").val();
var date=snap.child("DATE").val();
var limit=snap.child("LIMIT").val();
var time=snap.child("TIME").val();
$("table tbody").append(""+slot+""+alloted+""+date+""+limit+""+time+"Null");
});
}
You do not need, and should not use, setInterval to trigger the queries. What you have in your beta() function looks pretty good.
firebaseRefff.on('child_added', snap => {}) means "whenever a child is added under this location, trigger the callback function (empty in my example) with the parameter 'snap'". It will also be called once, initially, for each child that is already at that database reference location.
You need to make sure you've called beta() once to setup this trigger.
If you're still having problems, you might want to insert logging to make sure beta() is being called, what the full reference path is, if the callback is ever triggered, and if your jquery string is correct.

Continuously Add | Update | Refresh data from database to a page without post back

After a new data has been inserted into database, I want the page which is used to display the data from database to be refreshed/updated and show the new data automatically without hitting the refresh button (like in Facebook feed page, or right here in stackoverflow.com, when new answer posted, it shows an alert of that answer immediately)
What techniques I should use to archive that?
There is a function in JavaScript called setInterval that takes two arguments: a function to execute, and an interval in milliseconds with which the function is run. So, you can have a function called update that fetches all the new data and appends it to your tables, and pass it to setInterval to continuously execute. To run an update function every 5 seconds, you can do something like this:
function update() {
//fetch new data using AJAX and update tables
}
setInterval(update, 5000);
For make the page add new row to waiting customer table automatically
You have to make an ajax call in every few seconds to check whether any new row added if yes then you have to fetch that row and append it to table.

Sync javascript countdown with server time

I will try my best to explain my problem in a correct english.
I have a global countdown in ajax which display the timeleft (calculated with server time) with a setinterval.
The aim is to call a function only once when the timeleft reach some target.
$timeLeft = strtotime($wallet->date_upd)- time();
if ($timeLeft <= 3)
{
function() 'this function update or not $wallet->date_upd to add time'
}
As the ajax countdown is global, and due to transfer and rendering delays, the function can be called by several users.. Any ideas?
I asume that when the timleft is over and your script runs that you also update the date_upd to a new time?
In that case you can just do the update and check if there is an affected row.
If another script was faster than the WHERE in the query will not work anymore and the affected_rows will be 0.
$new_date_upd = date('Y-m-d H:i:s', strtotime('+2 hours'));
mysql_query("UPDATE wallet SET date_upd = '{$new_date_upd}' WHERE date_upd = '{$wallet->date_upd}'");
if (mysql_affected_rows() > 0) {
// this script is the only one doing this stuff
}
So that should be something working in MySQL.
If you're managing your own server and can install some stuff then I advise you to checkout Redis.io which is a great tool for doing in memory stuff ( like an advanced memcache ) and it can also help you with doing 'locking' in a nice way

Categories