Question

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/jquery-1.6.2.min.js"></script>
<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…

Answer 1

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.