I’ve got another real world example of how to use jQuery to enhance your website. A friend emailed me this morning wondering if it was possible to insert text using the click event or drag n’ drop into a textarea. jQuery and jQuery UI to the rescue! Review the screenshots below or just go check out the demo page.
See also: Selecting items with Drag n’ Drop
Two new jQuery plugin caught my eye recently and I wanted to take a moment to share.
The jQuery Database plugin takes your HTML tables and allows you to write a query against them similar to MS- or mySQL. I haven’t had a chance to play with this yet, but I can see some potential benefits of bringing some data client side and not having to make a round trip back to the server. Very neat concept.
The jQuery LinkSelect plugin tries to make working in small areas with <select> elements easier. I tried it in FF3, IE6, IE7, and Chrome without any errors. I’m going to take a look around a few of my apps today to see where I could fit it in.
WordPress has some new features too…
The latest version of the Akismet plugin for WordPress added an Akismet Stats features to my WordPress dashboards. I’ve always wondered how much spam I’ve been getting over time and this new feature lays it out for me in pretty graphs. It’s almost disheartening to think about what my site would look like with Akismet installed.
jQuery continues to be a VIP in my development world. I’ve covered some must have jQuery plugins before and they are all still going strong. Three new plugins have been released recently and I think they will each bring an important GUI element to your web application.
[From the site]
We’d always wanted to have a javascript-based control that we could easily apply to long lists of items to allow quickly navigating around the list. Since most lists are alphabetically sorted, we came up with a plugin that allowed us to have a long list and then, by binding the list to our jQuery listnav plugin, an alphabet-based navigation bar would magically appear above the list, showing all of the letters from A to Z. Clicking on a letter dynamically filters the list, so you can, for example, click on C and the list changes on-the-fly to show you only items beginning with C.
[My impression]
It is fast and I can’t believe it took so long for someone to do this. It is very natural and easy to use.
ContextMenu
[From the site]
This is a jQuery plugin to create context (right-click) menus. The primary use for this is for web applications rather than the general web.
[My impression]
I’ve tried a couple of context menus in the past, but this one is the most flexible in usage and design.
[From the site]
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
[My impression]
Very smooth and easy to use. One of the better image cropping plugins.
/etc/
Rick Strahl over at West Wind has written up a great introduction to jQuery. Rick got into jQuery with ASP.NET early and it is paying off. If you follow jQuery closely, you probably heard that Nokia and Microsoft are both adopting jQuery as their javascript framework. That kind of mainstream acceptance is great for jQuery and kudos to the jQuery team.
So, FF 3.0.1 was seriously pissing me off today. I’ll spare details as not very many people are VFP developers but it came down to something fairly simple.
When a request comes into my web app, I check the CONTENT_TYPE header. Most browsers send this…
application/x-www-form-urlencoded
Firefox 3.0.1 is sending…
application/x-www-form-urlencoded; charset=utf-8
…which completely threw my program off when using FF3, while IE6/7, Opera, and Safari were working just fine. The program is using jQuery, the form plugin, etc so the problem could have been anywhere.
I finally broke down and asked for help. Rick was nice enough to point out the flaws in my logic and get me back on track.
2.5 hours of pulling my hair out. Grrr!
I helped another developer today that had a jQuery question. He wanted the user to be able to ‘check’ a series of HTML check boxes that would then show the total value for each of the checked items.
I whipped something up really quick, and tried it in Firefox 2. Worked great. Then I tried it in Internet Explorer 6/7. Ugh, only calculates once the checkbox loses focus. I then changed the event binding in jQuery from change to click. Now it works just fine cross browser in IE6/7, Opera 9.5, Safari 3, and FF2/3.
Here is the code:
If you would like to see it in action, check out the demo.