How is the Pop up alert which is displayed on stackoverflow when you are answering a question and someone submits another answer created?

Question

Ok, so you know when you're answering a question and are in the middle of typing it, and someone else posts an answer to your question and you get a little popup that says there is a new answer to the question? My question is how do you do that? I think I have the basic concept down... A question is answered, added to the database. The page your on keeps checking the database for new answers, and if there is something new displays a popup. (I'm not sure if that's how it's done, but just and idea) Anyway, I'm trying to create an application with similar functionality to that popup using php, and jQuery / Ajax / something else? I have a page that will be on the screen and will display information from the database. What I need: to figure out how to get that popup to display only when there is new content added to the database. Thanks for the help!

I should also add... if anyone has any tutorials, or code snippets to share about the ajax / jquery integration with sql that'd be great. I'm pretty decent at PHP but totally new to ajax and jquery :-/

Answer 1

Create a timer in Javascript and call an AJAX endpoint that provides you with messages to diplay or that delivers HTML to place in a placeholder at the top of each page. If you get data returned then insert that into the page DOM using jQuery.

Answer 2

You got the basic concept - I don't know for certain, but this does seem to be the obvious way to do this.

As for the specific question - the result from the ajax call should indicate if an answer has been added or not. Only display the popup when the results indicates that a result has been added.

Answer 3

when you first load the question page, also read the number of answers.

Now poll the server with ajax requests every few seconds/minutes that return the number of answers..

If the number of answers is greater than the number when you first loaded the question then show the message that additional answers have been posted..

Answer 4

You can use jQuery to do almost all of this.

Create a script that will return the needed JSON data, probably just the id of the current article and then the count of answers. In your page, create a timer that performs an ajax call to the script every ~30 seconds. In your success callback function, compare the number of answers that were returned against the number of answers currently on the page. If the answer is greater, then perform a notification using the show() or fadeIn() functions. (You can either have the message HTML loaded when the page loads or you can append/prepend all of the html for the message with the ajax call.

This is a vague answer, but the question is actually very broad so you could do this in a million different ways. If you need some help with it, you can PM me.

Answer 5

This is a tutorial on how to do the actual notifications.

As for the querying, it's a fairly simple AJAX call to the database on a timed interval to check for new results. If count > 0, then fire the notification process.

The refresh method on this tutorial could easily be re purposed for such notifications.