Topic Archive: jQuery

Implementing linked multiselects with jQuery, LiveQuery, and Low Pro: Part 2: First pass at the actual code

Brian Dillard, Monday, August 25, 2008 @ 2:54 pm

In last week's post, I introduced the linked multiselect widget I was asked to implement on a tight deadline for an unexpected project assignment. I showed some demo code in action and discussed the user experience issues that shaped my requirements. This week, I'll walk through the actual code - or at least my first pass at it.

Like a lot of developers who should know better, I sometimes shirk the technical design phase on quick projects, then regret it later. The code I handed off for this project got the job done, but it wasn't very DRY or elegant. Luckily, I've continued to refine it into something I'm not ashamed to blog about. Next week, I'll show off the final, refactored code and try to draw some conclusions about the entire experience. But first - the original, unrefactored code:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Implementing linked multiselects with jQuery, LiveQuery, and Low Pro: Part 1: Requirements and interaction design

Brian Dillard, Monday, August 18, 2008 @ 6:10 pm

Last week I spent a couple of days lashing together a UI widget for a project that needed a little Ajax assistance. As always, I looked for an opportunity to learn something along the way, so I got signoff on using jQuery and some plugins I hadn't previously employed.

The result? A down-and-dirty mini-project that let me test drive Color Animations, jqModal and Low Pro for jQuery while employing tried-and-true solutions such as jQuery Templates and Live Query. What's more, the requirements for the widget itself left room for some careful consideration of user experience design.

In the end, I built a client-side demo in just a few days and handed it off to the project lead for integration with a complex back end. Now I'm free to refine my deadline-constrained code into something a little more OO and share the results.

This week, I'll talk about the project's complex usability requirements and Pathfinder's user-centered solution to those requirements. Next week, I'll walk you through our first pass at building custom code, roping in open-source libraries and making it all work together on a tight deadline. Finally, I'll walk you through the refactoring process so you can see the final, properly factored and reusable version.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Project Website Part 4: Drag and Drop in jQuery

Noel Rappin, Friday, July 25, 2008 @ 12:12 pm

Drag and drop is like those Nutty Bars snack things.

Allow me to explain.

I like Nutty Bars. But I never expect to like them. They are kind of funny looking, for one thing, what with that weird criss-cross pattern on the top, and the chocolate never quite covering the wafers. But when I get past that and actually eat one, it's actually kind of tasty.

Which brings me to drag and drop. Which I always expect is going to be an overwhelming pain in the neck (probably based on bad experiences using Java Swing). But whenever I manage to get over it and actually implement a web drag and drop, I'm always surprised at how easy it is using an Ajax framework.

jQuery is no exception.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax

Five jQuery plugins that are a joy to use

Brian Dillard, Tuesday, July 22, 2008 @ 3:15 pm

Yesterday I discussed how to separate the jQuery plugin wheat from the chaff. Today, I offer a completely subjective and biased list of jQuery plugins to know and love.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

jQuery plugins: Five tips for separating the good from the bad and the ugly

Brian Dillard, Monday, July 21, 2008 @ 4:41 pm

I opined recently that jQuery plugins can be more trouble than they're worth. That said, they're often indispensable. True, the worst plugins suffer from bloated code, confusing APIs and too many features. But the best provide instant black-box functionality with just a little configuration. The trick is figuring out which plugins are worth the effort and which ones aren't. Here are five tips for doing just that.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Project Website, Part Two: Simple jQuery With Rails

Noel Rappin, Monday, July 14, 2008 @ 11:33 pm

This is something of a mix between what I've been doing on the http://www.pathf.com/blog/tag/project-website/ posts with my more typical "here's how you do something in Rails" post. I'm going to describe how to use jQuery to manage JavaScript and Ajax in a Rails application rather than Prototype and Scriptaculous.

Conclusions, Up Front

The benefits of using jQuery on a Rails project seem to be:

• A lot of basic behavior can be specified with much less JavaScript then in Prototype/Scriptaculous, making it feasible for even somebody with my JavaScript skills to write complex behavior directly in JavaScript. I found myself doing things client-side in jQuery that I would have done with a separate Ajax call before.
• In particular, certain kinds of behavior are almost ridiculously easy -- especially the case where you want every element of a certain kind to have similar behavior. So for instance, if you were, say, maintaining an iPhone plugin and wanted all links of a certain kind to trigger Ajax calls and slide left like a native iPhone app would, jQuery would be a pretty easy way to get there.
• Creating a Web site that is functional without JavaScript is a much easier and cleaner process using jQuery.

There are a couple of costs, especially from a Rails application

• You lose some or all of the Rails helper methods for writing JavaScript. You can keep some of the helpers by using the jRails plugin, but using that plugin minimizes some of the gains of using jQuery.
• The biggest loss for me was assert_select_rjs and the lack of unit testing of jQuery behavior. As much as JavaScript development tools have improved, there are still gaps in testing browser-centric behavior.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (4)

agile ajax

“Ajax Overhaul, Part 3: Retrofit existing sites with jQuery, Ajax tabs, and photo carousels” Up on IBM Developerworks

Dietrich Kappe, Tuesday, July 8, 2008 @ 10:16 pm

Part 3 of my colleague Brian Dillard's series on retrofitting your web site with Ajax is now up on the IBM Developerworks site.

In this installment, you'll tame unmanageable product-details pages by placing content inside a tabbed interface. You'll also keep product images under control by displaying them in an image carousel. You'll learn how to employ both techniques using simple Dynamic HTML (DHTML) or more complex Ajax code. Either way, you'll again use the principle of progressive enhancement to keep your pages accessible even when JavaScript isn't enabled. To accomplish all this, you'll use two additional jQuery plug-ins: jCarousel for image slideshows and jQuery UI Tabs for tabs.

You'll also want to look at parts 1 and 2.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Writing reusable jQuery modules: Make everything a plugin

Brian Dillard, Monday, June 30, 2008 @ 5:42 pm

I recently asserted that open-source plugins are sometimes more trouble than they're worth. Nevertheless, I've found one unexpected benefit of jQuery's plugin mechanism: its ability to keep me focused on reusable components rather than one-off, procedural routines.

Because jQuery doesn't ship with any general-purpose way of simulating classical inheritance, it's easy to fall into the trap of writing procedural code with no eye toward re-use. When your first pass at solving a given problem often takes only a few lines of code, it seems like too much overhead to wrap those lines in any sort of object.

But then you decide to layer on some effects ... or there's a new requirement to retain state across sessions by calling on a cookies plugin ... or you end up with a new use case that would require a subclass of your existing code - if it had been written as a class in the first place. By this point it becomes obvious that your behavior layer is poorly organized, hard to maintain, and inexorably tied to a specific use case. That's when you roll up your shirtsleeves and start refactoring.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (5)

agile ajax

jQuery + Rails + Agile: PlantCollections database project now live

Brian Dillard, Tuesday, June 24, 2008 @ 5:48 pm

After just three weeks of frantic work, my team today released the first public version of PlantCollections, a joint venture of the Chicago Botanic Garden and 29 academic and corporate partners.

Our app serves as the consumer-facing front end for a Google Base collection of plant specimen data compiled by scientists and gardeners all over the world. This project represents my first experience with Ruby on Rails and Pathfinder's first experience progressively enhancing a Rails app with jQuery. Although this is still little more than a prototype, with lots of additional functionality to come, we're pleased that this first release is already out in the wild. Go, agile, go!

To learn more about PlantCollections and our involvement in the project, check out the press release. Otherwise, just head straight to the application itself.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

jQuery plugins: Who needs ‘em?

Brian Dillard, Wednesday, June 18, 2008 @ 5:03 pm

I've pimped a lot of jQuery plugins, both here and in my articles for IBM developerWorks. On each occasion, I've praised the plugin model for its ability to keep core libraries small while still offering a sanctioned way to share reusable components with the open-source community.

I'm not taking any of that back. But after a few weeks of rapidly iterating on user-interface features for a new client, I've come to a different conclusion: I'd rather spend time building my own custom UI component than wrangling my code to work with somebody else's plugin. When I write my own custom widgets and event handlers, I can accomplish the following:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (5)

agile ajax

jRails: Ruby on Rails with the Prototype guts ripped out

Brian Dillard, Wednesday, June 11, 2008 @ 3:21 pm

My esteemed colleague Noel Rappin sensibly advocates doing things the Rails way whenever possible. As a Rails noob, I should follow his advice. But as a dedicated user interface developer, I'm already finding that many of the best practices of my discipline take extra steps to enforce in Rails. Case in point: The ability to write unobtrusive JavaScript using my tool of choice, jQuery.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax

jQuery Release 1.2.6: Performance Improvements and Dimensions Plugin Added to Core

Dietrich Kappe, Tuesday, June 3, 2008 @ 11:55 am

A new release of jQuery is out -- 1.2.6, skipping directly from 1.2.3. Most noteworthy are the performance improvements (you can check out the detailed performance data via this Google Spreadsheet). The headlines on improvements:

• Event handling: 103%
• CSS selectors: 13%
• .offset: 21%
• .css: 25%

Lots of other fixes, but the most important, IMHO, is the inclusion of Brandon Aaron's Dimension's plugin -- cross browser support for find element dimensions, offsets and positioning -- in the jQuery core. Check out the release notes here.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

My IBM developerWorks series, part 2: Tooltips, lightboxes and more jQuery goodness

Brian Dillard, Monday, May 12, 2008 @ 10:37 am

IBM developerWorks recently published my second "Ajax overhaul" tutorial. This series teaches intermediate-level developers how to layer Ajax features atop old-fashioned CRUD applications. My colleague Dietrich Kappe calls this the "Christmas tree" approach to Ajax development, and it's a valid choice for many companies. It's not the sexiest take on Ajax, but it often provides a lot of value for relatively little cost.

"Ajax overhaul" tackles a fictional shopping site for its use cases. Each installment examines a particular deficiency in the existing application's user experience and improves it using Ajax and progressive enhancement. Because I focus on the interface layer, the code examples feature only client-side code. I've completed four installments so far, each one employing some combination of jQuery, custom JavaScript and custom CSS.

I previously posted about the first installment. Here's the direct link to the second:

• Ajax overhaul, Part 2: Retrofit existing sites with jQuery, Ajax, tooltips, and lightboxes

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

jQuery fade-in spoiler revealer: The failsafe, progressively enhanced version

Brian Dillard, Wednesday, April 16, 2008 @ 3:58 pm

***Spoiler Alert***

Don't read too much further if you haven't seen "Citizen Kane" and want to be surprised when you do.

I'm a big SF nerd and lover of teen-angst dramas. (That's why "Buffy the Vampire Slayer" is the Best Show Ever.) I love spoilers, but only when I've asked for them. When watching the entire run of "Dawson's Creek" on DVD years after it aired (don't ask), I accidentally spoiled Matt Laffey, the buddy who'd turned me on to the series, on how the big romantic triangle ended up in the final episode. I had no clue he had been saving Season 5 for a rainy day.

Since then, I have endeavored to include a ***SPOILERS*** alert in the subject line of any surprise-detroying emails - and to make liberal use of the return key to make sure the contents of such messages are below the fold in email clients with preview panes. This has made me a much more responsible citizen of fandom - though it hasn't lessened my outrage when entertainment websites post spoilers in their headlines or intro paragraphs without warning me and my fellow geeks. (Sci fi blog io9, by the way, is pictured to illustrate the right way to do things.)

Hats off, then, to Chris Coyier of tutorial site CSS-Tricks for his recent post on using jQuery to create a Fade-in Spoiler Revealer for use on websites. My only reservation about Coyier's technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn't we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (5)

agile ajax

Alternate approaches to IE6 and transparent PNGs

Brian Dillard, Monday, April 14, 2008 @ 2:01 pm

Who knew IE6 and transparent PNGs could inspire so much discussion?

When you're churning out tips and tricks on a regular basis, you quickly learn to state things like this:

"I had Problem X, and my solution was Y given constraints Z."

... instead of this:

"The only way to solve Problem X is Y."

I was reminded of this lesson last week, after I posted a series of beginner-level tutorials about overcoming some of IE6's shortcomings with jQuery. My two-part piece on transparent PNG support got picked up by the kind folks at Ajaxian, and boy did the comments come. Between the two sites, we've heard from 20 people so far. A few were from the usual cranky haters. (Thanks to whoever felt the need to write, "Is this year 2001? IE6 png transparency? News on Ajaxian? Good heavens..." instead of just moving on to the next post.) But the rest provided lively debate and some valuable alternative approaches to the problem.

For review, here are the posts (with comments):

• Part 1
• Part 2
• Ajaxian cross-post

And here are some of the various approaches suggested:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax