Thursday, November 22, 2012

JQuery and Rails3 Autocomplete

I wanted to do a project with Ruby and Rails and needed some fields to autocomplete. I did a search and found some information, but things didn't seem to work when I followed the instructions.

In the process of debugging, I found some things that are worthwhile, so I want to save them here. For me to remember and possibly for others to save time.

The simplest way to get going with the JQuery based autocomplete on Rails3 is through the use of this tutorial.

The tutorial and sample code is based on Rails 3.0, and I was using 3.2.9 or 3.2.8 on my machines. So I felt brave and updated the Rails version in the project Gemfile to match my installation. ... and things got interesting. Here are some fun facts and steps.
  • Your Rails version by default won't be 3.0.0. More recent installations are 3.2.9.
  • If you install with the more recent version of Rails, the likelihood is that you will get the rails3-jquery-autocomplete gem version 1.0.10. The tutorial asks you to run the following command and that will cause this gem to be installed.
    bundle install
    The reason you are getting 1.0.10 or a higher version is because the tutorial content does not specify a version, and the most recent one is pushed down. However, the tutorial and sample app uses 0.6.0 and that is a problem. So if you are following the tutorial, make sure you make that line read:
  • gem 'rails', '3.0.0'
    gem 'rails3-jquery-autocomplete', '0.6.0'
    gem 'nifty-generators'

  • The tutorial uses a command "rails g autocomplete:install" to generate autocomplete.js file. From what I have read on the blogs and other q&a on StackOverflow, most people seem to think that this is a default Rails functionality or a function of using the autocomplete gem. It is not.
    This won't work if you skip the addition of nifty-generators above. So don't be like me and don't try to cut corners on things you don't know, at least not yet. 

  • It is likely that the JQuery library you are using will be 1.8.2 or later, not 1.4.2, and the JQuery UI will be 1.9.1 or later, not 1.8.4. That is OK. There is no change in the use of these. Make sure however, that your application.html.erb file has the right versions associated with these links and includes. Another to keep in mind here is that the library that you download from JQueryUI site is not going to contain the minimized version of the jquery library. It will have the full version. So make sure your application.html.erb file reflects that. My working version looks like this for <head> element.
      <head>
        <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
    
        <%= javascript_include_tag 'jquery-1.8.2.js', 'jquery-ui-1.9.1.custom.min.js', 'autocomplete-rails.js', 'rails.js'  %>    
        <%= javascript_include_tag 'application' %>
        
        <%= stylesheet_link_tag "application" %>
        <%= stylesheet_link_tag 'jquery-ui-1.9.1.custom.css' %>
    
        <%= csrf_meta_tag %>
        <%= yield(:head) %>
      </head>

  • The most important trick comes in the show.html.erb. The tutorial asks that you have code that looks like:
    <h1>Welcome!</h1>
    <%= form_tag do %>
      <%=text_field_tag 'name', '', :autocomplete => welcome_autocomplete_brand_name_path %>
    <% end %>
    That is all good, if you are using the right version of the gem for the tutorial,  0.6.0. However, I found out that 1.0.10 version of this gem does not work with this code and instead it requires the autocomplete_field_tag instead.
    <h1>Welcome!</h1>
    <%= form_tag do %>
      <%=autocomplete_field_tag 'name', '', welcome_autocomplete_brand_name_path %>
    <% end %>
    0.6.0 supports both text_field_tag and autocomplete_field_tag, while the 1.0.10 supports only the latter. Please note the minor format difference in how the two are pointing to the path.
  • If you have changed your gemfile after you ran bundle install command, make sure you run
    bundle update
    This will make sure you have the right and updated gem files.

  • If you are running with a recent Rails version, you will find that a directory named app/assets exists, and is ready to receive your javascript and CSS files after you downloaded them from JQueryUI web site. Use this directory instead of public/javascript and public/stylesheets directories. You won't be able to get things working unless you do this. You will see script file loading errors in the console.

  • Since the recent Rails has automatic inclusion of script and CSS files from the current directories, you don't have to make any changes to your application.js file. I include it in case you have other things included in there, you can see that in the <head> content I listed above.
That's it. This should get the demo to work and allow you to play a little. Have fun !

1 comment:

  1. Thank you very very much. I've lost ours to solve this out

    I was running rails 3.2 and putting , '0.6.0' did the trick!

    Kardeş senden allah razı olsun:)

    ReplyDelete