Send an alert from an open page to another (php, javascript, html) - javascript

I am developing a website that has a receptionist page and a user page with multiple user logins. The logged in users are displayed in a table at the receptionist page and one of the columns of the table is the status of the user ( ready or busy). The table is refreshed using ajax every 5 seconds to prevent the web page from refreshing. Each user can log in ( with thier own page) and change their status( ready to busy or busy to ready).
The table is stored in a sql database.
The user page has the option to change the state of the logged in user from ready to busy ( or vice verse) with a drop down menu and a submit button. What i need is to also send and alert or sound to the receptionist page whenever any user switches to the ready state.
I have looked all over the internet but none of the answers have worked for me.
Thanks for your replies. I understand that I could use ajax to query the database to see if a user is ready, however that will cause it to make a notification every time it checks. What i need is for the receptionist to be notified only 1 time each time that a user sets status to ready. I was thinking of making another table that gets updated every time a user changes their status to ready and time stamp it. So that if there is a change in the time stamp it means that some one newly updated it so the signal should be sent.
I made the table and made a php page that returns a string with the time stamp of the table but i dont know how to use the returned string in java script.

I figured it out. I made an SQL table with a time stamp, whenever any user sets their status to ready the time stamp gets updated. I made a java script that reads the time stamp every few seconds. If the time stamp is different than the initial time stamp then a sound is played.

#O.Rases gave you the best solution.I did something like this in past using ajax and php.
A solution can be the following.
1 Every 10s, sent a Ajax call to the server.
2 In the server, using php, you can select users that changed their status in the last 11s (+1s for time-consuming script in the server).
3 after selection is done, sent the user back to the receptionist page.
hope it helps

Related

Ajax, refresh table rows on new additions

I'm working on a Django project that runs a background task every time a form is submitted. It takes roughly 2sec to complete each task, when completed, the results are saved, ajax is supposed to perform page refresh but not the whole page, and what I have so far is:
$.ajax({
success: function(){
setInterval('location.reload()', 10000);
}
})
It works as intended, but it's wrong. I have rather limited experience with js. However, I'd like to refresh only the newly added row(s) in the table. I came across jquery .load() but I've been staring for a while now, please any help?
EDIT:
So js/ajax is just responsible for page refresh on a specific row like so
id
name
date
log
status
1.
task1
today
pending...
pending...
Each row has a corresponding table in the database, on task completion log and status are no longer pending but updated with DB objects.
Django handles form validation and submission on another page which gets redirected to this one with the tabular result, the user waits for a few sec and boom, ajax drops the magic.

Create a timer which will auto restart after every button click with the same information visible to all the users who are currently using the site

I am planning to develop a website which works completely based on a timer. This is basically for a discount sales. Here I might have a number of users participating at the same time where the timer is initialized to zero , and each time users click the discount button, the timer starts from 11 sec, counting down to zero. And if any users click the discount button in between, then again the timer needs to starts from 11 sec. And it will continue until when no users click the discount button. Here I am able to restart the timer, but its working is not synchronized in all browsers. Means, the timer that one users see in his browser is not same to the one another user see in his browser, that too for a same product, which all users are playing for. The concept is more of that of bidding only. Can anyone please help me with this?
Your site needs to not only to reset the counter when the button is clicked, but also check the counter during the countdown. So basically on a timer on the client side you'll need to make an AJAX call back to update the counter.
So on the client side:
- Start the counter when the page is loaded with the current value.
- React to a click of the Discount button by sending a message to the server with with an AJAX call or by reloading the page. Likely AJAX as you need it anyway for the next item.
- Check the server regularly for updates. Given we only have 11s, you are going to have to decide on timing. Every 3-4s might be best. Make an AJAX call back to get an update.
On the server side:
- Send out pages to clients with the current counter value to start with.
- React to a press of a Discount button by resetting the counter.
- React to an update request with a quick return of the state of the counter.
I think all of those steps are required to get this to work. How you do them exactly is up to you, especially seeing as you've provided no code or anything.

How to simulate Click in cronjob?

I'm using a web service to transfer files from ftp to dropbox. I want to update the version in dropbox every week. Right now I have to go into the service and manually click the 'transfer now' button every week.
I'd like to create a cron job or other automated solution that runs every week, logs into the service and clicks on a set of buttons with an interval of 60s between each button (to give the service enough time to start the action).
The buttons are nothing but a div with an id and an actual click on it triggers a JS listener.
The way I was going to approach this was to write a cURL script in php that loads the page and then tries to do the action that occurs when the button is pressed (i.e. triggers the listener). It's not easy though and before I spend too much time on it, I'd like to know if anyone can think of a simpler approach?
The basic structure of the process should be:
Runs automatically every week (e.g. on a LAMP server or using a web service)
Logs into service (simple form triggering a POST request)
Clicks on all the buttons with class 'buttonNow' and waits x amount of seconds between the clicks
Ideally it would send some kind of confirmation once the task has been completed

With javascript how do you time when a DIV is visible and then record that time length to a local DataBase

I am trying to record how long a person remains on a page in a web app, when viewed on an iOS device, and then record that number, if over 2 seconds, to a local database. Of course the app is written in HTML5/CSS3/JavaScript so the page is actually just a DIV that slides, fades etc. in/out of view on the iDevice.
The app will be used offline and the data will be recorded locally until the user goes to the server to update the app with weekly content. At that time the content from the local database will be transferred to the server.
I have a database created (CBNapp) and the necessary table (CBNapp_Usage) with a column for each page (NewKnife, Trivia, True, Musings, Jokes, Movies, Stories). My idea is to record each time to the appropriate column. In this way I can count the entries under each column to get page visits and use the actual seconds to determine average length of a page's visit etc. I would then record the time of the download to the server and subtract it from their previous download date to get a time frame for the recorded usage.
I have researched this for a while and have come across a question here on stackoverflow at
jQuery: How to bind an event for the div when it becomes visible?
that has an answer (the last one seems best to me) that I think will work but I can not seem to transfer it to my specific needs. This is my first web app. I am ok at HTML and CSS but a newcomer to JavaScript and jQuery so I will need specific examples to understand. Please be gentle :-)
The DIVs I need to record the visits on, all have a class of "root" and have ids as follows:
ContentNewKnife
ContentTrivia
ContentTrue
ContentMusings
ContentJokes
ContentMovies
ContentStories
I tried to identify the DIVs using the following
var ContentPages = $("div#[id*=Content]") and $(div.root);
which throws an error.
Could anyone show me how to do what I am trying to accomplish either using the code referenced above or with a completely new approach.
Any ideas are welcome.
Thanks,
Ted
OK the first thing you need to do is to capture the time.
I start an interval that updates every second (1000 ms). This rounds up the seconds you will notice. If you want more precise, you can have the timer go 500ms or even 100ms and then divide to get seconds).
Then you trigger the start and stop on the existing pre and post page transition events.
http://jsfiddle.net/TheFiddler/akEEx/6/
Rather than build this from the ground up, you might consider using an out-of-the-box mobile analytics program:
I'd recommend http://www.localytics.com/
but these might work too:
https://mixpanel.com
http://urbanairship.com/
http://www.flurry.com/
The benefit is that you can capture a lot more than just time on page or content. And it can integrate with any online stuff you might want to do.

Score system based on time in Javascript

I have used a jQuery script in order to have a countdown script on a php page that I am doing, but I would also like to have a score system in it based on the time the user takes to answer some questions.
I am using some drag and drops and click in a certain link into an image map -which is the only correct link in the webpage- and in the three pages I am using this countdown, but I would like to, once the user has completed the drags&drops or clicked the links, get the number on the countdown just when the user clicked on a "submit" button...but I am not even sure if I can do this.
Alternatively, could I use any countdown script that would let me get the actual number that is being showed just when the user click on the submit button?
Thanks a lot everybody in advance!
Only use the javascript countdown for display purposes, you cannot trust the client.
Keep the count down server side. Store it in the SESSION variable, or in the database.
Javascript is insecure because the client can change it. I could save your page on my machine, open it up, and modify how the timer reports and you'd get a completely different time than you should get. I could also just change the variable using the browsers address bar. The client can always, always change anything in javascript, and you must, absolutely must rely on the server to keep your users honest.
Why not just stash the time (as a numeric value) when you want the timer to start, and then just check the difference when you want to know how long it's been? In other words, you've already got the client computer's clock counting, because that's what clocks do. Just remember what time it was when the drag&drop completes (or whatever point in time serves as your reference), and then check the time again in an event handler for the submit button.

Categories

Resources