We will create a new AJAX enabled website, then open the
handle showing and hiding the popup and querying the database to see if there
are any new emails inserted.
First of all, we define a global variable.
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.
var app = Sys.Application;
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 OnCurrentNumberOfEmailsReady(result, userContext, methodName)
// 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
Now that the original number of emails currently stored in
the database is known, we can start checking from now on to any new email that
is added to the database table.
The StartChecking method is as follows:
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.
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
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
has 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 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
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.
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 functions that are used as utility methods to show and hide the popup
window on the page.