live.XperiMENTAL: November 2012

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 !

I have been postponing posting code here since I wanted it to be formatted properly and did not have a chance to play with syntax highlighting. There is a nice library that contains css styles and formatting scripts, named just that; here is the site.

To get the highlighter to work, you need to add some script and styles to your blog template. There are nice folks out there who did this work already, you can find one here.

This particular guide and many others tell you to embed the links into the page along with a script tag that enforces the highlighting when the page is loaded. Here is the suggested script snippet that is used in addition to links to CSS and Javascript files.

<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Unfortunately for dynamic view templates like this one on Blogger, it does not work. There is a workaround though, that is to call the highlighter when the page is loaded. The code below highlights anything that has the right class attribute for SyntaxHighlighter library, independent of the name attribute. Which makes it nicer when you have multiple code snippets on a page.

<script type="text/javascript">
  // code snippet is loaded here, highlight everything.
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.highlight();
</script>

You don't even have to add this to your template. Just make sure you add it to the bottom of your post using the HTML view on Blogger (not the Compose view). As you can see here, it works. It took me some time to discover that the dynamic views are rendered differently. Most instructions before that were irrelevant. Hope you stumble into this note faster than it took me to find this information.

live.XperiMENTAL

Thursday, November 22, 2012

JQuery and Rails3 Autocomplete

Wednesday, November 21, 2012

Using SyntaxHighlighter in Blogger

About Me

Blog Archive