I haven’t really used any version of Rails before 3.1 – so I am not intimately familiar with the ‘way it used to be’. From what I understand, all of the js, css and images associated with a library like jQuery Mobile would have been included under /public. The problem with this is that /public then become stuffed full of a mixed bag of files with little organisation.

So enter Rails 3.1 and the asset pipeline and my adventures with jQuery Mobile. Following the guide here (http://ryanbigg.com/guides/asset_pipeline.html) I placed the jQuery css and js files under /vendor/assets/stylesheets and /vendor/assets/javascripts respectively. This worked well. These files could be loaded directly via include tags such as: <%= javascript_include_tag “jquerymobile.js” %>

Using this approach however the images used by jQuery Mobile had to be placed under /public/assets/images in order to be found. This worked – but made no sense to me… to have the js and css under /vendor and the images under /public. So I went searching for a better way.

The first clue was when I found this site (http://getsprockets.org/installation_and_usage). This actually shouldn’t have been that remarkable – except that it didn’t seem to be referenced from any of the Rails docs on the Asset Pipeline that I could find. The ‘provide’ directive is the one that is useful here.

So I returned to look at jQuery Mobile and discovered that all of the images or loaded by the css. So alongside my jquery-mobile.css in /vendor/assets/stylesheets I placed a ‘vendor.css’ that was a manifest file that included:

 *= require “jquery-mobile”

 *= provide “..”

(Forgive the lack of proper syntax highlighting…. that is a job for another day 😉

The images for jquery mobile were placed in /vendor/assets/images as you would expect. And I this point I was sure I had it licked. But I consistently got 404’s for any attempt to access the images. I tried all sorts of variations of the path for the provide directive with no success. Then finally I came across this post (http://stackoverflow.com/questions/6213218/rails-3-1-and-image-assets) which mentioned that the ‘/images’ portion of the url was being stripped. However ‘/images’ was coded throughout the jQuery Mobile css. So I added another ‘images’ subdirectory (/vendor/assets/images/images) and put the jQuery Mobile images there and viola – success.

The repeated images directory is a bit ugly – but much less ugly than having js and css in /vendor and the images in /public – so that counts as a win.

Given that I am a total n00b in this – I am sure that there is “a better way” – but at least this is working.

Many of us can think of many reasons for starting a blog, but never actually get around to it. And then one small thing comes along and pushes you over the edge to start. In this case it is my current pet project…… I am putting together a web site. Big deal!! So to keep things interesting I am using the latest cutting edge Ruby on Rails (3.1.0rc4 at this point) (www.rubyonrails.org) and the shiny new jQuery Mobile (Beta2pre at this point) (www.jquerymobile.com).

Since I am using such ‘new’ tools, I am running into a myriad of little issues – some of which I am not able to find great answers for online. Hence the blog. It will give me a place to post the stuff that I am finding along the way that is useful to me (it isn’t much harder than putting it in a text file which is the other option) and maybe it might be useful to someone else to.

Over time – who knows what else will get added (if anything)…