Category: Documents

Tip for opening jQuery thickbox programmatically

by Jack K

jQuery Thickbox has been around for a while and we've used it in a bunch of projects and every time I decide I want to open a thickbox programmatically, instead of via the usual binding method, I have to fish for how to do it. The last time I went fishing, I found this and decided to post about it, thinking, "hey, if I post about it, I might actually remember where to find it next time I go fishing". OK, yeah, I'll probably still have to google for it, but anyway, here's the link:

http://blog.gridworlds.com/js/working-with-thickbox

Look down the page for "Calling Thickbox via JavaScript". Bingo.

jQuery Validation plugin enhanced credit card validation extension

by Jack K

Today my company, iHwy, released an enhanced credit card validation extension for the jQuery Validation plugin. The extension provides a way for a developer to pass in the type of credit card being used (Amex, Visa, Mastercard and a bunch of others) so that the validation extension can check the numbers prefixing the credit card number and verify that the length of the card number is correct. It also does the mod-10 validation that the core creditcard validation routine does.

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

That page shows some examples of card numbers that incorrectly pass the core creditcard validation routine, but do not pass when the extension is used. This extension should make it pretty easy for you to tighten up your credit card validation. The sample code we've provided shows a way to bind your credit card type dropdown selection to the validation extension.

jQuery Spy - streaming updates

by Jack K

OK, here's something I've always thought was cool and am seeking a project to use it on:

http://leftlogic.com/lounge/articles/jquery_spy2/

Basically, it shows a set of self-updating data with "older" items fading out of view as time goes by. Not sure what I mean? Check out one of the examples:

http://leftlogic.com/jquery/spy.html

Recently FriendFeed deployed something like this. Here's Robert Scobles, usually pretty active:

http://friendfeed.com/scobleizer/friends/realtime

No fade-out there, but you get the idea. And hey, they use jQuery, too!


Visual jQuery 1.2.6 - yay!

by Jack K

I used to use this all the time back in the jQuery 1.1 days.... then it kinda languished, but now it's back (thanks Remy and Yehuda!). This is a really nice looking, easy to drill into document for jQuery functions:

http://www.visualjquery.com/

If you're drilling down to find what you need, it helps if you know where to look, but if you're not, there's a very fast "filter" at the top that can help. I'd venture to guess it stemmed from this:

http://remysharp.com/jquery-api/

which I remember digging a few months ago. Here's the blog entry for that. It's got an Adobe AIR version, too:

http://remysharp.com/2008/07/04/jquery-api-update-offline-and-anywhere/

Handy stuff. Thanks guys!

jquery ActsAsTreeTable plugin: turn a table into a tree

by Jack K

This jQuery plugin lets you turn a table of data into an expandable/collapsible tree, allowing you to have a tree that has multiple columns of data:

http://ludo.cubicphuse.nl/jquery-plugins/acts_as_tree_table/doc/index.html

The examples show a typical use case scenario for something like a file browser. We're using it for an expand/collapse tree for an ajax-oriented product editor, where the tree table shows a hierarchy of products and categories and the user expands the tree to get to the levels/products that they want to work with.

By using a multi-column tree, the user gets a nice little subset of info for each product (SKU, amount available, etc) to help them decide whether to click on it and go into full edit mode (in another div on the screen) for the product.

Getting the CSS right is a little quirky: the expand/collapse icons keep wanting to appear outside the table, but we'll figure it out. There's a table row id/class naming convention that has to be adhered to so that the data knows parent/child relationships, which makes sense.

UPDATE 11/24: There's a new version of this plugin available:

http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0. This version adds options for drag and drop and gives the plugin a new name: jQuery treeTable 2.0.

1 2 >>