All Free Tech » Ajax

Ajax-based Login Control Without Any Standard Database

admin — Sun, 18 Jul 2010 11:06:03 +0000

Introduction: In this tutorial I am going to base a simple login control on AJAX. All login control needs a database that stores all user profiles, such as passwords. Server-side script uses the database from user given string to compare and match shows, errors or redirects to relevant pages, etc. However, the proposed technique is no standard database such as Access, SQL is required, etc. It only takes a native XML Flat / text database, to implement the minimum complexity in practice.

I was looking for this kind of simple log-in approach and, finally, came the thought, however, the Asynchronous JavaScript and XML technology (in short AJAX) . On many occasions, the establishment of an external database is cumbersome and not worthy in terms of minimal customs. The proposed Login control, but will help you all the load, and compatibility issues to be removed. To be clear, conventional and standard database application, a database server, the authentication and authorization required before the creation of a database, database string to be used in the script, the platform-specific and is awkward for me always. To get rid of all the costs and efforts, the proposed approach uses a simple flat database tables and read the database with (AJAX) to control a pretty login.

Keep reading

Big Picture: The following figure shows the AJAX-based login control display. User can enter his password into the text field. The simplicity, I have all the names of the States United States as passwords. If the user specified string games with one of the passwords, make the "search" button appears. In other words, the user's desired page by clicking on this button will be forwarded.

In case the user's input string is not a pre-fix match of the passwords, the color of the text box will automatically be yellow. It tells the user not in this direction and try to delete some of the characters try again.

Necessary files: we need four files for this login control

i) script. html

ii) script. CSS

iii) script. js

iv) script. xml

the HTML and CSS file corresponds to the content and design to show, above all, at various components. Note that the "query" Submit "button is kept hidden from visibility. It will only be displayed if the user string with one of the passwords stored in the XML file matches.

JavaScript AJAX file controls the connectivity and read the password on the fly. As soon as user presses a letter on the text field, the function works for any game or disproportionate to review and act accordingly.

hold a single character fills the function of all passwords in a hidden "popoups" (which is actually not a pop!) HTML component. The function is true then the string with the user string. If the pop-ups component is empty, there is the user string is not a prefix of one of the passwords and makes the text box yellow.

present but in the event of agreement between the two strings, the button will be displayed. User can now click directly requested by his side.

How to Create an ASP.NET Modal Popup Login

admin — Fri, 29 Jan 2010 14:12:25 +0000

In this article, Yi demonstrates how to create a modal popup login page in ASP.NET. By using Login controls, AJAX Extensions, and the AJAX Control Toolkit, you can easily accomplish this task without much coding. The demo project is based on Visual Web Developer Express 2008 and the .NET Framework 3.5. It also assumes you have installed the AJAX Control Toolkit.

Introduction

In this article, I will demonstrate how to create a modal popup login page in ASP.NET. By using Login controls, AJAX Extensions and Toolkit, you can easily accomplish this task without much coding.

The demo project is based on Visual Web Developer Express 2008 and .NET Framework 3.5. It also assumes you have installed AJAX Toolkit. You can download source code from here.

[Download Sample]

Listing 1 – Login page with modal popup

Key features of this project include:

· Place login part in MasterPage and content in ContentPage.

· Utilize Login, LoginStatus controls.

· Use ModalPopupExtender and UpdatePanel to avoid postback.

· Take advantage of Forms Authentication.

Walkthrough

Let’s get started by creating a new website, and then add a MasterPage. Based on the MasterPage, add a ContentPage and rename it to Login.aspx. You should have files similar to Listing 2 by then.

Listing 2 - Files created for the project

web.config

To restrict anonymous access and allow only authenticated user, we need to add a few lines in web.config file. Note that the authentication mode is set to Forms.

<authentication mode="Forms"/>
<authorization>
      <deny users="?"/>
      <allow users="*"/>
authorization>

MasterPage.master

Now go to MasterPage.master and we will do the most important work here. Follow steps below.

1. Add a ScriptManager on MasterPage, which enables the website to run AJAX.

2. On the same page, create a LoginStatus and place it right above ContentPlaceHolder.

3. Right click the LoginStatus and select Add Extender. Choose the ModalPopupExtender.

4. Right below the ContentPlaceHolder, create a Panel. Within the ContentPlaceHolder, add a UpdatePanel.

5. At last, put a Login control in the UpdatePanel.

In design view, you should get a page similar to Listing 3.

Listing 3 – design view of Login.aspx

However, to make things work we have to add a few more lines. First, let’s add two styles in the markup; we will use them very soon. The first style is for the transparent background on top of regular content. Second one tells how the small popup dialog looks like.

<style type="text/css">
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=30);
            opacity: 0.3;}
        .modalPopup {
            width: 250px;
            height: 150px;
            background-color: #076DAB;
            color: #FFFFFF;
            border-color: #000000;
            border-width: 1px;
            border-style: solid;
            text-align: center;
            cursor: move;
            font-size: medium;}
style>

Next, go to ModalPopupExtender’s properties: set the style for BackgroundCssClass and assign the panel ID to PopupControlID. As a result, the extender markup should look like:

<cc1:ModalPopupExtender ID="LoginStatus1_ModalPopupExtender" 
runat="server" 
DynamicServicePath=""
Enabled="True" 
TargetControlID="LoginStatus1" 
BackgroundCssClass="modalBackground"
PopupControlID="Panel1">
cc1:ModalPopupExtender>

Go to the panel’s markup (NOT UpdatePanel): set the CssClass.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">

It is worth to note that if you don’t set the display style to none, users will have an unpleasant experience: the popup dialog would flash in and out when it is loaded first time. You may also wonder why not to place this style into CssClass. Doing that will keep the popup from showing forever!

Now we are going to work on the Login control a little bit. Here is the markup for it.

<asp:Login ID="Login1" 
runat="server" 
DestinationPageUrl="~/Login.aspx" 
DisplayRememberMe="False"
TitleText="" 
UserNameLabelText="Employee:" 
OnAuthenticate="Login1_Authenticate"
FailureText="Incorrect employee or password" 
Width="100%" 
VisibleWhenLoggedIn="False">
asp:Login>

We have almost everything but a Cancel button. Change to design view again. Click on Login control and select Convert to Template. Drag and drop a Button next to Login button. We make it as a Cancel button. The OnClick event handler will be implemented later.

<asp:Button  ID="btnCancel" runat="server" OnClick="btnCancel_Click" Text="Cancel" />

Go to source view. This time we will move around those controls in the Login template to make it pretty. Our work on MasterPage.master is done. Let’s visit the C# code behind it.

Listing 4 – Finished Login.aspx

MasterPage.master.cs

Copy and paste following codes to this file. Explanations are in comments.

using System;
using System.Web.UI.WebControls;
using System.Web.Security;
 
public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Popup dialog won't fire if user is already in.
        if (Request.IsAuthenticated)
        {
            LoginStatus1_ModalPopupExtender.Enabled = false;
        }
        else
        {
            LoginStatus1_ModalPopupExtender.Enabled = true;
        }
    }
 
 
    // Authenticate user's crendential if Login button is clicked.
    protected void Login1_Authenticate(object sender, AuthenticateEventArgs e)
    {
        // You can add authentication logic here.
        e.Authenticated = ((Login1.UserName == "test") && 
            (Login1.Password == "test"));
 
 
        // Continue to display the popup dialog and failure text if login failed.
        if (!e.Authenticated)
        {
            LoginStatus1_ModalPopupExtender.Show();
        }
    }
 
    // Hide the popup dialog if Cancel button is clicked.
    protected void btnCancel_Click(object sender, EventArgs e)
    {
        LoginStatus1_ModalPopupExtender.Hide();
    }
}

At last, I add a few texts and a horizontal rule to this page. Listing 5 and 6 are the login failure page and success page. It’s done!

Listing 5 – Login failure

Listing 6 – Login success

Summary

In this article, you learn to create a modal popup login page. AJAX makes it easy to implement. With UpdatePanel, the page won’t post back if login failed. By adding your own authentication logic, you can expand this demo easily to real world application.

Client Centric Approach of AJAX using Toolkit

admin — Fri, 29 Jan 2010 13:58:45 +0000

In this article, the author discusses the client-centric approach for AJAX using the ASP.NET AJAX Toolkit. In general, server-centric (use of Update panel) is very popular in this field. But when it comes to performance, the client-centric approach is preferred. Sandeep also demonstrates how to call a webservice using javascript.

Introduction
Today everything is changing very rapidly and technology is of no exception. Traditional web page with boring look and feel has gone obsolete. In that rhythm requirements are also changing. Among all these changes AJAX has become very popular now a days. And why not, it is so attractive and beautiful that everybody would love to have it on their web pages. It saves time for end user, saves resources for server and after all gives a new look and new experience for web browsing.
System Requirements
· Microsoft Windows XP Professional · VS 2005 · AJAXToolkit 1.0
Server Centric Vs Client Centric
Server Centric There are two ways of AJAX that can be implemented using AJAXToolkit. One is the most popular method, Server Centric (using Update panel) and another one is Client Centric. There are several reasons (given below) why the server centric became so much popular. · Server centric takes very less time to implement. · From a developer point of view, it is very easy to implement. Just put your controls inside an UpdatePanel and ScriptManager will do rest of the job. · It keeps the developer free from JavaScript and developer can concentrate only on server side. · Requires less effort. But everything in this world comes with a cost. There are also several drawbacks that come along with this approach. · Though it does not show but internally it completes the whole page life cycle once again, which actually violates the basics of AJAX. But for an end user it never matters. · As it completes the total page life cycle again and hence for better performance client centric is having an edge. Client Centric · This is the most preferred approach for better performance. · It is completely in adherence to the rules of AJAX. · Though its time taking to implement, but its worthy to spent time on it.
How to accomplish Client Centric – Example
Lets move step by step to get a complete hold on this. Create an AJAX enabled website Create an AJAX Enabled web site for this example. Ajax enabled website is same as normal .net website but having few more additional tags in web.config. Add Webservice and Javascript Add a webservice (MyService.asmx) to the project. Also add a JS file (Jscript.js) to do the client side activities. Basically we are going to call the Webmethods present in the websevice through java script. Add ScriptManager Add a ScriptManager to the MasterPage with tags as shown below. Listing 1 <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="JScript.js" /> Scripts> <Services> <asp:ServiceReference Path="MyService.asmx" InlineScript="true" /> Services> asp:ScriptManager> Do necessary changes to the webservice You need to add the ScriptService attribute to the webservice class. Then add your own webmethod. Here we have added a GetServerTime() method. Listing 2 [WebMethod] public string GetServerTime() { return DateTime.Now.ToString(); } Test the Webservice, see if it generates the client proxy After this you should be able to test whether your webservice is ready to receive calls from the javascript. Basically the webservice URL followed with “/js” or “/jsdebug” will allow you to download the resulting client proxy. This is possible because of the presence of Scriptservice Attribute for Webservice class. If you will save and open this file, you will find that there will be necessary client proxy entry for each of the webmethods present in webservice. The following prompt ensures that the webservice is correct and ready to use. Figure 1 Get the result by running the application After this, create a button and run the following javascript function on the button click. Listing 3 // JScript File function GetTime() { MyService.GetServerTime(onSuccess,onFailed); return false; } Here onSuccess and onFailed are the name of the functions (similar to delegates) that will be executed eventually at the success and failure of the AJAX Call. The definitions of them are given below. Listing 4 function onSuccess(result) { alert("Current time is: " + result); } Listing 5 function onFailed(result) { alert("Error [" + result._statusCode + "] : " + result._message); } Finally it will look like this:
Similarities with PageMethods
This is almost similar to the PageMethods concept. In PageMethods there is no need to create a web service for AJAX functionality. Rather your javascript can directly call a method (should be marked as [WebMethod]) present on the code behind file of a .aspx page.
Differences with IcallbackEventHandler
It can be said that Client centric approach might have evolved from theICallbackEventHandler, but actually it is much ahead of ICallbackEventHandler. Few differences are given below: 1. In ICallbackEventHandler, only string types can be supplied to the server as argument. And only string types can be received from server. But in client centric approach the parameter types and number of parameters are of no constraint. One can supply n number of parameters to the server and these can be of anytype. 2. ICallbackEventHandler was never Jserialisable. But through this newer approach Jserialization is possible. As a result of which a server can return a datatable, dataset and your Javascript is now capable enough to receive them. (Yes, it was never ever possible in ICallbackEventHandler). 3. One more magic, now using Jserialization of Client Centric, you can create objects of your server side classes at client side. It may not sound so interesting, but if you start thinking, it was also never possible to create an instance of a class in your javascript. But now this is also very much possible.
Conclusion
By now one must have realized that why AJAX is so popular and why client centric approach is advisable. It brought a new era to the world of AJAX. AJAX programming has never been so interesting till date. I remember few years back in the age of manual AJAX, developers used to have a headache for such things, which is now very much doable in seconds using Client Centric approach of AJAX Toolkit. And think of the widely opened possibilities. Yes, we all have to agree that the new era of web development has stepped in and a long way to go. Download Link: http://authors.aspalliance.com/Sacharya/AJAXEnabledWebSite1.zip

Hacking New York Times and Twitter with Microsoft AJAX and jQuery

admin — Sun, 24 Jan 2010 08:23:43 +0000

In this article by Dr. Jayaram Krishnaswamy, we look at two APIs, the Twitter API and the New York Times API and see how we can access data on them using the JavaScript libraries available on the Microsoft Edge Content Network also know as Microsoft Content Delivery Network (CDN). While jQuery is used to access API retrieved data on the intranet web server, the Microsoft AJAX client templates are used in displaying them.

APIs (Application Programming Interface) are application-to-application programming interfaces that support harvesting information on the web using the known web standards. These APIs are provided by the entities who wish to expose parts of their resources that a third party can use. The APIs run transparent to the user and exposes just what they want to expose, with some providing access to material for public consumption with others giving access to resources based on authentication. In a sense they may be called a basic form of SAAS.

Amazon.com, Google etc have exposed their APIs for some time. Twitter and New York Times have also exposed their API's which can be used to do some digging into the information contained in them, a kind of web mining. Many others such as Netflix have provided their own APIs described on their web sites.

What is Twitter API?

Twitter API is provided by the Social Networking and Micro-blogging service. Twitter API adheres to the web standards and one can talk to Twitter using HTTP. You can just about access anything on the Twitter web site. One example of creating a Microsoft SQL Server Report using Twitter API is available here – Tweets with Reporting Services, wherein the response from the Twitter API was in XML format. JSON (JavaScript Object Notation) is another format in which data is returned when an API call is made. In this article we will be looking at API call that returns a JSON response.

Twitter exposes a large number methods through their API's such as API's for Search, Timeline, Status, User, Direct Message, Friendship and many more. As previously mentioned the responses will be in XML or JSON. Also while some APIs may take parameters others may not.

The Twitter API used in this tutorial

We will be looking at trends in Twitter API exposed by the url, http://search.twiiter.com/trends.format. We will be using the GET method and we will expect a JSON response. Since the volume of traffic may overwhelm, the calls that you can make to this in an hour are limited (also known as rate limiting) but not critical for the demo in this tutorial.

Here is a typical call to the trends method on the Twitter API. Herein we will search for trends on the Twitter site and expect a response in JSON, if we use json instead of Format in the next URL address.

Instead of:

http://search.twitter.com/trends.Format

type-in, the following for URL address,

http://search.twitter.com/trends.json

When you plug the above in a web Brower you would get a response trends.json which you may save to your hard drive or, use it in any way you like. The next quoted text is what you get in response (note that this is what I got on Saturday 31, 2009 and what you get will be different), the content of the file trends.json you saved to your computer. Note that presently you get about top ten trends from this API call.

{"as_of":"Sat, 31 Oct 2009 20:44:46 +0000","trends":[{"name":"Happy Halloween",
"url":"http://search.twitter.com/search?q="Happy+Halloween"+OR+"Feliz+
Halloween""},{"name":"#nxzerosetechaves","url":"http://search.twitter.com/
search?q=#nxzerosetechaves"},{"name":"Danyl","url":"http://search.twitter.com/
search?q=Danyl"},{"name":"#HappyHalloween","url":"http://search.twitter.com/
search?q=#HappyHalloween"},{"name":"#potterday","url":"http://search.twitter.com/
search?q =#potterday"},{"name":"X Factor","url":"http://search.twitter.com/
search?q="X+ Factor""},{"name":"It's Halloween","url":"http://search.twitter.
com/search?q="It 's+Halloween"+OR+"Its+Halloween""},{"name":"Trick",
"url":"http://search.twitter.com/search?q=Trick+OR+#trick"},{"name":"Paranormal
Activity","url":"http://search.twitter.com/search?q="Paranormal+Activity""},
{"name":"This Is It","url":"http://search.twitter.com/search?q="This+Is+It""}]}

First of all what you see returned is a JSON object. If you are new to JSON review this article on my blog. The various elements that you see such as 'name', 'url' etc are fields in the response that are all described in the API documentation(look for Return Values). Some of the API calls can return a ton of information and you will have to know the API method so that you can correctly parse this data. Another thing you would notice is that the JSON object you get out is a nested object with many levels. You may need a JSON Parser to get a clearer picture of this nesting and I recommend using the online parser at this site. Using the above site, the JSON Object would appear as shown (only a portion is shown).

New York Times API

New York Times made available to the developers sometime in the middle of October 2008 APIs that can search New York Times for various kinds of information . Just like in Twitter there are a large number of APIs that you can use such as: Article Search; Best Sellers; Campaign Finance; Congress; and many others. Interested users can get on to this resource by signing up here requesting what APIs they would like to use. After signing up, New York Times would provide keys for the APIs that you want to access. It is important therefore, that the call should include the keys provided to you. For example, I received keys to access the following resources: Movie Reviews, Article Search, Best Sellers and Times Newswire. The key for the Movies Reviews API appears as shown here (the one shown here has been doctored and will not work).

Movie Reviews API
Key: b57378910b9fd80ecc73461547c93e8a:10:50673441

Using the New York Times API

It is a valuable resource since you can get for example with the Article Search API access to more than 2.8 million articles from 1981. Using this is quite simple, just paste the URL shown below into the address box of your browser. Note that the key shown here is fake (but of correct format).

http://api.nytimes.com/svc/search/v1/article?query=India&facets=
publication_year&api-key=6c208890a4880093c30020be8fe17a40:0:50633441

This will display in the browser the JSON object that is returned as shown. You can use the previously mentioned site to parse it for more friendly display.

{"facets" : {"publication_year" : [{"count" : 2724 , "term" : "2008"} ,
{"count" : 2345 , "term" : "2006"} , {"count" : 2311 , "term" : "2009"} ,
{"count" : 2282 , "term" : "2007"} , {"count" : 2144 , "term" : "2002"} ,
{"count" : 2111 , "term" : "2001"} , {"count" : 1988 , "term" : "2005"} ,
{"count" : 1951 , "term" : "2004"} , {"count" : 1921 , "term" : "1985"} ,
{"count" : 1798 , "term" : "2003"} , {"count" : 1761 , "term" : "1999"} ,
{"count" : 1720 , "term" : "2000"} , {"count" : 1642 , "term" : "1998"} ,
{"count" : 1442 , "term" : "1984"} , {"count" : 1382 , "term" : "1986"}]} ,
"offset" : "0" , "results" :
[{"body" : "BARSUR, India — At the edge of the Indravati River, hundreds
of miles from the nearest international border, India effectively ends.
Indian paramilitary officers point machine guns across the water.
 The dense jungles and mountains on the other side belong to Maoist rebels
dedicated to overthrowing the government. "That is their liberated" ,
"byline" : "By JIM YARDLEY" , "date" : "20091101" , "title" :
 "Maoist Rebels Widen Deadly Reach Across India" , "url" : "http://www.
nytimes.com/2009/11/01/world/asia
 /01maoist.html"} ,.........(there is more of this but abbreviated here)

Response Format

As you can see the responses to the API calls return JSON objects in general of the form shown belo

w (this one is of the form returned by the Twiiter API). What we propose to do is to use jQuery's GetJSON() method to get the JSON Objects and use Microsoft AJAX JavaScript files to display the data on the web page. Both jQuery javascript files and Microsoft ASP.NET AJAX files are both available on the Microsoft ECN (CDN). The GetJSON() method as well as the Microsoft ASP.NET AJAX templates can be easily implemented in the Visual Studio 2008 IDE. Alternatively Microsoft AJAX can also be used to retrieve data from the web sites. In this article the GetJSON() method will be used.

{"x":{"y":[{"a1":"b1", "c1":"d1"}, {"a2":"b2", "c2":"d2"}]},....
 "f":"g",....}

Accessing the APIs from the intranet

When you use the APIs from your browser the APIs respond in different ways. The Twitter API will respond by allowing you to download the JSON file which you can persist to a file on your local intranet. The New York Times API on the other hand will display the JSON object directly in your browser which you can persist by saving it with the JSON extension to your local intranet server. However, these APIs cannot be directly reached by the intranet due to cross-domain browser policy (The same origin web security model). One may use other constructs such as plug-ins that empower the browser to overstep the same domain policy, subspacing, etc. The article does not cover these aspects. In trying out these demos the user can access these APIs via browsers and persist them to their file system.

Displaying data from retrieved from the APIs

As previously mentioned data will be retrieved using the API URLs which are then persisted to the intranet server. The web page created using Visual Studio is then used to display data where jQuery retrieves the persisted data from the intranet which then gets displayed by the Microsoft ASP.NET Client templates. To get an initial exposure to using these tools review this article.

Data from Twitter API

The next listing created using the Visual Studio 2008 shows the how the data is retrieved and displayed. One of the main things to notice is that the parsing of the JSON object to correctly display data has to be first determined. The treeview provides a hint as to how this may be accomplished. Depending on whether it is a JSON array or a JSON object the parsing will be slightly different. Also the JSON file in the Visual Studio IDE should not have line breaks. It should be preferably in an unbroken continuous line.

Listing 1: Response from Twitter API displayed using Microsoft AJAX Client library





    
  

  


 
   




Twitter Stuff 


      {{as_of}}
          {{trends[0].name }}
          {{trends[0].url}}

In the above listing, the 1st three scripts are those available on the Microsoft CDN. The fourth script does the formatting for the HTML elements via jQuery. In the fifth script, the GetJSON() method is called to retrieve the persisted response from the Twitter API call mentioned earlier. The persisted JSON object is in file TwitterType2.json (it is just a text file in VS 2008 with a json extension). The function cdn() creates the template for display creating a dataview using the return value from the getJSON call. The parsed elements from the JSON object are displayed in the table. The name space attribute in the body are important and the class attribute in the table makes the initial template hidden from the user (see the style information in the section. Data fields retrieved from the javascript $Create() are pushed to the markup blocks {{}}. Please refer to an earlier article on this site. After building the project the HTML page can be displayed using the default browser as shown. The page did not display using the Opera browser (version 9.1) but displayed as shown in Mozilla Firefox, IE 8.0, Safari, Chrome and even in my one time favorite Netscape 8.1.

Data from New York Times

The New York Times API is called as previously mentioned which gives access to India related articles as of the date the call was made. The json object returned follows the general pattern as shown here. This is just the pattern to which the data adheres. The pattern is different from the one returned from Twitter.

{"x":{"y":["a1":"b1","a2","b2"}]},"p":"q","m":["n1":"valn1","n2":"valn2",
"n3":"valn3"],"ts":[|"v","w":"z"],"r":"s"}

The next listing shown here for the sake of completeness is very similar to the one used with the Twitter API except for the json file it accesses and the display of parsed content. You are also shown how to pick the data you want to display in this listing. The IndiaArticles.json is the name of the json data returned from the API call persisted to the intranet. The parsing of the data is very similar to the earlier Twitter example.

Listing 1: Response from New York Times API displayed using Microsoft AJAX Client library





    
  

  


 
   




New York Times Articles 


{{facets}}
    {{facets.publication_year[0] }}
    {{facets.publication_year.count}} | {{facets.publication_year.term}}
    {{offset}}
    {{results[0].body}}
    {{results[0].byline}}
    {{results[0].date}}
    {{results[0].title}}
    {{results[0].url}}

The browsed html page appears as shown in theOpera 10.0 browser.

Summary

The article described accessing data on Twitter and New York Times using jQuery and the Microsoft ASP.NET 3.5 AJAX client libraries. Both jQuery and the Microsoft AJAX are available on the Microsoft Edge Content Network.

Creating an Ajax Process Using PHP and Oracle

admin — Sat, 23 Jan 2010 07:30:42 +0000

For some time now, Ajax (Asynchronous JavaScript and XML), has been all the rage in the Web development world. Coming to the forefront with some of Google's features (Suggest, Maps, Gmail, and so on), Ajax performs server requests without the user having to submit a form or click on a link. In other words, the Web browser can make the server request, and handle the response, without the user doing anything or even knowing that this is happening. The immediacy that Ajax brings is not only a great convenience, but it can also be downright cool.

In this recipe, I discuss all the code necessary to use Ajax to go from a simple Web page to a JavaScript function to an XMLHttpRequest to a PHP script and, finally, to an Oracle database. Along with the code, I do talk about the individual pieces with respect to the whole picture: what each chunk does and why it's important. By reading this HowTo, you will acquire not only some sample code but also, hopefully, a broader understanding of the whole Ajax concept.

Background

The example I'll be working with will be a registration form (or a minimal part of it, anyway). The theory is that I must confirm unique email addresses in the users table so that people cannot register multiple times using the same address. This is normally part of the validation process that comes after the user submits the form to the handling PHP script. But why should the user have to wait until then for this piece of validation? Instead, as soon as the user enters their email address and goes to the next form field, the email address will be immediately validated. But to do so, I still need to query the database, which is where Ajax comes in.

The simplified table structure for this example could be created with the following SQL statement (without the presence of the other tables, I've done away with identifying keys and such).

CREATE TABLE users (
	email VARCHAR2(60)
)

Obviously you could expand on this in many ways. For now, though, the important thing is that the sample code assumes you have established such a table and can connect to it from a PHP script. Some records must be in this table for the example to fully function, so you should populate it like so:

INSERT INTO users (email) VALUES ('this@that.com')
INSERT INTO users (email) VALUES ('me@school.edu')
INSERT INTO users (email) VALUES ('fake@address.net')

After you've created and populated the table, you can begin coding. As I mentioned, there are two scripts involved. To develop and test everything, you will:

Create the PHP script that queries the Oracle database.
Manually test the PHP script to see how it works.
Write the JavaScript code that interacts with the PHP script.
Make the HTML form that ties into the JavaScript.
Test the entire process.

Step 1: Programming the Database Query

The entire PHP script is called ajax.php. (See sample code zip.) The purpose of this script is to run a query in Oracle and print a message based upon the results of the query. This is all very basic Oracle, SQL, and PHP, but I'll run through it to clarify what's happening.

The script expects to receive an email address in the URL, which is available in the variable $_GET['email']. Then the script connects to the Oracle database. The query itself counts how many records in the users table have that email address:

SELECT COUNT(*) AS NUM_ROWS FROM users WHERE email='{$_GET['email']}'

This should return either 0 or 1 (or nothing at all). The query is executed in Oracle and the results are bound to the PHP $rows variable. Now $rows represents how many records in the database have that email address. With respect to Ajax, the important part of the script is shown below.

if ($rows > 0) {
	echo 'Email address has already been registered!';
} else {
	echo 'Email address is available!';
}

One of those two messages will be printed, based upon the value of $rows. That's all there is to this page! Absolutely no HTML is needed as this script won't be used like a standard Web page.

If you want to improve this script, you can confirm that the email address matches a regular expression pattern for email addresses. If so, execute the query like normal; if not, echo a statement saying that it's not a valid email address. At the very least, you'd likely want to prevent SQL injection attacks. (I.e., avoid using the $_GET variable in your query without some assurances of its validity.)

Step 2: Testing the PHP Script

Because this entire Ajax process involves several technologies—HTML, JavaScript, PHP, SQL, and Oracle—you'll be best off testing each piece as you go. If you don't, you can easily get lost trying to find where a problem exists. Testing this PHP script should be fairly easy:

Make sure you've created the table in Oracle and populated it.
Edit ajax.php so that it uses valid connection parameters for your Oracle installation.
Save the script as ajax.php.
Place it in the proper directory for your Web server.
Go to http://yoururl/ajax.php?email=X in your Web browser.

In place of X, use one of the email addresses that's already in the database (e.g., http://yoururl/ajax.php?email=this@that.com). You should see the "Email address has already been registered!" message. Then use an email address that has not been stored. You should see the "Email address is available!" text. Once you have that working, you can move on to the actual Ajax aspect of this example.

Step 3: Programming the JavaScript

This section of the process is probably the most difficult unless you've done tons of JavaScript already. In any case, the JavaScript code is the heart of the Ajax process, as it performs and handles the request from the PHP page. I'll go through this code in detail.

The JavaScript code will define three functions. The first creates a request object variable:

function createRequestObject() {
	var ro;
	if (navigator.appName == "Microsoft Internet Explorer") {
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		ro = new XMLHttpRequest();
	}
	return ro;
}

You should be able to use this code for any Ajax application without modification. If the Web browser being used is Microsoft Internet Explorer, then the ro variable is initialized as an ActiveXObject of type Microsoft.XMLHTTP. For all other browsers, ro is a straightforward XMLHttpRequest type of object. That's really nothing else to it. The ro variable is now an object with all the necessary functionality to perform an asynchronous request. After creating the request object variable, this function then returns it.

This function is immediately called by the JavaScript code when the page is first loaded:

var http = createRequestObject();

Now http represents the object and is globally available in the other functions.

Next up is the function that calls the PHP script:

function sendRequest(email) {
	http.open('get', 'ajax.php?email=' + encodeURIComponent(email));
	http.onreadystatechange = handleResponse;
	http.send(null);
}

This function takes one argument, which is the email address to be verified. Then it opens a connection to the PHP script. As the first argument in the open() method indicates, the request will be of type get, as opposed to post. The email address is appended to the URL, resulting in a page request like ajax.php?email=this@that.com. As you already know, this is how the PHP script is properly called. The encodeURIComponent() function just encodes the submitted value to make it URL-safe. The third line within the function tells the object what JavaScript function to call after the request has been made. The final line actually makes the request.

To recap, the first function, createRequestObject(), makes the object variable that's needed. The second function, sendRequest(), makes the actual request of the PHP script. Now we need a function that handles that request:

function handleResponse() {
	if (http.readyState == 4) {
		document.getElementById('email_label').innerHTML = http.responseText;
	}
}

The previous function told the request object to call this function after the request has been made. This function first checks that the request was successfully made. If so, then http.readyState will be equal to 4. It could also be equal to 0 through 3 (you can search online for their actual meanings, if you care), but being equal to 4 means the request worked. The results of the request will be stored in the http.responseText attribute, the results being either of the two messages echoed by the PHP script. To be clear, if the request worked, then http.responseText will either be "Email address has already been registered!" or "Email address is available!".

At this point, the JavaScript knows what the result of the PHP script was. All you need to do is get the JavaScript to notify the user of that result. An easy option would be to use an alert() box:

alert(http.responseText);

If you put this within the conditional, you'll see the result when you test the whole application. (In fact, alert() is a great debugging tool to confirm what's going on in your JavaScript code.) However, I find these alerts to be annoying as an end user and would rather print the message next to the form's email input. To do so, I refer to the DOM (Document Object Model). Specifically, I assign the http.responseText to an element in my page called email_label. You'll see this in Step 4.

Whew! Hopefully you followed all that. To repeat, this is the most important and most complex part of this sequence. The JavaScript uses three functions to do three things: define a browser-specific request object; make a request to the PHP script; and, do something with the results of the request. If you're confused by any of this, or when it comes time to make a more complex Ajax application, you'll likely want to do a little research on JavaScript and DOM.

Step 4: Making a JavaScript-functional HTML Form

As I wrote previously, the premise behind this example is a registration form that takes, at the least, an email address. The minimal form would be:


Email Address: 

First Name: 

(Rest of the form...)

That's it! Well, not quite. You'd want more inputs (a "submit" button, and so on). But for the purposes of this example, that's all you need. To avoid confusion, note that the action and method attributes here have nothing to do with the ajax.php script (which doesn't handle this form's submission).

Two more things are required, though. First, this form must somehow call the JavaScript code that makes the request. You could use several tricks to do that: make a clickable link, wait for the submit button to be clicked, and so on. I've decided that once the user has entered an email address and has gone on to the next form element, the JavaScript should be called. This requires the onchange() method, which I'll add to the email input:

Email Address:

As soon as the user changes the value in this input, including entering anything for the first time, and then tabs or clicks to another input, the JavaScript sendRequest() function will be called. It is fed one argument, the value of the email form input. If you look back at the JavaScript code, you can see how the value typed here gets sent to that function, which in turn is sent to the PHP script.

The second thing the HTML form needs is a place where JavaScript can "write" the received message so that it's visible to the user. As the handleResponse() function dictates, that message will be assigned to the innerHTML of an element called email_label. For this I add a span with that ID after the email address input:

That's it for tying the HTML form to the JavaScript. (See Listing 1 in the sample code zip for the final code.) Now it's time to see how it works!

Step 5: Testing the Ajax Process

Having completed the HTML and JavaScript, you should save that as ajax.html (or anything, really), then place it in the same directory as the PHP script. Load the form by running it in your Web browser, through a URL, not by opening it from the file system (i.e, go to http://yoururl/ajax.html). Type an unused email address in the proper input, then tab or click on the next input. Repeat using a stored email address.

The two screenshots below show the results you should see. Absolute magic!

Conclusion

In this article you've seen how you can easily implement an Ajax process using PHP and Oracle. By doing so, server side validation is being accomplished within the client (although you should still keep server side validation as well, in case JavaScript is disabled). This particular example, in my opinion, demonstrates a nice feature for an end user, saving them from having to:

Submit the form
See that the email address has already been registered
Return to the form
Repeat

Also, I think this example and the concept in general is kind of cool. And on the Web, that's not an insignificant factor.

Of course, there's tons more you can do with Ajax, PHP, and Oracle. The example in this article sent only one piece of data to the PHP script and retrieved just a string. You can send much more back and forth. If you have a significant amount of data to be returned to the calling page, you can have PHP return it in XML format, then use JavaScript to parse and display it. If you search online, you'll find many different examples.

Larry Ullman

Working with Ajax Table Editors and Viewers

admin — Sun, 17 Jan 2010 07:42:12 +0000

A typical Web application shows information that is retrieved from databases and other sources such as data feeds. In many cases, one or more Web forms let the user enter new information or modify the existing data. When the user clicks a button, the form's data is sent to the server where it is validated and processed. Then, the server returns the same form or another page to the user. This application model can be optimized with the help of Ajax, minimizing the network traffic and significantly improving the user's experience.

An Ajax client responds much faster to the user's actions and can provide desktop-like features, increasing user productivity. Instead of regenerating the HTML markup for every request on the server side, the user interface (UI) is loaded once in the browser and then the Ajax client retrieves only the data that it needs, updating the user interface dynamically. In addition, many data requests are sent asynchronously, meaning that they don't block the UI.

In this article, I'll show you how to build a Web-based table editor that allows the user to insert/delete rows and undo changes without waiting for a server response and without losing the scroll position. The table component will also act as a viewer that uses Ajax to retrieve information from a data feed. You'll learn how to use JavaScript to build a table model, create the table editor/viewer, validate data with regular expressions, access the data feed, use event handlers, and monitor the data changes in the Web browser. In addition, I'll present a very interesting technique for generating XML and HTML on the client side, using a JSP-like syntax that makes the code more readable and easier to maintain.

Application Overview

The sample application of this article is a portfolio editor/viewer:

The user enters the stock information and is able to undo the data changes at any moment. The share prices are retrieved from a data feed so that the stock values and their gains/losses can be updated every second. When the user saves the data, the table component is switched to a read-only mode:

I have already presented half of the application's code in a previous OTN article titled "Enabling Data Exchange in Ajax Applications," and the Ajax utility functions (contained in the ajaxUtil.js file) are reused from another OTN article of mine titled "Developing Smart Web UIs with Ajax, JSF, and ADF Faces." The following table specifies the article that describes each source file and the directory where you can find the file:

Article	Directory	File	Description
Data exchange	src/ajaxapp/util	JSONEncoder.java	JSON encoding utilities
Data exchange	src/ajaxapp/util	XMLUtil.java	Schema, DOM, XPath utilities
Data exchange	src/ajaxapp/model	DataModel.java	Server-side data model
Data exchange	src/ajaxapp/model	StockBean.java	JavaBean used by the data model
Data exchange	src/ajaxapp/model	portfolio.xsd	XML Schema file for validation
This article	src/ajaxapp/feed	DataFeed.java	Data feed implementation
This article	src/ajaxapp/feed	ShareBean.java	JavaBean used by the data feed
This article	src/ajaxapp/builder	JSBuilder.java	JavaScript code generator
This article	public_html	index.jsp	Main page of the portfolio app
Data exchange	public_html	ajaxCtrl.jsp	Controller for the Ajax requests
Smart Web UIs	public_html	ajaxUtil.js	General Ajax utilities
Data exchange	public_html	ajaxLogic.js	App-specific Ajax utilities
This article	public_html	dataModel.js	Client-side data model
This article	public_html	dataTable.js	UI utilities and event handlers
This article	public_html	style.css	Cascading Style Sheet
This article	public_html/WEB-INF	feed.tld	Tag Library Descriptor
This article	public_html/WEB-INF	web.xml	Web Application Descriptor
This article	public_html/WEB-INF/tags	setHeader.tag	Tag that sets an HTTP header
This article	public_html/WEB-INF/tags	template.tag	Tag that invokes the JSBuilder

Data Models and Data Feeds

Like any typical Web application, the portfolio sample has a server-side data model, which was described in "Enabling Data Exchange in Ajax Applications." The DataModel class can be initialized from an XML document, and its state can be encoded as a JSON string that is used to initialize the client-side data model, which is presented in this section.

Building Table Models

The portfolio application uses a JavaScript table model that maintains the user data and the information retrieved from the data feed with Ajax. To create the JavaScript file, open JDeveloper, select an existing project or create a new one, click File / New, expand Web Tier in the New Gallery window, select the HTML category in the left panel, select JavaScript File in the right panel and click OK:

Enter the dataModel.js file name and click OK:

The dataModel.js file of the sample application creates an object whose methods are similar to those defined by Swing's TableModel interface: getRowCount(), getColumnCount(), getColumnName(), getValueAt(), and setValueAt(). Here is the code that creates the data model object:

var dataModel = {

    columns: [ "Symbol", "Shares", "Paid Price",
        "Last Price", "Stock Value", "Gain/Loss" ],

    stocks: [ ],

    getRowCount: function() {
        return this.stocks.length;
    },

    getColumnCount: function() {
        return this.columns.length;
    },

    getColumnName: function(index) {
        return this.columns[index];
    },

    getValueAt: function(row, column) {
        ...
    },

    setValueAt: function(value, row, column) {
        ...
    },

    ...
}

The data model object has additional methods that return a stock's value and gain, calculate the portfolio's value and gain, get/set all stocks, insert a new stock, and delete an existing stock. You can find the code of these simple methods in the dataModel.js file.

The JavaScript editor of JDeveloper has many useful features such as syntax highlighting and verification, completion and parameter insight, refactoring, usage finding, brace matching, and code folding. In addition, you can use the Structure Navigator to locate declarations and functions:

The JDeveloper release used here (Oracle JDeveloper 11g Technology Preview 2) also includes a JavaScript debugger for Firefox. To view or change the debugger settings, click Tools / Project Properties, select Run/Debug/Profile in the left panel, choose the Default profile in the right panel, and click Edit:

In the Edit Run Configuration window, select Launch Settings / JavaScript in the left panel so that you can setup the debugger:

Implementing Data Feeds

A data feed usually provides a Web service or an HTTP-based protocol so that it can be accessed over a network. An Ajax client, however, cannot directly connect to third-party Web services due to security restrictions imposed by the Web browser. Therefore, you need an Ajax controller running on the same server that hosts the Ajax application. This controller should connect to the third-party Web service to retrieve the data for the Ajax client. In order to keep things simple and focus on the Ajax topics, the sample application simulates the data feed, generating random share prices in the ShareBean class:

package ajaxapp.feed;

public class ShareBean implements java.io.Serializable {
    private String symbol;
    private int trend;
    private double lastPrice;

    public ShareBean(String symbol) {
        this.symbol = symbol;
        trend = 1;
        lastPrice = Math.random() * 100;
    }

    public String getSymbol() {
        return symbol;
    }

    public int getTrend() {
        return trend;
    }

    public double getLastPrice() {
        lastPrice += trend * Math.random() * 0.1;
        if (Math.random() < 0.2)
            trend = -trend;
        return lastPrice;
    }

}

The DataFeed class provides a getData() method that takes an array of symbols and returns the share information encoded in a JSON string:

package ajaxapp.feed;

import ajaxapp.util.JSONEncoder;

import java.util.*;

public class DataFeed implements java.io.Serializable {
    private HashMap shareMap;

    public DataFeed() {
        shareMap = new HashMap();
    }

    public synchronized String getData(String symbols[]) {
        JSONEncoder json = new JSONEncoder();
        json.startArray();
        for (int i = 0; i < symbols.length; i++) {
            String symbol = symbols[i];
            ShareBean share = shareMap.get(symbol);
            if (share == null) {
                share = new ShareBean(symbol);
                shareMap.put(symbol, share);
            }
            json.startObject();
            json.property("symbol", share.getSymbol());
            json.property("trend", share.getTrend());
            json.property("lastPrice", share.getLastPrice());
            json.endObject();
        }
        json.endArray();
        return json.toString();
    }

    public static String getData(
            DataFeed feed, String symbols[]) {
        return feed.getData(symbols);
    }

}

The static getData() method is useful for calling the instance method from a JSP page, using an expression language (EL) function that is defined in feed.tld. To create the TLD file, click File / New, select the JSP category from Web Tier in the left panel, select the JSP Tag Library item and click OK:

Skip the Welcome screen of the wizard and select Project Based:

Provide the feed short name, enter the /ajaxapp/feed URI and click Finish:

Then, paste the element shown below:




    1.0
    feed
    /ajaxapp/feed

    
        getData
        ajaxapp.feed.DataFeed
        
            java.lang.String getData(
                ajaxapp.feed.DataFeed, java.lang.String[])

The application's Ajax controller (called ajaxCtrl.jsp) uses the getData() EL function to obtain the share prices for the Ajax client. A DataFeed instance is used as an application bean in the ajaxCtrl.jsp file:

<%@ taglib prefix="tags" tagdir="/WEB-INF/tags/" %>
<%@ taglib prefix="feed" uri="/WEB-INF/feed.tld" %>




...
${feed:getData(dataFeed, paramValues.symbol)}

It is important to set the no-cache header in order to disable the Web browser's cache. Here is the code of the setHeader.tag file:

<%@ attribute name="name" required="true" %>
<%@ attribute name="value" required="true" %>

<%
    String name = (String) jspContext.getAttribute("name");
    String value = (String) jspContext.getAttribute("value");
    response.setHeader(name, value);
%>

Now that we have implemented a data feed on the server side, let's see how to access it from the Ajax client.

Accessing Data Feeds

The Ajax client sends an HTTP request to the controller, which calls the getData() method and returns the JSON string. The HTTP request must contain the parameters, which are the share symbols in the case of this example. The requestFeedInfo() function (whose code can be found in dataTable.js) gets the symbols from the data model and makes sure that each symbol is included only once, because the portfolio could contain multiple stocks with the same symbol:

function requestFeedInfo() {
    var symbolSet = new Array();
    for (var i = 0; i < dataModel.stocks.length; i++) {
        var symbol = dataModel.stocks[i].symbol;
        if (isValidSymbol(symbol)) {
            for (var j = 0; j < symbolSet.length; j++)
                if (symbol == symbolSet[j].value)
                    symbol = null;
            if (symbol)
                symbolSet[symbolSet.length] = symbol;
        }
    }
    if (symbolSet.length > 0)
        sendInfoRequest(symbolSet, feedInfoCallback);
}

The array of symbols is passed to sendInfoRequest() along with feedInfoCallback, which will be invoked when the data is received from the server. The sendInfoRequest() function aborts the previous HTTP request if it hasn't been completed, and then it builds the array of HTTP parameters that is passed to sendHttpRequest(), which builds and sends the request to the server, using the Ajax API. The sendHttpRequest() function can be found in the ajaxUtil.js file whose code was discussed in a previous OTN article entitled "Developing Smart Web UIs with Ajax, JSF, and ADF Faces." Here is the code of the sendInfoRequest() function from ajaxLogic.js:

var ctrlURL = "ajaxCtrl.jsp";
var feedRequest = null;

function sendInfoRequest(symbols, callback) {
    if (feedRequest)
        abortRequest(feedRequest);
    var params = new Array();
    for (var i = 0; i < symbols.length; i++)
        params[i] = {
            name: "symbol",
            value: symbols[i]
        };
    feedRequest = sendHttpRequest(
        "GET", ctrlURL, params, callback);
}

The Ajax callback can be found in the dataTable.js file. The feedInfoCallback() function evaluates the JSON response with eval(request.responseText), obtaining an object tree that contains the information retrieved from the data feed. Then, it stores the latest share prices into the data model and calls updateDynamicCells() for updating the UI:

function feedInfoCallback(request) {
    var feedInfo = eval(request.responseText);
    for (var i = 0; i < dataModel.stocks.length; i++) {
        var symbol = dataModel.stocks[i].symbol;
        dataModel.stocks[i].lastPrice = 0;
        for (var j = 0; j < feedInfo.length; j++)
            if (symbol == feedInfo[j].symbol) {
                var value = feedInfo[j].lastPrice;
                dataModel.stocks[i].lastPrice = value;
            }
    }
    updateDynamicCells();
}

Before discussing the UI code, let's see how you can use JavaScript to generate XML and HTML in the Web browser.

Generating XML and HTML with JavaScript

Before JSP, servlets were used to dynamically generate HTML content on the server side. It was difficult to create and maintain the servlet code, because the developer had to manually encode HTML strings within the Java code and each line of markup had to be placed in a println() statement. It was difficult to view the page structure, and it wasn't possible to use visual tools for designing the pages that were coded as servlets.

Today, servlets are doing very well as the foundation of the JSP technology, which provides a much better way for generating markup on the server side. On the client side, however, JavaScript has no JSP equivalent. Many developers use servlets-like coding techniques to dynamically create HTML content, or they use the DOM API. None of these solutions is easy to use when you have to generate HTML or XML with JavaScript.

Using a JSP-like Syntax with JavaScript

It would be much easier to use something like this

 [%= data %]

instead of

"" + escapeXML(data) + ""

You wouldn't have to escape " with \ anymore, and expressions included within the [%= %] constructs would be automatically escaped, meaning that &, <, >, and " would be replaced with &, <, >, and ", respectively. Sometimes you already have a piece of markup and you don't want to escape &, <, >, and ". In this case, you could use [%# %] instead of [%= %].

So you can easily view the markup's structure, the blocks of JavaScript code can be wrapped between [% and %] as in the following example:

 [%
    for (var i = 0; i < rowCount; i++) { %]
         [%
            for (var j = 0; j < columnCount; j++) { %]
                 [%
            } %]
         [%
    } %]

                    [%# buildCell(i, j) %]

The above template must be translated into valid JavaScript code on the server side. Here is how this should look:

var content = "";
content += "";
for (var i = 0; i < rowCount; i++) {
    content += "";
    for (var j = 0; j < columnCount; j++) {
        content += "";
    }
    content += "";
}
content += "";
        content += buildCell(i, j);
        content += "";

As you can see, the code is much easier to read and maintain when you use the JSP-like syntax. Let's see how to generate the JavaScript code from the template.

Creating the Code Generator

The JSBuilder class (of the ajaxapp.builder package) parses the template and generates the JavaScript code. In addition, the JSONEncoder class (of the ajaxapp.util package) provides the means for encoding the JavaScript strings with the character() and string() methods:

package ajaxapp.util;

public class JSONEncoder {
    private StringBuilder buf;

    public JSONEncoder() {
        buf = new StringBuilder();
    }

    public void character(char ch) {
        switch (ch) {
            case '\'':
            case '\"':
            case '\\':
                buf.append('\\');
                buf.append(ch);
                break;
            ...
            default:
                if (ch >= 32 && ch < 128)
                    buf.append(ch);
                else {
                    ...
                }
        }
    }

    public void string(String str) {
        int length = str.length();
        for (int i = 0; i < length; i++)
            character(str.charAt(i));
    }

    ...

    public String toString() {
        ...
        return buf.toString();
    }

    public void clear() {
        buf.setLength(0);
    }

}

The character() and string() methods of the JSONEncoder class need some modifications so they can be used by the code generator. Therefore the createEncoder() method of JSBuilder uses an inner class that overrides character() to output a JavaScript line when it meets the '\n' character. The string() method will output the last line, which might not end with the new line character.

package ajaxapp.builder;

import ajaxapp.util.JSONEncoder;

public class JSBuilder {
    ...
    private JSONEncoder json;
    private String varName;
    private boolean isHTML;
    private PrintWriter out;

    public JSBuilder() {
        json = createEncoder();
    }

    private JSONEncoder createEncoder() {
        return new JSONEncoder() {
            private void outputLine() {
                String line = toString();
                out.println(varName + " += \"" + line + "\";");
                clear();
            }

            public void character(char ch) {
                super.character(ch);
                if (ch == '\n')
                    outputLine();
            }

            public void string(String str) {
                super.string(str);
                if (toString().length() > 0)
                    outputLine();
            }
        };
    }
    ...
}

The printContent() method uses the customized encoder to generate the JavaScript code that reconstructs a piece of HTML or XML content on the client side:

public class JSBuilder {
    ...
    private void printContent(String content) {
        json.clear();
        json.string(content);
    }
    ...
}

The printExpr() method generates the code that escapes and appends an expression:

public class JSBuilder {
    ...
    private void printExpr(String expr, boolean escapeXML) {
        if (escapeXML)
            expr = "escapeXML(" + expr + ", " + isHTML + ")";
        out.println(varName + " += " + expr + ";");
    }
    ...
}

The escapeXML() JavaScript function is included in the ajaxUtil.js file.

The build() method parses the template and generates the JavaScript code:

public class JSBuilder {
    public static final String CODE_STARTER = "[%";
    public static final String CODE_ENDER = "%]";
    public static final char EXPR_STARTER = '=';
    public static final char INCL_STARTER = '#';
    ...
    public void build(String template, String varName,
            Writer writer, boolean isHTML) {
        this.varName = varName;
        this.isHTML = isHTML;
        out = new PrintWriter(writer, true);
        out.println("var " + varName + " = \"\";");
        int contentStart = 0;
        int contentEnd = template.indexOf(CODE_STARTER);
        while (contentEnd != -1) {
            String content = template.substring(
                    contentStart, contentEnd);
            printContent(content);
            int codeStart = contentEnd + 2;
            int codeEnd = template.indexOf(CODE_ENDER, codeStart);
            if (codeEnd == -1) {
                codeEnd = template.length();
                template += CODE_ENDER;
            }
            char starter = template.charAt(codeStart);
            if (starter == EXPR_STARTER || starter == INCL_STARTER) {
                codeStart++;
                String expr = template.substring(codeStart, codeEnd);
                printExpr(expr, starter == EXPR_STARTER);
            } else {
                String code = template.substring(codeStart, codeEnd);
                out.println(code);
            }
            contentStart = codeEnd + 2;
            contentEnd = template.indexOf(CODE_STARTER, contentStart);
        }
        String content = template.substring(contentStart);
        printContent(content);
    }

}

With fewer than 100 lines of code, we've built a template parser / code generator, which significantly improves the readability and maintainability of the JavaScript code that dynamically produces HTML or XML on the client-side.

Using the Code Generator in JSP Pages

In order to keep the JSP pages scriptless, the JSBuilder's build() method can be invoked from a custom tag file (named template.tag), which will generate a JavaScript function that returns the generated content. The function's header can be provided via an attribute, and the template can be placed between the start tag and the end tag. Here is the syntax of the custom tag:


     ... template ...

To create the tag file, click File / New, expand Web Tier in the New Gallery window, select the JSP category in the left panel, select JSP Tag File in the right panel, and click OK:

Enter the template.tag file name and click OK:

Then, paste the following source code. The action is used in the tag file to obtain the template�s body, which is stored in a JSP variable. Then, the template is passed to the build() method, which generates the JavaScript code that will produce the content on the client side. Here is the code of the template.tag file:

<%@ attribute name="function" required="true" %>
<%@ attribute name="isHTML" required="false"
    type="java.lang.Boolean" %>
<%@ tag import="ajaxapp.builder.JSBuilder" %>

The index.jsp page of the sample application uses the template tag to generate JavaScript functions that produce dynamic HTML content as well as an XML document containing the portfolio�s data. You'll see later in the article how the HTML pieces are inserted into the Web page with innerHTML. The XML document is sent to the server with XMLHttpRequest.

You can use Oracle JDeveloper to insert the tag into the JSP page. Select Local Tag Files: /WEB-INF/tags/ in the Component Palette. Then, drag Template from the palette and drop it on the head tag, which is shown in the Structure Navigator. JDeveloper starts a wizard that lets you enter the required function attribute in the Common Properties tab and the optional isHTML attribute in the Advanced Properties tab. Enter the buildPortfolioDoc() function header, and click Finish:

JDeveloper will insert the tag within the element of the JSP page. After that, you may enter the template�s body. Here is the code that generates JavaScript function, which returns the portfolio XML document:


     [%
        var stocks = dataModel.stocks;
        for (var i = 0; i < stocks.length; i++) {
            var stock = stocks[i]; %]
             [%
        } %]

The next section shows how to use the custom tag for building the table editor/viewer.

Table Editors and Viewers

There are many cases when a table component must change dynamically in response to the user's actions. For example, a row could be inserted or deleted when the user clicks a button. If the table's content is recreated on the server, the user must wait while the table is reloaded and the scroll position is lost. If the user has just inserted an empty row, he/she must scroll down to find the new line where data must be entered. This is a time-consuming operation that can be avoided, using Ajax and DHTML.

Initializing the User Interface

The application's main page (index.jsp) declares the used tag libraries, JavaScript files, and style sheet:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags/" %>











...

...

You can use JDeveloper's editors and wizards to build JSP pages. To insert a JSP directive or a standard action, select JSP in the Component Palette, and then click or drag the desired element:

Click Taglib Directive and select a JSP library that you want to use in the Web page:

You can also use JDeveloper to insert HTML tags in a Web page. Select HTML in the Component Palette, select the Common category, and click Script. Then select the JavaScript file whose functions you want to call in the Web page:

The body of the index.jsp page contains two elements ( and

) whose content will be set later with the help of innerHTML. The onLoad attribute indicates the function that the browser must call after loading the page:

The init() function tries to load the portfolio, using the sendLoadRequest() utility from the ajaxLogic.js file. If the loading succeeds, stocks are stored into the client-side data model and the editing flag is set to false. Otherwise, init() adds three empty rows and sets the editing mode. The requestFeedInfo() function is scheduled with setInterval() to be called every second:

function init() {
    var stocks = sendLoadRequest();
    if (stocks && stocks.length > 0) {
        dataModel.setStocks(stocks);
        addDataChange();
        setEditing(false);
    } else {
        for (var i = 0; i < 3; i++)
            dataModel.insertStock(i);
        addDataChange();
        setEditing(true);
    }
    setInterval("requestFeedInfo()", 1000);
}

Using Cascading Style Sheets

The sample application uses the following CSS file:

BODY { background: #FFFFFF; color: #000000; }
TH { font-weight: bold;
     background-color: #EEF8FF;
     border-top: 1px solid #CCCCCC;
     border-right: 1px solid #CCCCCC;
     border-bottom: 1px solid #CCCCCC; }
TD { font-weight: normal;
     background-color: #FFFFFF;
     border-right: 1px solid #CCCCCC;
     border-bottom: 1px solid #CCCCCC; }
TH.symbol, TD.symbol { text-align: left;
     border-left: 1px solid #CCCCCC; }
TH.number, TD.number { text-align: right; }
TD.button { text-align: center; }
TD.leftButton { text-align: center;
     border-left: 1px solid #CCCCCC; }
BUTTON { background-color: #EEEEEE; }
INPUT.valid { background-color: #FFFFFF; }
INPUT.error { background-color: #FFEEEE; }
SPAN.gain { color: #008000; }
SPAN.loss { color: #FF0000; }
A:link, A:visited { color: #000000;
     text-decoration: underline; }
A:hover, A:active { color: #FF0000;
     text-decoration: underline; }

You can use Oracle JDeveloper to enter the values of the CSS properties:

Creating Tables with JavaScript

The JavaScript code that builds the sample application's table is generated in the index.jsp file with the custom template tag presented in the previous section. Here is the code for building a single cell of the table:

 [%
    var value = "";
    if (!isDynamic(row, column))
        value = dataModel.getValueAt(row, column);
    if (isEditable(row, column)) {
        var id = getInputId(row, column); %]
         [%
    } else {
        var id = getSpanId(row, column); %]
        [%= value %] [%
    } %]

The dataTable.js file contains the JavaScript functions that are called from the template code. The isDynamic() function returns true if the cell's value is computed using data that is retrieved from the feed:

function isDynamic(row, column) {
    return column >= 3;
}

The isEditable() function returns true if the user can modify the cell's value:

function isEditable(row, column) {
    return isEditing() && column < 3;
}

The getInputId() and getSpanId() functions return the IDs of the and elements of the cells:

function getInputId(row, column) {
    return "input_" + row + "_" + column;
}

function getSpanId(row, column) {
    return "span_" + row + "_" + column;
}

The buttons and links are generated with another template. The buildButton() function accepts three parameters: the button's label, the event handler that must be called when the button (or the link) is clicked, and an optional parameter for the handler function:

 [%
    if (!param) param = ""; %]
    
        
    
    
        
            [%= label %]

The useButtons parameter, which is configured in the web.xml file, determines whether buildButton() generates a button or a link:



    
        useButtons
        true
    
    ...

The table's template starts with the header that contains the column names. The buildCell() and buildButton() functions are used to generate the content of the cells. The last row contains additional buttons and the totals:


     [%
            var columnCount = dataModel.getColumnCount();
            for (var j = 0; j < columnCount; j++) { %]
                 [%
            }
            if (isEditing()) { %]
                 [%
            } %]
         [%
        var rowCount = dataModel.getRowCount();
        for (var i = 0; i < rowCount; i++) { %]
             [%
                for (var j = 0; j < columnCount; j++) { %]
                     [%
                }
                if (isEditing()) { %]
                     [%
                } %]
             [%
        } %]
         [%
            if (isEditing()) { %]
                 [%
            } %]
        
        
                    [%= dataModel.getColumnName(j) %]
                 

                        [%# buildCell(i, j) %]
                    
                        [%# buildButton("Insert", "insertAction", i) %]
                    
                    
                        [%# buildButton("Delete", "deleteAction", i) %]
                    

             [%
                if (isEditing()) { %]
                    [%# buildButton("Save", "saveAction") %] [%
                } else { %]
                    [%# buildButton("Edit", "editAction") %] [%
                } %]
            
            Total:
            
            
                    [%# buildButton("Add", "insertAction", rowCount) %]
                
                
                    [%# buildButton("Undo", "undoAction") %]

[%= dataModel.getColumnName(j) %]
[%# buildCell(i, j) %]	[%# buildButton("Insert", "insertAction", i) %]	[%# buildButton("Delete", "deleteAction", i) %]
[% if (isEditing()) { %] [%# buildButton("Save", "saveAction") %] [% } else { %] [%# buildButton("Edit", "editAction") %] [% } %]	Total:			[%# buildButton("Add", "insertAction", rowCount) %]	[%# buildButton("Undo", "undoAction") %]

The generated buildTable() function is called from updateTableComponent(), whose code can be found in the dataTable.js file:

function updateTableComponent() {
    getElementById("dataTable").innerHTML = buildTable();
    updateDynamicCells();
    requestFeedInfo();
    if (isEditing())
        validateTableData();
}

The getElementById() function calls the document's getElementById(), which returns the DOM object representing the HTML element that has the given ID:

function getElementById(id) {
    return document.getElementById(id);
}

The isEditing() function returns the value of the editing flag, which indicates whether the table component is in editing or viewing mode:

var editing = false;
...
function isEditing() {
    return editing;
}

In addition to setting the editing flag, the setEditing() function modifies the page's title and updates the table component:

function setEditing(value) {
    editing = value;
    var title = "AJAX-based Portfolio "
        + (editing ? "Editor" : "Viewer");
    getElementById("title").innerHTML = title;
    updateTableComponent();
}

Validating Table Editor's Data

Regular expressions provide an easy way to validate data with JavaScript. For example, a share symbol can be validated with the following function, whose code can be found in dataTable.js:

function isValidSymbol(symbol) {
    return symbol && (symbolRE.exec(symbol) == symbol);
}

The sample application uses three regular expressions for validating the user input:

var symbolRE = /[A-Za-z][A-Za-z][A-Za-z][A-Za-z]?/;
var numberRE = /\d+/;
var priceRE = /\d+\.?\d*/;

The validateCellData() function validates the value of a single cell:

function validateCellData(row, column) {
    if (!isEditable(row, column))
        return true;
    var valid = false;
    var inputElem = getElementById(getInputId(row, column));
    var value = inputElem.value;
    if (value) {
        var regexp = null;
        switch (column) {
            case 0: regexp = symbolRE; break;
            case 1: regexp = numberRE; break;
            case 2: regexp = priceRE; break;
        }
        if (regexp != null)
            valid = regexp.exec(value) == value;
    }
    inputElem.className = valid ? "valid" : "error";
    return valid;
}

User errors are signaled with the pink color of the error style:

The validateTableData() function verifies the data of the whole table:

function validateTableData() {
    var allValid = true;
    for (var i = 0; i < dataModel.getRowCount(); i++)
        for (var j = 0; j < dataModel.getColumnCount(); j++) {
            var valid = validateCellData(i, j);
            allValid = allValid && valid;
        }
    return allValid;
}

Data should be revalidated on the server for security reasons. The sample application (download) uses the portfolio.xsd schema for this operation.

Refreshing Table Viewer's Data

In a JavaScript application, data can be formatted using custom utilities, such as the formatPrice() function, which returns a string representation of a numeric price:

function formatPrice(value) {
    var n = new Number(value);
    if (isNaN(n) || n == 0)
        return " ";
    return n.toFixed(2);
}

The updateDynamicCells() function updates all dynamic cells of the table. After locating the element of each dynamic cell, the content is changed, using the innerHTML property of the element. If the cell represents a gain or a loss, its style can be changed too, using the className property of the same element:

function updateDynamicCells() {
    for (var i = 0; i < dataModel.getRowCount(); i++) {
        for (var j = 0; j < dataModel.getColumnCount(); j++) {
            if (isDynamic(i, j)) {
                var value = dataModel.getValueAt(i, j);
                var spanElem = getElementById(getSpanId(i, j));
                spanElem.innerHTML = formatPrice(value);
                if (j == 5)
                    spanElem.className = value >= 0 ? "gain" : "loss";
            }
        }
    }
    var totalValue = dataModel.getTotalValue();
    var totalValueElem = getElementById("totalValue")
    totalValueElem.innerHTML = formatPrice(totalValue);
    var totalGain = dataModel.getTotalGain();
    var totalGainElem = getElementById("totalGain")
    totalGainElem.innerHTML = formatPrice(totalGain);
    totalGainElem.className = totalGain >= 0 ? "gain" : "loss";
}

Using Event Handlers

The dataTable.js file contains the code that handles the UI events. Every time the user changes the value of a cell, the browser calls the dataChanged() function, whose call is coded in value of the onChange attribute of each element. The dataChanged() function validates the cell's data, stores the new value in the data model, updates the dynamic cells, and requests the feed information just in case the user entered a new symbol:

function dataChanged(row, column) {
    validateCellData(row, column);
    var inputElem = getElementById(getInputId(row, column));
    dataModel.setValueAt(inputElem.value, row, column);
    addDataChange();
    updateDynamicCells();
    requestFeedInfo();
}

The addDataChange() function saves the stocks into the dataChanges array:

var dataChanges = new Array();
...
function addDataChange() {
    dataChanges[dataChanges.length]
        = dataModel.getStocks();
}

The undoAction() function is called each time the user clicks the Undo button. The previous stocks are retrieved from the dataChanges array. Then, the data model and the table are updated:

function undoAction() {
    if (dataChanges.length >= 2) {
        var stocks = dataChanges[dataChanges.length-2];
        dataChanges.length--;
        dataModel.setStocks(stocks);
        updateTableComponent();
    }
}

The insertAction() function inserts a new row:

function insertAction(row) {
    dataModel.insertStock(row);
    addDataChange();
    updateTableComponent();
}

The deleteAction() function deletes a row:

function deleteAction(row) {
    dataModel.deleteStock(row);
    addDataChange();
    updateTableComponent();
}

The saveAction() function sends the portfolio's data to the server, using the buildPortfolioDoc() function that is generated in index.jsp and the sendSaveRequest() function whose code can be found in ajaxLogic.js. The portfolio is saved only if the entire table's data is valid:

function saveAction() {
    if (validateTableData()) {
        sendSaveRequest(buildPortfolioDoc());
        setEditing(false);
    } else {
        alert("Please provide valid values for the pink fields.");
    }
}

The editAction() function just calls setEditing(true):

function editAction() {
    setEditing(true);
}

Summary

In this article, you've learned how to build Swing-like table models and implement data feeds that are accessed with the help of Ajax. Then, you've seen how to use a JSP-like syntax for generating HTML and XML with JavaScript. Finally, you've found out how to build table components, validate and format their data with JavaScript, define their appearance with CSS, handle events, and undo the data changes.

ASP.NET Multiple Selection DropDownList with AJAX HoverMenuExtender

admin — Sun, 29 Nov 2009 14:07:11 +0000

This web user control comprises the ASP.NET AJAX HoverMenuExtender, JavaScript, StyleSheet, and CheckBoxListExCtrl. The final product works with or without a MasterPage and you can drag and drop more than one instance of the control on to the page.

Figure 1

Figure 2

Recently, I was looking for a multiple selection dropdownlist control for my new project. After spending some time researching for it, I decided to put together all my finding in one web user control. This web user control consists of an ASP.NET AJAX HoverMenuExtender, JavaScript, StyleSheet and CheckBoxListExCtrl. The final product will work with or without a masterpage and you can drag and drop more than one instances of the control on to the page. This is not a perfect control, feel free to modify it to tailor your requirement and share your thoughts. Below is a step by step tutorial on how I have accomplished this. Hope this tutorial will give someone an idea on how to use ASP.NET AJAX HoverMenuExtender and create multiple selection dropdownlist.

Before we begin, this is the structure of my project.

Figure 3

Using the Code

This is a usercontrol, just drag and drop. But make sure to include the ScriptManager.

The project includes:

· Default.aspx – this page do not use master page and user control.

· MS_With_UserControl.aspx – this page use multiple instances of the user control and no master page.

· MS_With_UserControl_and_Masterpage.aspx – this page use multiple instances of the user control and a master page.

· CheckBoxListExCtrl – How to get the CheckBoxlist Value using Javascript?

· The rest of the files are fairly self explanatory.

The code is pretty much the same except I had made a few changes to return the text of the selected checkbox. Please see comments.

Listing 1 — CheckBoxListExCtrl

string clientID = UniqueID + this.ClientIDSeparator 
  + repeatIndex.ToString(NumberFormatInfo.InvariantInfo); //09042009 BT - var
writer.WriteBeginTag("input");
writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("name", UniqueID + this.IdSeparator 
  + repeatIndex.ToString(NumberFormatInfo.InvariantInfo));
writer.WriteAttribute("id", clientID);
writer.WriteAttribute("value", Items[repeatIndex].Value);
if (Items[repeatIndex].Selected)
    writer.WriteAttribute("checked", "checked");
System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;
foreach (string key in attrs.Keys)
{
    writer.WriteAttribute(key, attrs[key]);
}
writer.Write("/>"); //09042009 BT - close the input tag 
writer.Write(" + clientID + "'>"); 
//09042009 BT - added label to hold the checkbox text
writer.Write(Items[repeatIndex].Text); //text
writer.Write(""); //close label tag

Here is the content of the JavaScript, please read the comments.

Listing 2 — MultipleSelectionDDLJS.js

/*detect the browser version and name*/
var Browser = {
  Version: function() {
    var version = 999; // we assume a sane browser
    if (navigator.appVersion.indexOf("MSIE") != -1)
      // bah, IE again, lets downgrade version number
      version = parseFloat(navigator.appVersion.split("MSIE")[1]);
    return version;
  }
}
function showIE6Tooltip(e){
    //we only want this to execute if ie6
    if (navigator.appName=='Microsoft Internet Explorer' 
          && Browser.Version() == 6) {
        if(!e){var e = window.event;}
        var obj = e.srcElement;
        tempX = event.clientX + (document.documentElement.scrollLeft 
                                 || document.body.scrollLeft);
        tempY = event.clientY + (document.documentElement.scrollTop 
                                 || document.body.scrollTop);
        
        var tooltip = document.getElementById('ie6SelectTooltip');
        tooltip.innerHTML = obj.options.title; //set the title to the div
        //display the tooltip based on the mouse location
        tooltip.style.left = tempX;
         tooltip.style.top = tempY+10;
        tooltip.style.width = '100%';
        tooltip.style.display = 'block';
      }
    }
    function hideIE6Tooltip(e){
     //we only want this to execute if ie6
       if (navigator.appName=='Microsoft Internet Explorer' 
           && Browser.Version() == 6) {
        var tooltip = document.getElementById('ie6SelectTooltip');
        tooltip.innerHTML = '';
        tooltip.style.display = 'none';
       }
    }
/* get and set the selected checkbox value and 
text and selected index to a hidden field */
function getCheckBoxListItemsChecked(elementId) {
    //var
    var elementRef = document.getElementById(elementId);
    var checkBoxArray = elementRef.getElementsByTagName('input');
    var checkedValues = '';
    var checkedText = '';
    var checkedSelIndex = '';
    var myCheckBox = new Array();
    for (var i = 0; i < checkBoxArray.length; i++) {
        var checkBoxRef = checkBoxArray[i];
        if (checkBoxRef.checked == true) {
        //selected index
            if (checkedSelIndex.length > 0)
                checkedSelIndex += ', ';
            checkedSelIndex +=i;     
                //value
            if (checkedValues.length > 0)
                checkedValues += ', ';
            checkedValues += checkBoxRef.value;
        //text
            var labelArray = checkBoxRef.parentNode.
                  getElementsByTagName('label');
            if (labelArray.length > 0) {
                if (checkedText.length > 0)
                    checkedText += ', ';
                checkedText += labelArray[0].innerHTML;
            }
        }
    }
    myCheckBox[0] = checkedText;
    myCheckBox[1] = checkedValues;
    myCheckBox[2] = checkedSelIndex;
    return myCheckBox;
}
function readCheckBoxList(chkBox, ddlList, hiddenFieldText, hiddenFieldValue, 
hiddenFieldSelIndex) {
    var checkedItems = getCheckBoxListItemsChecked(chkBox);
    $get(ddlList).options[0].innerHTML = checkedItems[1]; //set dropdownlist value
    $get(ddlList).title = checkedItems[0]; //set the title for the dropdownlist
    //set hiddenfield value
    $get(hiddenFieldValue).value = checkedItems[1];
    $get(hiddenFieldText).value = checkedItems[0];
    $get(hiddenFieldSelIndex).value = checkedItems[2];
}

MultipleSelection.ascx –

In this page, I have HoverMenuExtender, DropDownList, CheckBoxListExCtrl, a few hidden fields and a div to display tooltip information for IE 6.0. And I have added some dummy data to my checkboxlist so it wouldn't look empty when I drag it into the page.

Listing 3 – user control page

<div>
    <cc2:HoverMenuExtender ID="HoverMenuExtender1"
         runat="server" TargetControlID="MultiSelectDDL" 
         PopupControlID="PanelPopUp" PopupPosition="bottom" 
         OffsetX="6" PopDelay="25" HoverCssClass="popupHover">
    cc2:HoverMenuExtender>      
   <asp:DropDownList ID="MultiSelectDDL" CssClass="ddlMenu regularText" 
     runat="server">
       <asp:ListItem Value="all">Selectasp:ListItem>  
   asp:DropDownList>
   <asp:Panel ID="PanelPopUp" CssClass="popupMenu" runat="server">
       <cc1:CheckBoxListExCtrl ID="CheckBoxListExCtrl1" 
          CssClass="regularText" runat="server">
           <asp:ListItem Value="d1">Dummy 1asp:ListItem>
           <asp:ListItem Value="d2">Dummy 2asp:ListItem>
       cc1:CheckBoxListExCtrl>
   asp:Panel>
   <asp:HiddenField ID="hf_checkBoxValue" runat="server" />
   <asp:HiddenField ID="hf_checkBoxText" runat="server" />
   <asp:HiddenField ID="hf_checkBoxSelIndex" runat="server" />
div>   
<div id="ie6SelectTooltip" style="display:none;position:absolute;padding:1px;
border:1px solid #333333;;background-color:#fffedf;font-size:smaller;
z-index: 99;">div>

MultipleSelection.ascx.cs

Here is some of the code on Page_Load event, please read comments

Listing 4 – user control code behind

LoadJScript();
LoadCss();
//add onclick attributes, call the readCheckBoxList function with parameters
        CheckBoxListExCtrl1.Attributes.Add("onclick", "readCheckBoxList('" +
                    CheckBoxListExCtrl1.ClientID + "','" + 
                    MultiSelectDDL.ClientID + "','" +
                    hf_checkBoxText.ClientID + "','" +
                    hf_checkBoxValue.ClientID + "','" + 
                    hf_checkBoxSelIndex.ClientID + "');");
//for IE 6.0
        MultiSelectDDL.Attributes.Add("onmousemove", "showIE6Tooltip();");
        MultiSelectDDL.Attributes.Add("onmouseout", "hideIE6Tooltip();");

I have a method to load the Style Sheet and JavaScript separately with no duplicates, if you drag and drop multiple instances of the control onto the page, it will only register the StyleSheet and JavaScript one time only. Notice that I also included ResolveUrl method so that the usercontrol will never have problem locating the StyleSheet and JavaScript.

Listing 5 – load style sheet and JavaScript

//load style css
    internal void LoadCss()
    {
        //prevent loading multiple css style sheet
        HtmlControl css = null;
        if (Session["MultipleSelectionDDLCSSID"] != null)
        {
            css = Page.Header.FindControl(
              Session["MultipleSelectionDDLCSSID"] as string) as HtmlControl;
        }
               if (css == null)
        {
            //load the style sheet
            HtmlLink cssLink = new HtmlLink();
            cssLink.ID = "MultipleSelectionDDLCSSID";
            cssLink.Href = ResolveUrl(
              "~/MS_Control/MultipleSelectionDDLCSS.css");   
            cssLink.Attributes.Add("rel", "stylesheet");
            cssLink.Attributes.Add("type", "text/css");
            // Add the HtmlLink to the Head section of the page.
            Page.Header.Controls.Add(cssLink);
            Session["MultipleSelectionDDLCSSID"] = cssLink.ID;
        }
    }
    //load the javascript
    internal void LoadJScript()
    {
        ClientScriptManager script = Page.ClientScript;
        //prevent duplicate script
        if (!script.IsStartupScriptRegistered(this.GetType(),
             "MultipleSelectionDDLJS"))
        {
            script.RegisterStartupScript(this.GetType(), 
              "MultipleSelectionDDLJS",
            "");
        }
    }

Listing 6 — MS_With_UserControl_and_Masterpage.aspx

<asp:ScriptManager ID="ScriptManager1" runat="server">
        asp:ScriptManager>
<asp:Label ID="Label1" CssClass="regularText" runat="server" Text="Month:" />
<uc1:MultipleSelection ID="MultipleSelection1" runat="server" />

Listing 7 — MS_With_UserControl_and_Masterpage.aspx.cs – How to bind the data

DataTable dt = new DataTable();
        DataColumn dcValue = new DataColumn("Value", typeof(string));
        DataColumn dcText = new DataColumn("Text", typeof(string));
        dt.Columns.Add(dcText);
        dt.Columns.Add(dcValue);
        DataRow dr;
        dr = dt.NewRow();
        dr["Text"] = "January";
        dr["Value"] = "m1";
        dt.Rows.Add(dr);
           …
//datasource, dataTextField, dataValueField
 MultipleSelection1.CreateCheckBox(dt, "Text", "Value");

Listing 8 — How to set selected value

MultipleSelection1.selectedIndex = "1,5,7";

Listing 9 — How to get the SelectedInde, SelectedValue, SelectedText

MultipleSelection1.sText
MultipleSelection1.sValue
MultipleSelection1.selectedIndex

Points of Interest

For some reason I didn't load the ScriptManager dynamically. So, make sure you include a ScriptManager on the page before using the usercontrol or you will come across this error message: "The control with ID 'HoverMenuExtender1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it."

" Invalid postback or callback argument. Event validation is enabled using…".

Initially, I was trying to modify the value of the dropdownlist through the JavaScript and I kept getting the error whenever I hit the submit button. The easiest solution was to set the EnableEventValidation = false on the page directive, but instead, I found another work around by using hidden field.

The tooltip (title) were displaying correctly on IE 7.0, 8.0, FireFox and Google Chrome but not in IE6.0. In order to remedy the problem, I included a separate function to show and hide the tooltip.

I am using a checkboxlist controls and having difficulty to get the checkboxlist value and text using JavaScript. After conducting some research, I came across a class library by Trilochan Nayak. I have modified his class so that I can retrieve the value and text of the selected checkbox through the JavaScript.