Click here to Skip to main content
14,176,951 members
Click here to Skip to main content
Add your own
alternative version


77 bookmarked
Posted 26 Dec 2008
Licenced CPOL

How to Show Messenger-Like Popups Using AJAX

Rate this:
Please Sign up or sign in to vote.
How to show Messenger-like popups using AJAX.


You have already been using MSN Messenger to chat with friends, relatives, businesses, and much more. When someone signs in, a small popup window shows up on the right-bottom side of the screen, informing you that your friend X has just signed in. It is a nice way for MSN Messenger to notify you about changes in the contacts online.

What about using the same technique on an ASP.NET page? In other words, suppose that you are monitoring a database table where users place their orders online, and you would like to be notified whenever a new request comes in to the database table.

In this article, we will see how to implement a Messenger-like popup window whenever a new record is added to a database table. The popup will show on the bottom-right side of the screen on top of an ASP.NET page, notifying you that a new record has been added. We will use ASP.NET 2.0 AJAX 1.0 Extensions and, mainly, the client library that accompanies with the AJAX extensions.


In this article, we will use a database table called MyInbox simulating your inbox on a mail server. This table contains EmailFrom, Body, and Date columns. These columns shall resemble an email that you have received in your inbox as an example.

Using the code

Constructing the JavaScript

We will create a new AJAX enabled website, then open the Default.aspx page in the HTML source, and start adding our JavaScript that will handle showing and hiding the popup and querying the database to see if there are any new emails inserted.

First of all, we will define a global variable.

Listing 1:
var numberOfEmails_original= 0;

The numberOfEmails_original variable shall hold the number of emails present in the database table when the page first loads. We will see later on when and how this variable is used. Then, we attach an event handler for the Application’s Init method.

Listing 2:
function applicationInitHandler(sender, args) 

What we are doing at the initialization of the Application is do a script service call to execute the GetLatestNumberOFEmails method located at the AJAX service that we will discuss later on in the article. We are specifying the success callback function to run when a response is sent back from the server.

The idea in here is that, the first time the page loads, we get the current number of emails from the server and store it in the numberOfEmails_original, as shown in the OnCurrentNumberOfEmailReady callback function below.

Listing 3:
function OnCurrentNumberOfEmailsReady(result, userContext, methodName) 
  numberOfEmails_original= result;
  // Start Checking

As you can see, we set the result returned by the AJAX service to the local variable numberOfEmails_original, and then call a method named StartChecking().

Now that the original number of emails currently stored in the database is known, we can start checking from now on for any new email that is added to the database table.

The StartChecking method is as follows:

Listing 4:
function StartChecking() 

The StartChecking function does nothing but a call to the same AJAX service method, InboxService.GetLastestNumberOfEmails. However, this time, we are passing in another success callback function, which is the OnLatestNumberOfEmailsReady. The success callback function is shown below.

Listing 5:
function OnLastestNumberOfEmailsReady(result, userContext, methodName)
  var numberOfEmails_new = result;
  if (numberOfEmails_new > numberOfEmails_original)
    $get("modalBody").innerHTML = numberOfEmails_new - numberOfEmails_original;
    // Update the count here
    numberOfEmails_original = numberOfEmails_new;
  // Start checking again
  window.setTimeout(StartChecking, 10000);

The method starts by placing the result from the AJAX service into a local variable called numberOfEmails_new. This variable now holds the latest number of emails located in the database table.

Then, the code checks if the number of emails currently stored in the database is greater than the number of emails originally the page had requested from the database. This means that new emails we have were inserted into the database since the last time the code queried the database.

If this is true, then a call to the ShowPopup() function is done that is responsible for showing a popup the MSN Messenger way. Then, the number of new emails is filled in the body of the popup window, informing the user on the number of new emails received, and finally, the code sets the current number of emails in the database table to the numberOfEmails_original variable. This way, the numberOfEmails_original variable is synchronized with the emails’ number in the database. Refreshing the value of this variable is very important for later checking on the client side.

The last statement in this method is a call for the StartChecking method encapsulated in a window.setTimeout function call. As you can see here, the same logic will run according to the milliseconds placed in the setTimeout function. So, as long as the page is running, the checking will continue, and every time a new email is added to the database table, a pop up window is shown on the screen to notify the user about the new emails that have been added.

The figure below shows the page when it first loads.

Figure 1: Page when first loaded

When a new record is inserted into the database while the above page is opened, you will notice a small messenger like pop up window is shown on the bottom-right side of the page, as in Figure 2.

Figure 2

You can clearly see a popup window in the figure above that shows when the page checks the database table on the server and finds that the number of emails currently on the database is greater than the number of emails stored on the client side.

The last two functions to discuss are the ShowPopup and HidePopup that are used as utility methods to show and hide the popup window on the page.

Building the AJAX service

In this final section of the article, we will see the simple AJAX service that we have created that the client code will use to access the database and retrieve information about the number of records stored in the database.

Listing 6:
public class InboxService: System.Web.Services.WebService
  public int GetLatestNumberOfEmails()
    int numberOfEmails = 0;
    using(SqlConnection conn = new SqlConnection
      using(SqlCommand cmd = new SqlCommand("GetLatestNumberOfEmails", conn))
        cmd.CommandType = CommandType.StoredProcedure;
        numberOfEmails = (int)cmd.ExecuteScalar();
    return numberOfEmails;

The first thing to notice is the ScriptService attribute located at top of the service name. This is very important if you want your Web Service to be a script callable service. The above Web Service includes a Web method GetLatestNumberOfEmails that accesses the database and retrieves the total number of emails or records in the database.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Authors

Sriram Danturthi
Software Developer Essilor India Pvt Ltd.,
India India
No Biography provided

Kevin Lussier
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionShow Messenger Pin
Member 1348987313-Nov-17 22:26
memberMember 1348987313-Nov-17 22:26 
QuestionRe: POPUP Pin
Member 1230857520-Jun-17 0:29
memberMember 1230857520-Jun-17 0:29 
QuestionPop window not showing Pin
Member 866068119-Feb-12 23:22
memberMember 866068119-Feb-12 23:22 
QuestionGood One Pin
Ananthikasivel5-Feb-12 19:32
memberAnanthikasivel5-Feb-12 19:32 
Generalerror messgae Pin
codproshe23-Mar-10 19:43
membercodproshe23-Mar-10 19:43 
GeneralVery very good Pin
marco.gubbiotti25-Feb-10 11:24
membermarco.gubbiotti25-Feb-10 11:24 
Generalnot working Pin
saddevel31-Dec-09 1:35
membersaddevel31-Dec-09 1:35 
Generalgr8 one! Pin
monalisa326-Jul-09 19:25
membermonalisa326-Jul-09 19:25 
Question'InboxService' is undefined Pin
Zaiah2-May-09 6:21
memberZaiah2-May-09 6:21 
QuestionCode in C# ? Pin
Sai Love27-Apr-09 3:51
groupSai Love27-Apr-09 3:51 
GeneralError Pin
Arlen Navasartian7-Jan-09 0:51
memberArlen Navasartian7-Jan-09 0:51 
GeneralReally Good one Pin
venkat86_ece2-Jan-09 2:31
membervenkat86_ece2-Jan-09 2:31 
GeneralThat's Nice Pin
Abhijit Jana1-Jan-09 4:15
mentorAbhijit Jana1-Jan-09 4:15 
GeneralGood Work Pin
Sathish Raja S30-Dec-08 17:46
memberSathish Raja S30-Dec-08 17:46 
GeneralPopup is not shown Pin
Sathish Raja S29-Dec-08 17:49
memberSathish Raja S29-Dec-08 17:49 
GeneralRe: Popup is not shown Pin
Bit-Smacker30-Dec-08 10:07
memberBit-Smacker30-Dec-08 10:07 
I created the test database in my local SQLEXPRESS instance and installed the stored procedure included in the source. It works great for me!

Thank you!
GeneralRe: Popup is not shown Pin
Sathish Raja S30-Dec-08 17:45
memberSathish Raja S30-Dec-08 17:45 
GeneralRe: Popup is not shown Pin
Sriram Danturthi6-Jan-09 4:20
professionalSriram Danturthi6-Jan-09 4:20 
GeneralRe: Popup is not shown Pin
Sathish Raja S6-Jan-09 16:52
memberSathish Raja S6-Jan-09 16:52 
GeneralGood Pin
JeetChiu29-Dec-08 17:23
memberJeetChiu29-Dec-08 17:23 
GeneralGood article Pin
Adeel Hussain28-Dec-08 20:18
memberAdeel Hussain28-Dec-08 20:18 
GeneralGood Pin
prasad0228-Dec-08 18:58
memberprasad0228-Dec-08 18:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190526.1 | Last Updated 26 Dec 2008
Article Copyright 2008 by Sriram Danturthi, Kevin Lussier
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid