How to Show Messenger-Like Popups Using AJAX
page 3 of 6
by Bilal Haidar
Average Rating: 
Views (Total / Last 10 Days): 41232/ 86

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 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

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 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 to 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 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 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 functions that are used as utility methods to show and hide the popup window on the page.

View Entire Article

User Comments

Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:39:22 PM
[/pre]Cheap NFL,NBA,MLB,NHL
[url=]Jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap China Jerseys[/url]
[url=]Sports Jerseys China[/url]
[url=]NFL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
NHL Jerseys China
[url=]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[pre]We Are Professional China jerseys Wholesaler
[url=]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url=]2012 mlb all atar jerseys[/url]
[url= [/url]Cheap China Wholesael[/url]
[url=]Wholesale jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
We are professional jerseys manufacturer from china,wholesal
sports [url=]Jerseys From China[/url]
[url=]NFL jerseys China[/url]
[url=]NHL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
[url=]MLB Jerseys China[/url]
[url=]China Jerseys[/url],Free Shipping
We are professional jerseys manufacturer from china,wholesal
sports [url=]cheap jerseys sale online [/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap NFL jerseys China[/url]
[url=]NHL Jerseys C
Title: Good Article   
Name: Vinod Mishra
Date: 2011-02-18 7:26:17 AM
Its realy good article, help me to implement in our application, this also update my skill
Title: Thanks a lot   
Name: Richard
Date: 2011-02-03 10:50:34 AM
Thanks for the source code. I started to learn Ajax and this is very good to start with Thanks again.
Title: Thanks   
Name: Salamander
Date: 2009-12-09 6:36:07 AM
Thank you for this post. It was very useful for me. I love learning more news on such topics. Recently I have downloaded a great video from torrent search engine which helps to understand this issue better. This source will also help you find much useful information for free.
Title: rabih k   
Name: Good Article
Date: 2009-11-13 1:20:07 AM
Thank you bilal for the useful article.
Title: Amoun   
Name: Rabih
Date: 2009-09-25 10:09:15 AM
nice one bilal,
did you try creating a user control out of it? it stops working. and the problem? in the generated scripts. let us know if it works for you.
Title: I liked your suggestion   
Name: Sunny
Date: 2009-01-10 1:33:25 AM
Hey I Liked your suggestion
but i want to hav a popup to work like a messenger popup
wen ever value in the database changes the popup must cum without the need of thec client to refresh the page ?
Title: cant use   
Name: sunil deshkar
Date: 2008-12-18 6:52:56 AM
I cant used the script. because cant understand .
Title: Suggestion   
Name: Sameer
Date: 2008-10-23 4:30:05 AM
Can i use it as scheduler?
I want to design an application in which a user receives an reminder.
Ex. My database contains email-id,date of birth of candidates then,
whenever the user opens the site, he is suppose to get a message for his birthday if he
is having bithday on that day!
(dot Net is action driven,is it possible ?)
kindly reply!!
Title: GENIOUS   
Name: Sameer
Date: 2008-10-23 4:15:21 AM
I liked it !!!
Title: Error   
Name: Tim
Date: 2008-10-22 3:06:32 PM
Actually, I get an error telling my that "The server method 'GetLatestNumberOfEmails' failed with the following error - There was an error processing the request.
Title: Erro   
Name: Tim
Date: 2008-10-22 3:04:30 PM
It will run on my local machine, bur nothing happens when I try ot run on my server. Any suggestions?
Title: HI   
Date: 2008-07-21 6:54:03 PM
very usefull ypur comment
Title: This does not work   
Name: Ram
Date: 2008-07-11 12:26:20 PM
hi i am using the same code for my project, it works when i use a simple aspx page but when i use same thing through masterpage it does not work. Any Solutions
Title: facing problem   
Name: azeez
Date: 2008-01-25 4:47:22 AM

i am using this code in my application(c#,2005) in master page . in my appliccation i am getting connectionstring from session values . so in inboxservice.cs i changed the coding as getting connection string from session . but its giving following error :

Session state can only be used when enableSessionState is set to true, either in a configuration file or in the Page directive .

and also

$get("UpdateProgress1").style.visibility= "visible"; this line giving following error :
undefined ($get("UpdateProgress1") is null)
Title: Nice Article but some doubts   
Name: Siva
Date: 2007-10-19 9:22:34 AM
hi bilal

nice article but i have some doubts
what is the significance of $ in the javascript

could you please this more details

Title: Nice Article   
Name: siva
Date: 2007-10-19 7:11:13 AM
Learnt new concepts with how to use AJAX Extensions
Title: How to Show Messenger-Like Popups Using AJAX   
Name: john
Date: 2007-10-10 4:04:05 PM
I like it!
Title: Forget all about this   
Name: Márcio Duarte
Date: 2007-08-22 9:07:30 AM
Hey you...

Forget all about this... Open your mind... Enhance your World...

Using the JQuery and Ext JS will give you more facility in JavaScript coding.

And more... it's open source... do you need to know how incredible things have been done with... and

This will change your way to see de JavaScript and the Client-Side Programming.

Good Code for all.
Title: Demo   
Name: Divyesh
Date: 2007-08-02 6:38:31 AM
You should provide online demo of your source code (sample project)
Title: Looks awsome   
Name: Nazar Rizvi
Date: 2007-07-27 5:28:22 PM
This would be so helpful. It could have been even betterif we had something of this sort for the windows apps.
Title: Thanks   
Name: Anju
Date: 2007-07-27 7:58:33 AM
Title: Excallent   
Name: santosh
Date: 2007-07-27 7:38:34 AM
IT is new feature but it would be much great if there is no web service implementation in the useage of this feature.

is it possible to generate a code with same functionality without using web services? if so please guide me.

Title: Not so good   
Name: Marcos
Date: 2007-07-25 9:45:07 PM
Using settimeout is not a good choice.

If you executing something on server and the StartChecking run, the server will execute twice the previously server process.
Title: GOOG   
Name: Mr. Duc
Date: 2007-07-25 1:38:18 AM
good, I love it, and I use example in my project. Thank you very much
Title: Re: Hiren   
Name: Bilal Haidar [MVP]
Date: 2007-06-25 1:50:19 AM
You can visit my site here:

You can convert the code from C# to VB easily!

Hope this helps,
Title: Very Nice Example   
Name: Hiren Jatakia
Date: 2007-06-25 1:41:04 AM
Hello Bilal,
This is exactly i want, Nice article, but can i have VB version of this example, cause i require this in format not in c#, if u can send it to me, it would be very helpful for me......
Title: Nice codes   
Name: PAwan Kumar
Date: 2007-06-24 4:59:04 AM
Nice tutorial ....keep it up
Title: database   
Name: somuvas
Date: 2007-06-20 1:55:22 AM
this is db connections
Title: One Question Though   
Name: AzamSharp
Date: 2007-06-14 12:44:52 PM
Hi Bilal,

Great article as usual. I have one question though. Is there any special reason that you used the UpdateProgress control?

Title: Very Very Nice Work   
Name: AzamSharp
Date: 2007-06-13 5:57:37 PM
Hi Bilal,

Very very nice work. :)

Title: SW engineer   
Name: Vinh
Date: 2007-06-13 10:36:29 AM
It is good article. Simple and easy to follow.
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2007-06-13 9:28:10 AM
I never publish anything that it doesn't work!

Plus, there is a technical editing for this article! So I am sure it works!! Are you facing any problem?

Title: R u sure!   
Name: Vijay KArla
Date: 2007-06-13 4:28:25 AM
Bilal, R u sure that it works?
Title: Great work   
Name: Sandeep Acharya
Date: 2007-06-13 3:56:32 AM

I have already gone thru some of your prev articles and this one also carries the excellence with no exception.

Keep providing us such nice stuffs.


Sandeep Acharya
Title: Good Article   
Name: Joydip Kanjilal
Date: 2007-06-13 1:58:54 AM
Hi Bilal,

This is a nice article. Keep this good work going.


Title: It's Good   
Name: Anjali Kataria
Date: 2007-06-12 10:12:05 PM
Feature that u explain with an examples Its good. Good Work keep Up GOOD LUCK
Title: Very Good Article   
Name: Haissam Abdul Malak
Date: 2007-06-12 1:22:24 AM
Bilal, it was nice to see such an implementation. keep up the good work


Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-06-25 12:22:29 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search