Rails and jQuery: How to Integrate jQuery UI into Your Rails App

Ahhhh….jQuery UI.

Lucious.

It’s the quickest way to get your app looking slick in no time. It’s also highly flexible. jQuery UI’s themeroller feature allows you to tweak your css settings (and the look of your jQuery ui elements) right in a web browser (Wow! We must be living in the 21st century!)

Anyway, you can then preview your ui elements and tweak to your heart’s delight. When you’re finally happy with the look, you can then download your theme with all the css and js code rolled up in a nice .zip file.

It sure is handy and a lot faster than combing through all that css in Textmate.

So, in this post, you’re going to learn how to integrate jQuery ui into your Ruby on Rails application. It can be a bit tricky at first, since the instructions you get with jQuery ui are not Rails-specific.

So listen up! Grab a Redbull or throw a couple stiff espressos down your gullet, sit back and hark unto me, your faithful Rails Developer, as I take you by your soft little developer hand and teach you everything you need to know to get your Rails app” jQuery-ui-ified”.

Step 1: Download jQuery

I assume you have jQuery installed already. If not, it’s your first step. Obviously. Here’s how to get it into your app.

Head over to jQuery. Right on the homepage is a link to the downloads. I recommend the latest minified version of jQuery, unless you plan to mess with its innards.

Next, create a blank file in your public/javascripts folder. Name it “jquery-1.4.2.min.js” (or whatever version you’re using). Paste the code you downloaded from jQuery into that file.

Once that’s done, link to it from your application layout file (or whatever layout you’re using).

One word of warning: order is critical. You must list jQuery before any other links in your javascript_include_tag, such as ‘application’.

If you don’t, any plugins that depend on jQuery won’t work. The you’ll end up Googling until dawn. We don’t want that to happen. So once you have that step covered, you…

Step 2: Pick a Theme from JQuery UI

Grab a theme you like from the jQuery themeroller page. Click on the “Gallery tab” to preview different themes. I’m going to grab a really ugly theme for the purposes of this post. It’s called “blackness”.

Now it’s your turn. Find a theme you like, then click the orange “download theme” button. You’ll be taken to a page where you can choose which elements to included with your download: draggables, buttons, date pickers, accordians…selectables…sliders… tabs… progressbars…effects…and all sorts of other ui gooey goodness. Your download will be a tightly-rolled .zip file. It’ll look something like this…

Sexy.

Inside, you’ll find the following files:

Let’s open the js file first:

Inside, you’ll find jQuery itself (which we’ve already covered in Step 1) and the custom jQuery js file. Simply drag that file into your public/javascripts folder like so:

Hey wait a second. Are you still with me? You gotta pay attention here: Grab another Red Bull. I’ll wait.

You all set? Good. Back to brain expansion.

Next, reference this file in your application layout file: after your jquery link. (I’m leaving file extensions on the files we included to set them apart from other css and js files).

Step 3: CSS

O.K., now it’s time to get the CSS into your app. Open the CSS folder that was inside that zip. It contains another folder named for your custom theme. In my case, it’s named “ui-darkness”.

Inside of that you’ll find an images folder as well as the custom css file. Stick the custom css file (“jquery-ui-1.8.2.custom.css”) into your good ‘ole public/stylesheets folder.

Now reference that file in your application layout:

Next up: the images folder. This is where a lot of people get tripped up: they assume they should put everything from the images folder (fades, animations, gradients, etc.) right into their public/images folder. Nope. Instead, you need to stick the images folder inside of your css folder so jQuery ui can find them. Like so:

Smooth.

Step 4: HTML

O.K. We’re almost done. Here’s the last step: creating the html that interacts with our jQuery js and css. jQuery UI makes this part brain-dead simple. .

Here is the basic structure:

Can’t get much simpler than that. Of course, you’ll probably want to load up the content area with partials. Like so:

O.K., now we need make this HTML come alive with jQuery UI magic. Here’s how simple this is: just put the following code into your application.js file (inside public/javascripts).

Done. Now let’s refresh our view and see what our page looks like now…

Nice! Our skeletal HTML is now styled and the jQuery tabs look great (at least if you’re in a Halloween mood).

But the point is, they work. Which is a lot more than you could say before you read this post.

Wait a second. I just noticed something. After you click and activate the tab in Firefox, a weird dotted border appears. Like this:

or this:

This happens a lot in WordPress themes you purchase, too. How do you get rid of that?

Never fear. Chris, your crafty coder, has a simple little trick to rescue you from css glitch land. Follow closely:

Open up your custom css file (“jquery-ui-1.8.2.custom.css”). Find the selector that reads…

.ui-tabs .ui-tabs-nav li a

Now add the following code:

outline: 0;

BAM! Now our tab looks normal in Firefox after clicking it. No more dashed borders.

Thank God.

Cause I didn’t want you to get this far and be stuck with a bunch of crappy outlines around your beautiful jQuery tabs. You know why not? Cause I’m a nice guy.

And YOU are a more empowered programmer. A geek to take on the world. A coder on a crusade. Now get some sleep. It’s way past your bedtime. See you next post.

Peace.

14 FEEDBACKS

  1. SergioMonsalve says:

    Hey tnx, it took me 18 hours to get that working just becouse the order of the javascript files was not “correct”

    well tnx really, i look over for this too much and this was the only page that i found that really explained it well.

    and your writing style… ehmmm… lets say that i didn’t fall asleep.

  2. Hi Chris
    Thanks for this article.
    unfortunately after that many redbulls I just wasn’t able to go to sleep as suggested.
    Cheers
    Alexis

  3. Chris Whamond says:

    LOL – Glad it helped.

  4. Giorgio Previtera says:

    Great! Worked in 5 (five!) minutes, now all seems so professional!

  5. Sanjay says:

    Thanks for the walkthrough!

  6. Jos says:

    Wow, a year later and still a success (and still in the 21st century).

    Thanks for the clear guide!

  7. Boris says:

    Thank you so much! :)

  8. Biju says:

    Thank you so much for a clear n good explanation. :)

  9. Matt says:

    Great tutorial! Very succinct, informative, well written!
    Thanks!

  10. Jo Liss says:

    Shameless plug: I just wrote a jquery-ui-rails gem that packages jQuery UI for the Rails 3.1/3.2 asset pipeline:
    http://www.solitr.com/blog/2012/02/jquery-ui-rails-gem-for-the-asset-pipeline/
    https://github.com/joliss/jquery-ui-rails

    It only comes with the base theme (Smoothness) so far though. I’m thinking this might change once the jQuery UI build system is updated (in 1.8.19 perhaps), but for now if you want other themes, you still have to go the download route.

  11. Mac von der Heide says:

    bad ass motherfucker

  12. Kenny says:

    5AM now… way past my bedtime? :)

  13. David West says:

    On github, there’s a dev who made a great rails gem for jquery theming:

    https://github.com/fatdude/jquery-ui-themes-rails

  14. AJ says:

    Thanks for the awesome article!

    NOTE for Rails 3.2.5 users. I had to place the jQuery files in a different directory in order for it to work.

    The javascripts and stylesheets directories are located here:
    app/assets/stylesheets
    app/assets/javascripts

    instead of:
    public/javascripts
    public/javascripts

    Thanks again!!!

LEAVE A COMMENT