Ruby on Rails Notes » views

Javascript in Haml

Melvin Ram — Thu, 07 May 2009 00:43:20 +0000

One thing that is not obvious with HAML is how to add javascript. In the past, haml didn’t really like javascript that much but the latest version of haml on github makes it very simple. It’s done using the :javascript filter. Here’s an example:

:javascript
  jQuery(function(){
    tog("#forgot_password_clicker", "#login_form");
    tog("#forgot_password_clicker", "#forgot_form", forgot_text);
  });

You can also mix in ruby variables by using the standard way of interpolating ruby with strings through: #{ }. Here’s an example of how it all works in a full page with a ruby variable mixed in:

!!! XML
!!!
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
  %head
    %meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}

  %body
    - @some_ruby_variable = "something goes here."
    :javascript
      #{@some_ruby_variable}
      jQuery(function(){
        tog("#forgot_password_clicker", "#login_form");
        tog("#forgot_password_clicker", "#forgot_form", forgot_text);
      });

This makes this HTML:

Response to "Thoughts on Haml"

Melvin Ram — Sat, 02 May 2009 01:32:53 +0000

James Britt wrote up a blog post talking about his experience with HAML, the alternative to ERB. His basic position (from what I gathered) was that it’s for noobies and that no one has explained to him why or how HAML makes real world code better… either than saying “wait, it’ll start looking beautiful soon enough and you won’t go back.” This is my detailed, somewhat-reasoned response.

I like HAML because it’s clean and easy to read. Cleaner & easier to read than ERb… and yes, I’ll back that up with code:

http://pastie.org/private/n8ipfrkxlremo4jwtxiww

Converting the ERB file to HAML took less than 4 minutes, mostly hitting the delete key.

A 39 line code becomes 31 lines… and that’s not even the big win. Now if you don’t think the HAML code chuck is visually easier to digest than the ERB version, that’s fine. Stay with ERB.

I find HAML code is easier to maintain & write… and it has nothing to do with a lack of knowledge of html or anything else.

How is it easier to write and maintain?

First, there is the overt clarity when it comes to sass (css) & haml code.

## haml file
.container
  .header
    %h1 Site Name
    %ul
      %li= link_to ...
      %li= link_to ...
      %li= link_to ...
  .content
    stuff
  .footer

## sass (css) file for this

.container
  background-color: black

  .header
    background-color: white

    h1
      font-family: Funky
      font-size: 3em
    ul
      li
        a:link, a:visited
        a:hover
  .content
  .footer

Do you see the pairing? I LOVE that! I find it clean & easy to read.

Secondly, it’s very ruby like.

This:

<% if @subscription.state == 'trial' %>
  Trial expiration date:
  <%= @subscription.next_renewal_at.to_s(:long_day) %>

<% else %>
  <% if @subscription.amount > 0 %>
    Next charge date:
    <%= @subscription.next_renewal_at.to_s(:long_day) %>
    

    Next charge amount:
    <%= number_to_currency @subscription.amount %>
    

    Current payment method:
    <%= @subscription.paypal? ? 'PayPal' : "#{@subscription.card_number} / #{@subscription.card_expiration}" %>
  <% end %>
<% end %>

becomes:

- if @subscription.state == 'trial'
  %label Trial expiration date:
  = @subscription.next_renewal_at.to_s(:long_day)

- else
  - if @subscription.amount > 0
    %label Next charge date:
    = @subscription.next_renewal_at.to_s(:long_day)
    %br/
    %label Next charge amount:
    = number_to_currency @subscription.amount
    %br/
    %label Current payment method:
    = @subscription.paypal? ? 'PayPal' : "#{@subscription.card_number} / #{@subscription.card_expiration}"

Which looks & feels more like ruby? For me, the choice is clearly the second one. It literally removes anything that doesn’t communicate what the code should do.

Anyway, to each his own.

Triggering jQuery code/functions from RJS

Melvin Ram — Sat, 25 Apr 2009 02:32:25 +0000

jQuery is an alternative to Prototype, which is the default javascript library inside Rails. Since RJS generates javascript based on prototype, you might think you can’t use jQuery in it. Although it’s technically true, you can still use jQuery by using the page.call feature of RJS. Here’s an example:

## test.js

$(function(){
  ...
};

function do_something_amazing {
  ... some slick jQuery code ...
};

## something.rjs called using link_to_remote or form_for_remote:

page.call 'do_something_amazing'

Gotcha

A simple gotcha is if you include “function be_amazing {…};” inside the “$(function(){…};” you’ll get an undefined error.

Credits: I came across this approach while helping shipstar in the #rubyonrails IRC channel

UPDATE: Using RJS isn’t the best approach if you value unobtrusiveness. Here’s a copy/paste of some reasons why “RJS is evil”.

dfr|work: it’s directly coupled to your dom but isn’t in it.
dfr|work: i mean, what’s rjs? it’s just a callback thing. Just specify it when you’re making ajax request.
dfr|work: and if you need the data from server, specify it via json. It’s clean and simple.

Expect a follow-up to this explaining how to do this the right way.

How to link to an anchor

Melvin Ram — Thu, 23 Apr 2009 06:05:55 +0000

If you need to link to a particular part of your website, link anchors are what you need. And linking to link anchors is really simple in Rails. Here’s an example:

<%= link_to "Google Analytics", features_path(:anchor => "analytics") %>

This will output:

Google Analytics

Here’s another example:

<%= link_to "San Francisco Offices", :controller => 'locations',
                                     :action => 'index',
                                     :anchor => 'sf' %>

As you’ve probably noticed, the key part is :anchor => ‘analytics’

ul CSS trick

Melvin Ram — Tue, 10 Feb 2009 22:29:07 +0000

I had a problem. I had an image that I had floating to the left. Right next to it, I had content. Here’s what the code looked like:

    1 
    2 blah blah blah blah blah blah blah
    3 
    4   Item 1
    5   Item 2
    6   Item 3
    7

Simple enough, right? It should just work, right? Wrong!

When viewed in a browser, the above code will screw up your list. What do I mean by “screw up” the list? Here’s a screenshot to demonstrate:

Notice, the bullet points will actually overlap with the image. Ugly! I tried adding margins, padding and a bunch of diff things to both the image and the ul element. Nothing fixed it!

I started hunting on Google and I ran into this page: http://www.webmasterworld.com/css/3697078.htm

The fix? Add “overflow: auto;” to the ul style. Simple! I love it!

Splitting HAML code into multiple lines

Melvin Ram — Fri, 23 Jan 2009 19:15:59 +0000

If you’re using HAML and have a really long piece of code, you probably want to split it into multiple lines so it looks clean. Here’s how you do it.

Let’s say you have this code:

%h1.logo= real_account? && current_account.name ? current_account.name : AppConfig['app_name']

But you’d rather have:

%h1.logo= real_account? && current_account.name ? 
          current_account.name : AppConfig['app_name']

All you need is to pipe them using |, like this:

%h1.logo= real_account? && current_account.name ? |
          current_account.name : AppConfig['app_name'] |

Notice how the last line also has a |. That is required.

Commenting Out ERb code in Rails (*.html.erb)

Melvin Ram — Wed, 01 Oct 2008 07:05:27 +0000

Q. Is there an easy way to comment multiple line of ruby in an html.erb file when you have:

...
<% .. %> blah <% .. %>
blah
<% .. %> blah
...

I tried to put around it but its still interpreted.

A. There are a few ways. First, you could add a -# at the beginning of the erb tags like this:

<%-# whatever erb code -%>

Secondly, you could do an if false statement as explain here http://blog.localkinegrinds.com/2008/05/02/erb-block-comments-in-rhtml-templates-using-ruby-on-rails like this:

<% if false %>
...
<% .. %> blah <% .. %>
blah
<% .. %> blah
...
<% end %>

This will color code that portion as a comment in text editors and will prevent it from getting send to the browsers at all.

Ajax File or Image Uploading inside Ruby on Rails

Melvin Ram — Tue, 30 Sep 2008 21:48:23 +0000

http://github.com/melvinram/ajax-image-upload/

While adding course covers to my BrainBank app, I put together a simple ruby on rails app that uses attachment_fu and responds_to_parent to upload an image. It should be useful if you’re thinking of added image uploading to your app.

CREDITS

http://khamsouk.souvanlasy.com/2007/5/1/ajax-file-uploads-in-rails-using-attachment_fu-and-responds_to_parent
http://kpumuk.info/ruby-on-rails/in-place-file-upload-with-ruby-on-rails/
#rubyonrails help on observe_field by wmoxam