jQuery Mobile, Rails, Buttons and Headaches
So I wanted to add a button to my Rails 3.1 / jQuery Mobile app that triggered an AJAX action (HTTP POST). It should have been easy…
Firstly, I tried <button_to>… however this creates a form. The problem I had was that jQuery Mobile was triggering on POST and one GET for each click. In theory you can add ‘data-ajax=false’ to tell jQuery Mobile to leave this alone – however there is no way in the button_to helper to add attributes to the <form> tag (they all get added to the child <input> tag.
So I changed the ‘button_to’ to a ‘link_to’ (with :method => :post) and things seemed to go swimmingly at first.
However a little down the track I wanted to be able to disable/enable this button. in jQuery Mobile I could easily do this by calling $(‘…’).button() followed by $(‘…’).button(‘disable’) – however I ran into two problems. Firstly there was no easy way to have the button disabled on initial page load (I could run that but of JS on page load – but I really just wanted to add “disabled” to the button element.) Secondly, since link_to still included the underlying link after jQuery Mobile had styled it to look like a button – calling ‘disable’ made it look disabled but really didn’t disable it at all.
A simple button was causing me a lot of headache. It seemed that the ‘right’ element to use here was in fact a ‘button’ (since it was semantically correct and it had the correct ‘disable’ functionality). The problem became how to add ‘data-ajax=false’ to the form generated by the button_to helper.
My current workaround is simply to create the form directly each time I want a button. It looks something like this:
<%= form_for @event, :url => :undo_event, :remote => true, :method => :post, :html => { :class => “button_to”, “data-ajax” => “false” } do |f| %>
<%= f.submit “Undo?”, :class => “undo-button”, :disabled => true, “data-icon” => “back”, “data-iconpos” => “top” %>
<% end %>
I guess the other approach would be to make a helper that looked like ‘button_to’ except that it allowed options to be passed to the parent form.
Rails 3.1, jQuery Mobile and the Asset Pipeline
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.
Adventures with Rails 3.1 and jQuery Mobile
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)…
First post
Well this is it. My first blog post. I have thought on and off for years that I “should” do a blog… but when to find the time?? Would I keep it up?? What to write about?? I looked at Blogger and WordPress… but all the posts seemed so ‘big’ that it was daunting to start. Tumblr however seems to encourage smaller, shorter posts. Maybe that I can do. So tonight, between packing away the dinner dishes and giving the kids a bath is my first blog post.
What will the blog be about? Well only one way to find out….
seanedmiston 
Recent Comments