Dropkick: A custom dropdown jquery plugin

In one of my projects we were working on rewriting an existing application from Silver light platform to HTML5. As part of this we had to come up with a solution for all the dropdowns to look exactly as in Silverlight version. But we were not able customize the dropdowns with html select control to look exactly as in Silverlight version.

I did lot of research in Google, found some Jquery/javascript plugins and approaches and explored all of them. After trying with most of the approaches and plugins I have felt that that the Jquery plugin DropKick well suits for my requirement. You can download this plugin at the following url.
http://jamielottering.github.com/DropKick/

 How to use dropkick in your code?
1. Write the markup code for regular html dropdown as shown below
<select id="ddlCountry">
 <option value="1">India</option>
 <option value="2">USA</option>
 <option value="3">UK</option>
 <option value="4">Russia</option>
</select>
2. Add the dropkick javascript reference to your page in header section
3. Dropkick works for Jquery so you must also make sure you added reference to Jquery
4. Apply dropkick effect to your regular dropdown control as shown below
     $('#ddlCountry').dropkick();
5. You might want to handle the change event for the dropkick, in that case you can write the following code snippet.
     $('.ddlCountry').dropkick({
         change: function (value, label) {
         alert('Your selection: ' + label + ':' + value);
     }
     });
6. You also need to add the reference to dropkick css file to make sure you are getting the custom styles applied. And also you can edit the css to customize style effects for your specific requirement.

You can see the sample customised dropdown by dropkick below:

You can find more information at http://jamielottering.github.com/DropKick/

Sql user defined function to replace HTML text without disturbing HTML elements

You may find many articles on how to strip HTML in SQL. But we rarely find articles on doing replace functionality without disturbing the HTML tags in SQL. This is a very useful requirement where we store content in HTML format in the database.

When I did Google search on this I found some articles on how to strip HTML from SQL and one of those articles inspired me to write a user defined function which does replace within the text and preserves the HTML as it is.

The below is the user defined function written by me as inspired from the article SQL SERVER – 2005 – UDF – User Defined Function to Strip HTML – Parse HTML – No Regular Expression

CREATE FUNCTION [dbo].[udf_ReplaceHTMLContent]
(
@HTMLText VARCHAR(MAX),
@Find VARCHAR(MAX),
@Replace VARCHAR(MAX)
)

RETURNS VARCHAR(MAX)
AS
BEGIN

DECLARE @Start INT
DECLARE @End INT
DECLARE @Length INT
DECLARE @UpdatedHTMLText VARCHAR(MAX)

SET @UpdatedHTMLText = ''
SET @Start = CHARINDEX('<',@HTMLText)
SET @End = CHARINDEX('>',@HTMLText,CHARINDEX('<',@HTMLText))
SET @Length = (@End - @Start) + 1


WHILE @Start > 0
AND @End > 0
AND @Length > 0

BEGIN

SET @UpdatedHTMLText = @UpdatedHTMLText + Replace(SUBSTRING(@HTMLText, 0, @Start), @Find, @Replace)

SET @UpdatedHTMLText = @UpdatedHTMLText + SUBSTRING(@HTMLText, @Start,@Length)

SET @HTMLText = STUFF(@HTMLText,1, @Start + @Length - 1,'')

SET @Start = CHARINDEX('<',@HTMLText)

SET @End = CHARINDEX('>',@HTMLText,CHARINDEX('<',@HTMLText))

SET @Length = (@End - @Start) + 1

END


if @UpdatedHTMLText = ''

SET @UpdatedHTMLText = @UpdatedHTMLText + Replace(@HTMLText, @Find, @Replace)


RETURN LTRIM(RTRIM(@UpdatedHTMLText))

END



SQL Server 2008 - MERGE statement

SQL server 2008 has introduced a new feature to merge two tables. It lets you write a single SQL statement to insert, update and delete the records in the target table based on some conditions. It is very useful where you need to sync two tables. It avoids writing separate statements and logic for insert, update and delete.

It's syntax is very simple and straight forward:

MERGE <target_table> [AS table_alias]

USING <table_source> [AS table_alias]

ON <search_condition>

[WHEN MATCHED [AND clause_search_condition]

THEN <merge_matched> ]

[WHEN NOT MATCHED [BY TARGET] [AND clause_search_condition]

THEN <merge_not_matched> ]

[WHEN NOT MATCHED BY SOURCE [AND clause_search_condition]

THEN <merge_ matched> ];

Let me write an example and explain how MERGE works.

Let's say we have two tables named Books_Source and Books_Target which need to be synced periodically. And at one instance

The table Books_Source contains:

BookID          BookName                         Quantity

1              "Learn ASP.Net"                      3

3              "SQL tips"                           5

4          "Complete Reference of JAVA"             2

The table Books_Target contains:

BookID     BookName                      Quantity

1         "Learn ASP.Net"                   2

2          "Learn XML"                      4

4      "Complete Reference of JAVA"         4

To merge the above tables our MERGE statement goes like this:

MERGE Books_Target AS t

USING Books_Source AS s

ON t.BookID = s.BookID

WHEN MATCHED AND s.Quantity != t.Qunatity

THEN UPDATE SET t.Quantity = s.Quantity

WHEN NOT MATCHED BY TARGET

THEN INSERT(BookID, BookName, Quantity) VALUES(s.BookID, s.BookName, s.Quantity)

WHEN NOT MATCHED BY SOURCE

THEN DELETE;

• As you can see in the above code, insert, update and delete actions happen in a single MERGE statement. It lets us add our own conditions to merge conflicts and our own merge actions to take place.
• In this example we have written update statement where the records exist in both tables but the column Quantity is different. In this case I want to update only when quantity gets changed in Order_Source table.
• Similarly we have written insert statement where the records exist in source table but not in target table. Here we have not added any additional condition because we wanted to insert all those don't exist in target table.
• In the same way we have written DELETE statement where the records exist in target table but not in the source table. In this case we don't want the records those are not in source table.
• MERGE statement is more efficient than separate statements for insert, update and delete operation to merge tables
  

The final result after the execution of above statement is:

BookID     BookName                      Quantity
1         "Learn ASP.Net"                   3
3              "SQL tips"                   5
4      "Complete Reference of JAVA"         2

Jquery language translation plugin

Many of us know that Google is providing an online tool to translate from one language to another language. Of course this translation may not be accurate but the percentage of accuracy varies from language to language based on the language structure. Basically it translates word by word. This tool is really helpful to understand statements in different languages.

But if we have a our own website which is completely in English and there are users which don't know English and they want to know about our site then it is a problem. In this case they may not know that there is a tool which translates text in English to their native language or they don't have time to translate each and every page or they may not be interested to translate at all. Then they may simply skip reading and ignore your site.

To avoid these kind of risks Google also provided us translator API which lets us develop our website to translate from one language to another language. To know more about Google translator please go through the link http://code.google.com/apis/language/translate/v1/getting_started.html. It is very easy to integrate with our website by following this link.

But the major problem with the Google translate API is its limitation with the length of the text we pass to translator. It does not translate if we pass text with more than 5000 characters. It is only helpful where we need to translate a portion of our web page and that too with less than 5000 characters. If we have to translate the complete web page then we need to write complex logic to split the html code into 5000 character sets and translate thru API and then merge the results. This is really paining.

To solve these problems we have Jquery plugin for translator. You can download this at http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js. It internally uses Google translator API and applies the above discussed logic and gives us the complete translated html. This takes the complex part and leave us a simplest part to translate complete web page.

The below code will do complete translation of your web page from source language to destination language

$('body').translate( srcLang, destLang );

Eg: $('body').translate( "en", "es"); //translates text from English to Spanish

But to get it working you also need to make sure you have Jquery along with this plugin.

You can also try playing with this plugin and see how it works. Please take a look at http://jsbin.com/emufo/edit and make any changes you want and preview the behavior by clicking Preview link on top left corner.

Online tool Url Decoder / Encoder

I have come across a need for url decoding as I got a link which was url encoded. And I have found a useful online tool which lets me enter a url encoded text and get the url decoded text. This also has functionality to url encode the given text. You may url encode as many times you want, but you need to decode the encoded text as number of times it was encoded.

I have found this as very useful for my purpose. And this works completely on client side. Please take a look at it.

http://meyerweb.com/eric/tools/dencoder/

Sitefinity performance factor - script manager

If you are using sitefinity to build any website then while adding sitefinity inbuilt controls such as menu you will be forced to write Script Manager in the template (master file). If you use script manager anywhere in the website it will load lot of unwanted javascript files along with the target page. It is better we don’t write script manager in any website unless we are building a complex website which needs ajax framework and other javascript libraries. I recommend you manually add menu and menu items in code rather than using sitefinity navigation controls and for ajax calls please use jquery to make server requests. Not having script manager will reduce the amount of javascript resources to a siginificant number.

And on our current project waypoint, we were not using any of the sitefinity inbuilt controls and not ajax framework too. But somehow we were having script manager written in the master file. And due to this it was loading around 350 KB javascript files which were never used by the site. And after I realised, I have removed the script manager tag and noticed a big surprise. The site is perfectly working without any issues and the overall page size was reduced from 500KB to 150KB (Avoiding 350KB for unwanted javascript files).
So I would strongly recommend you to avoid writing Script Manager in your websites and find the alternate solution for that.

Changing cookie expiration time

Changing cookie expiration time is not straight forward. It is not as easy as setting the http cookie's property Expires to required value as shown below.

HttpContxt.Response.Cookies["UserID"].Expires = DateTime.Now.AddMinutes(20);

I was using the above line of code in one of my projects as I wanted to make sure the cookie's expiration time gets updated for every user action. I added that line of code in the method where I check for authentication in each page request. But I was wondering with it's strange behavior as it is crashing the web page to load. I did spend some time on fixing it but got no luck.

After a while I got the solution which is explained in an MSDN article http://msdn.microsoft.com/en-us/library/ms178194.aspx. As explained the article, we must recreate the cookie with value and expiration time as we normally do when adding a cookie. So changing cookie is not at all different from creating a cookie in the browser. Finally I changed my code to recreate the cookie where updating cookie expiration time is needed. And it is perfectly working fine.

The correct code it worked was:

HttpContxt.Response.Cookies["UserID"].Value= UserID;
HttpContxt.Response.Cookies["UserID"].Expires = DateTime.Now.AddMinutes(20);