Adventures In Development » JQuery

Create a Sortable HTML Table with JQuery and TableSorter

Matthew Paulson — Fri, 05 Jun 2009 15:29:19 +0000

One of the more useful features of ASP.NET’s GridView control is that users can sort the information in the table they are seeing by any number of fields. To allow this sorting to happen, ASP.NET sends a post-back to the server and the web server re-renders the page with the GridView re-sorted in the order requested. Now, there’s a way to display a table that can be sorted by any number of fields using only JavaScript. There’s no communication back and forth with the web-server wasting bandwidth and processing power on the web-server.

The JQuery library that allows this to happen is called Tablesorter. Tablesorter has a ton of very useful features, including having a very small code base, the ability to sort across multiple columns and is compatible with just about every web-browser that’s currently being used, even IE 6. It has sort parsers for a number of types of formats, including text, URIs, integers, currency, floats, IP addresses and dates, so whatever type of data you have in the table, chances are it will be able to intelligently sort it.

Here’s how to create a sortable table with TableSorter and JQuery

(1) Get the required libraries and reference them.

You’ll want to download the minfiied version of Tablesorter from the Tablesorter website. The slimmed-down version comes in at 12 KB. You can download that here. You’ll also want to get a copy of the latest version of JQuery which is available form the JQuery Website. Once you get those two files downloaded, you’ll want to add references to them in your page’s . They should look something like this depending on where you placed your files:

(2) Make an HTML Table

Here’s a demonstration table that the Tablesorter website provides for us to use. Simply add this to the body of your page:

 id="myTable">
>
>
    >Last Name
    >First Name
    >Email
    >Due
    >Web Site


>
>
    >Smith
    >John
    >jsmith@gmail.com
    >$50.00
    >http://www.jsmith.com

>
    >Bach
    >Frank
    >fbach@yahoo.com
    >$50.00
    >http://www.frank.com

>
    >Doe
    >Jason
    >jdoe@hotmail.com
    >$100.00
    >http://www.jdoe.com

>
    >Conway
    >Tim
    >tconway@earthlink.net
    >$50.00
    >http://www.timconway.com

(3) Sort Your Table

The only thing left to do to make our quick and dirty demo of the table sorter to work is to call the sorting library using the document.ready() function that’s frequently used with JQuery. That will look something like this:

(4) Further Development

The next logical step is to add some CSS formatting that will give the user a better idea of which sort direction they’re doing. You can see a demo of how to style the different sort directions on the Tablesorter website, which would be a must on any production site. You might also want to play around with doing multi-column sorts and with their widget system.

Click here to download my example code (24 KB).

How to Validate Forms with JQuery

Matthew Paulson — Wed, 03 Jun 2009 14:10:39 +0000

Just about everyone who’s ever made a web-application knows that you generally can’t trust your users to enter data correctly into a form. Some of them will ignore important fields, others will type in data that couldn’t possibly be right. Some will try to choose two character passwords and others will enter in a long string of text when all you wanted to do was get their age in the form of numbers.

A lot of these errors can be mitigated by using the right input controls. You want to use the right HTML input control for the right situation.. You certainly wouldn’t want to use a textbox to have someone enter in their gender and you definitely don’t want to use a drop down list to have someone enter their email address. Although using the right input controls for the right questions takes a long way in helping ensure that we get good data, that alone isn’t enough.

When it comes to textboxes, you’ll often want to make sure whatever they type in meets a specific format, such as a phone-number or an email address. You might also want to make surethey actually do type -something- in, or make sure that they type the same thing in two fields if you want to confirm that something’s accurate.

Microsoft does a pretty good job of making this happen in ASP.NET with their validation controls. More often than not, the validation controls will simply generate some javascript to perform the validation, but there’s also an option to have it validate at the server-side level. If you’d like to have a bit more control over your validators there’s some code in JQuery that we can use to make sure users what enter in good data.

The example code I’m going to demonstrate today is based off the JQuery Validate plugin.

Here’s How to Validate Text Boxes with JQuery

(1) Download and Reference JQuery and the JQuery Validation Library

You’ll need a copy of JQuery 1.2.6+ on your system, which can be downloaded from Google.You’ll also need a copy of the JQuery Validation library, available from bassistance.de. Once you get your two libraries download, you can extract the minified version of both of them into a folder, create a new HTML page and add your header references that should look something like this:

(2) Building your form

For this example, we’ll make a basic contact form that requires the person to enter their name, their email address and some comments. All of the fields will be required and we will also make sure that the user’s email address was entered in the correct format.

Here’s what the form will look like:

There are a few things to note about this form. First, that all of the inputs have been given a class of “required”. This is how the JQuery library will know whether or not to validate them. If you don’t want a field to be required, simply leave it out. You’ll also note on the “E-Mail Address” field, that it has a class of class=”required email”, this will let the function know that what the user enters in also has to be a valid email address.

(3) Calling the Validation Method

Finally, we need to invoke the validation method when the page loads. We can do this with the $(document).ready() function like this:

If you give you form a different ID, make sure that the ID of the form matches what you’re calling in your onLoad function.

(4) The Results

If all is well with your code, you should end up with something like this after clicking the submit button:

You can download my example code here. You can also download the full JQuery Validation Library with some more advanced examples.

JQuery Date Picker: One Step Torwards Making Forms That Work

Matthew Paulson — Thu, 28 May 2009 13:37:00 +0000

While attending Microsoft Mix earlier this spring, I stumbled upon a book called “Making Forms That Work“, which was written by Caroline Jarrett and Gerry Gaffney. The book focused on building web-forms that aren’t intimidating and that people will actually fill out. One of the focuses was making sure to use the right controls for the right question you have for your user. You certainly don’t want a drop down list of 1000 names to have the user pickout their name, and you definitely don’t want to give them a text-box to type in their gender.

On that same line of reasoning, it’s probably not a good idea to have users manually type in dates. Considering all of the formats possible for entering a date, say “5/28/2009″, “5/28/09″, “Thursday, May 28th, 2009″, “May 28 09″, etc, you would need quite the number of regular expressions to determine if what the user entered in actually was a date. One solution to this is to draw a small calendar on the page and have the user click which date they want, but those often take up a lot of screen real estate.

Instead, I usually recommend some sort of pop-up date picker. For ASP.NET, I’ll typically use the AJAX Control Toolkit Date Picker. For other situations, I”ll make use of Kevin Luck’s JQuery DatePicker. For more advanced date picking, you might also look into the JQuery Date Range Picker.

For today’s project, we’ll make a basic implementation of Luck’s JQuery Date Picker. Here’s how to get started:

(1) Download the libraries

For this project, we’re actually going to need a couple different libraries. We’ll need the JQuery library it self. You’ll also need the date methods extension for JQuery. After we have those two helper-libraries in place, we can download the JQuery Date Picker library it self and the associated CSS file.

(2) Create header references

Now that we’ve got all of the libraries, we need to add some references in the header that should (for the most part, depending on where you put the files) look like this:

(3) Create an input field for your datepicker

With the datepicker, you’ll actually click the textbox itself or an associated image, and that will load the javascript popup that lets you pick out a date, and then the date picker will fill the value you choose into that textbox. Add an input tag to your page. Make sure to give it a class of “date-pick”.

<input name="date1" id="date1" class="date-pick" />

(3) Call the date picker script

Somewhere in the header, we’ll need to call the date picker script so that it loads when the page does. That code should look like this:

(4) You’re done

At this point, you should have something that looks like this (after you click on the “Choose Date” text):

Right now, it’s pretty ugly. The neat little calendar icon won’t be there, but you can add that by modifying the css.You’ll probably also want to modify the color scheme to match the theme of your site. You can download my quick and dirty example code here (36 KB).

How to Crop Images in ASP.NET with “Web Crop Image Control”

Matthew Paulson — Fri, 22 May 2009 18:21:55 +0000

When researching various web-based imaging cropping tools, I’ve found that there are a lot of good looking JQuery, MooTools, and other JavaScript based solutions out there, but there’s not a ton of good server-side support. The one ASP.NET control I found that I really did like was “Asp.net 2.0 Web Crop Image Control“. It’s actually an ASP.NET wrapper around JQuery JCrop.

Here’s how to make a basic image cropper with the “Web Crop Image Control”:

(1) Download the source code from CodePlex.

(2) Create a new ASP.NET website in Visual Studio and add the included code from the sample website, including the DLL file it self from the “bin” directory, as well as the “scripts” directory and the “css” directory..

(3) Create a new ASP.NET Page and add in the following header reference to reference the crop control:

<%@ Register assembly=”CS.WebControls.WebCropImage” namespace=”CS.WebControls” tagprefix=”cc1″ %>

(4) Add an ASP.NET Image Control to the Page:

You can also set the vlaue of the image programmatically by setting the “ImageURL” property of your control.

(5) Add a Crop Button to your page and give it an event handler:

Your corresponding C# code would look like this:

    protected void btnCrop_Click(object sender, EventArgs e)
    {
        wci1.Crop(Server.MapPath(“~/images/filename.jpg”));
    }

(6) Add the Web Crop Image Control

                    CropImage=”Image1″
            IncludeJQuery=”true”
            ScriptPath=”scripts/”
            W=”50″
            H=”150″ CropButtonID=”btnCrop”
             />

Make sure that the “CropImage” property is set to the name of the ASP.NET Image Control you created and that the CropButtonID is set to the ID of the button you created. You can change the default height and width by setting the H and W properties.

If all is well with your code, you should be good to go. Here’s what the finished product will look like:

Make an AJAX-like Multiple File Uploader with Uploadify

Matthew Paulson — Wed, 20 May 2009 18:40:41 +0000

I’m currently working on an file manager that will be integrated with the content management system software that we developed. In doing this, I’ve been looking for a solution that would allow users to upload multiple files at once, does so in a very easy to use way and shows a progress bar. For this project, I don’t really need to interact with ASP.NET at all for a database, so I can look at some of the JavaScript & Flash solutions that are out there. The solution that I eventually settled on was Uploadify. The tool is actually a combination of Flash and JQuery. It’s very customizable in the functionality that it offers as well as the design of the system.

I was at first concerned because the solution only supports PHP, however members of the Uploadify development community have developed a replacement server-sidescript that will replace the “upload.php” file with a .NET version. You can find that code on their forums here.

Here’s what Uploadify looks like in action:

Implementing Uploadify

Getting Started:

So how do we implement Uploadify? It’s actually easier than many JQuery modules that are out there. The first thing you’ll need is the Uploadify Core that can be downloaded from the Uploadify website. You can also download code for several examples of implementations of code. The core it self comes with a PDF manual as well.

Script References:

You’ll need to reference the latest version of the JQuery Core was well as the Uploadify JavaScript file:

Making a Placeholder:

You’ll need a placeholder DIV that the script can use to draw the upload tool on the page somewhere in the tag:

Calling the Script:

Now, all we need to do is call the uploader when the page loads:

That’s all it really takes to implement Uploadify. You might want to modify some of the settings in it to customize the uploader to your needs, but it’s a really great solution.

Here are some common options that you can play with in the settings:

“CheckScript” and “Script” -> Be sure to change these if you are using the .NET solution
sizeLimit -> Limit the file size of the upload (in bytes)
Height & Width -> Change the dimensions of the container DIV
fileExt -> Limit the type of file extensions that you allow.
ButtonText & ButtonIMG -> Customize the look of the upload button
There’s a full list in the Uploadify Website

How to Create a JQuery File Browser with JQuery File Tree

Matthew Paulson — Tue, 19 May 2009 14:34:56 +0000

While looking at various tools that might aid in the development of an ASP.NET based file manager, I came across a JQuery based tool called jQuery File Tree. Typically we would think of a file browser for a web-server that would be something that’s almost uniquely server-side, but jQuery File Tree does a nice job at putting a front-end on what otherwise would be a plain-jane FTP or HTTP file directory.

You can view an online demo how it works here.

Here’s how to make your very own JQuery File Browser/Viewer with JQuery File Tree:

Getting Started:

First, you’ll need to download the latest version of JQuery File Browser. As of the time this article was written, the software is sitting at version 1.01 and can be downloaded here. You’ll also need a copy of JQuery it self (version 1.2+) and if you would like some of the smoother transitions, you’ll want a copy of the JQuery Easing Plugin.

Adding Script References:

After getting copies of all of the files you need, you’ll want to open up your favorite HTML editor and create a new page. We’ll need to add references to the three scripts we’re making use of (JQuery, JQuery Easing and JQuery File Tree). You’ll also want to add a reference to the stylesheet for the file browser. Your should end up looking something like this:

Adding a Place Holder:

The next thing we’ll need to do is put a DIV inside the tag and give it an ID to reference by JQuery later and a class for CSS styling purposes. It should look something like this:

Loading the File Browser:

Now that we have all of the “helper” components in place, we’ll need to call the function from the $(document).ready that is frequently used with JQuery.First, we’ll need to create our $(document).ready function which will sit in the

Now, inside of our $(document).ready function, we can call the JQuery File Tree function:

$('#JQueryFTD_Demo').fileTree({ root: '/windows/', script: 'jqueryFileTree.aspx', expandSpeed: 1000, collapseSpeed: 1000, multiFolder: true }, function(file) { alert(file); });

There are several things to be aware of about the code above that you’ll need to know to successfully implement it. First, You’ll want to make sure that the ID of the DIV in your JQuery function matches that of the one on on the page. You should also note that the script is very picky about what you put in for the root directory. Make sure that the path is relative to the root on your hard-drive, not relative to the file it self. For example, when running the script on my local machine, I used /windows/ to display the files in my windows directory. You can also change the speed that a folder expands by modifying the “expandSpeed” and “collapseSpeed” fields. Finally, if you want to be able to open only one file at a time, you’ll want to set “multiFolder” to false.

Another important aspect of the function is reference the appropriate server-side script. You’ll need this to generate the list of files on the web-server. I happened to use the ASP.NET version, but there are versions available for Java, Cold Fusion, PHP, Ruby, etc. All of them come with the standard JQueryFileTreePackage, just make sure to point it at the right file for language you’re using.

As the script is initially, using “alert(file);” will only display the name of the file in a popup. To make this useful, we’ll probably want to change that function out for one that will open the file it self. To do that, we could simply change “alert(file);” to “window.location = file;” You might have to write a function to parse the filename that it passes and make some adjustments so it redirects to the right file on the server, but it will work.

Styling the Browser

As we’re sitting right now, our file browser will fill up the entire page. I’m going to add some basic CSS to it to make it more manageable. To do this, simply add a CSS section in your header:

Completion:

At this point, the script should be working if all is well with your code and you should end up with something like this:

Feel free to download my example code (49.5 KB)

Using JQuery? Let Google Host It

Matthew Paulson — Sun, 17 May 2009 23:28:45 +0000

In the last decade, Google has given us a lot of amazing free services, and web developers haven’t been left out of the party. For a while now, Google has been hosting popular JavaScript libraries on their CDN (content delivery network) and letting any website make use of them for free. On face, you might not think that having Google host one JavaScript file for you would make any difference to you or your users at all.

The Benefits:

It turns out, there’s actually a number of good reasons to let Google host JQuery and other commonly used javascript libraries for you. The first is caching. If your users have been to another site that references JQuery from Google, they will already have it cached on their system and won’t need to download it again, meaning that your website will load faster then. You also benefit from the fact that Google’s CDN can probably serve content a lot faster than your webhost. Google can serve the JQuery script to your users from dozens of different servers around the web and send it from whichever server is closest to your user.

Finally, you benefit that since your users are downloading the JQuery library from Google, they’re not downloading it from you. Most people don’t ever hit their bandwidth limitations from their web hosts, but if you have a content heavy site, saving 30 KB worth of bandwidth per visitor can add up pretty quickly.

How to do it:

There are actually two different ways to reference JQuery, MooTools, Scriptaculous, Prototype and other libraries from Google. Google has a a JavaScript AJAX libraries API that you can use which will dynamically load your library of choice. This method is supposed to be faster than doing a direct reference, but some have reported that it can cause problems.

Here’s how to do it the way Google suggests:

Alternatively, you can do a good old fashioned script reference:

Building a Simple Image Rotator with JQuery

Matthew Paulson — Fri, 15 May 2009 03:21:17 +0000

I was recently working on a new website for an adult fellowship group at my church and one of the tasks I had was to create an image rotator that had various bible verses on it that would transition every few seconds. Since the site was Joomla-based, I initially searched for a free plugin that would do the trick. I did find one that would do the trick (Flash Rotator Module by JoomlaShack), but it was $19.95. I decided I would keep looking and find a free solution.

Eventually I stumbled upon JQuery Cycle. It’s a free JQuery tool that lets you do an image rotator with a lot of unique transitions. I opted for a basic “fade”, since that’s what the previous version of the site was using. There’s also shuffle, zoom, rotation, and scrolling effects. You can see the results of these efforts on http://www.sfcontext.com/

Here are the steps to recreate a basic image-slideshow using JQuery Cycle:

(1) Reference the JQuery Library and the JQuery Cycle Libraries in your .

(You’ll need the JQuery library as well as the JQuery Cycle library on your web-server, make sure to update your references)

(2) Make a DIV with your images in it where you want the rotator to appear on your page:

Feel free to use as many images as you want in this. You can also change the height and the width, but it’s probably a good idea that they all have the same height and width. You can also use “ALT” and “TITLE” tags since they’re plane-jane HTML image objects.

(3) Use a $document.ready() function to load the JQuery Cycle rotator effects

make sure that the class of the DIV lines up with the class being referenced in the $document.ready() function. You can also replace the “fade” fx with a number of other transitions and change the speed as you desire. The “5000″ represents 5000 miliseconds or 5 seconds.

Overall, I’m very impressed with JQuery Cycle as an image-rotator solution. The library it self is only 28KB when it’s compressed, and if you don’t include all of the transitions, you can shave a few kilobytes off that number.