Take the 2-minute tour ×

I'm integrating my Rails 3.1 app with jQuery mobile (Beta 2, at the moment), and I'm uncertain how to organize my JS & CSS.

I have this in my application.mobile.erb's head tag (copied right from http://jquerymobile.com/download/):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

Should I put my stylesheet_link_tag for 'application' right above this so my CSS styles don't override jQuery mobile's fancy CSS? What about the javascript_include_tag for 'application'?

Or maybe all of this should be entirely separate?

I'm just unsure how to organize all of this / if there is a conventional way to do this. Input appreciated.

(Please ask for more details if you need any.)

EDIT: *I'm also wondering where to put my mobile-specific JS and CSS...

share|improve this question

3 Answers 3

up vote 6 down vote accepted

There is now a jQuery Mobile Ruby gem that will make the jQuery Mobile files available to you in the assets pipeline.

Installation is easy. Simply add the gem to your apps Gemfile

gem "jquery-mobile-rails"

and run bundle install. Then, you can add

//= require jquery.mobile

to your application.js or wherever else you want to include the files.

share|improve this answer
This gem is similar and may also be of use. github.com/dbloete/jquery_mobile-rails –  Pygmalion Sep 19 '11 at 15:26
Thanks - I'll be sure to try this out when I get the chance. –  dmonopoly Sep 20 '11 at 1:53
The link is no longer vaild. –  Meier Mar 27 '13 at 14:47
Try this: github.com/tscolari/jquery-mobile-rails –  Pygmalion Mar 27 '13 at 18:05

Just like you, I was quite confused to figure out how to use jQuery Mobile (now final 1.0) with Rails 3.1's new asset pipeline.

First, drop jquery.mobile.js and jquery.mobile.css into assets/javascripts and assets/stylesheets respectively.

Second, insert "require jquery.mobile" into your application.js manifest

//= require jquery
//= require jquery_ujs
//= require jquery.mobile

And the same to your application.css manifest:

*= require_self
*= require_tree .
*= require jquery.mobile

Third, put "application.js" and "application.css" into the layout, application.html.erb

<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag    "application" %>
<%= csrf_meta_tags %>

Fourth, don't forget to add 'meta name~~~' line to make it work properly.

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

Also use the jQuery mobile properties properly, like 'data-role=”page”' in the page. Others recommend to use gems like 'jquery-mobile-rails' or similar but I wouldn't.

share|improve this answer
This is straightforward and much less mysterious than using the jquery-mobile-rails gem. Thank you. –  fearless_fool Sep 7 '12 at 18:55

It's really your decision on what you want to have precedence. Some things may have to have precedence over others just based on the order you call things (if a function is being called in file2, make sure file1 that defines that function is included before it).

In terms of how to work this in with asset_pipeline, you either download the assets yourself and bundle them in application.css/application.js or you keep it in <head> in the order that works for you.

share|improve this answer

Your Answer


