Haml and jQuery

[Mark A. Richman]

Can someone please point me to a tutorial on using Haml with jQuery?

[mef]

= javascript_include_tag 'jquery'

[Max A]

Using jQuery is no different than any other javascript. Just use
the :javascript filter tag for internal javascript and %script for
external javascript and you're there.

[Nicholas Van Weerdenburg]

HAML is a pretty straightforward markup alternative to erb. Any tutorial on using jQuery with Rails should suffice, with the main HAML consideration being how to specify javascript.

My own experience:

The HAML javascript tag is nice for quick work. As an example page, I have a couple of inline elements and a call to load all my application js from my customer myapplication.js file:

index.haml

----------------------

:javascript

  alert("this is my javascript")

  function do_funky_stuff(){

      // put your jQuery stuff here

  }

  

  onload=setHanders;  // in myapplication.js

.mypage

  %h1 welcome to my page!

      %p 

          Number of weeks:

          %span#weeks

            :javascript

              document.write( calculateWeeks() );

------------------------

Notice how the :javascript tag can be placed anywhere inline to call js code.

But all-in-all, HAML has very little to do with jQuery, since ultimately that works client-site with the DOM elements. You just need the basic syntax to attach your onclicks and other JS handlers, and that has nothing to do with jQuery specifically- it's basic JS.

I don't mix JS in my HAML markup specificall, but that would largely be done via {} options I think.  

e.g.

      %a{:href=>"/", :onclick=>"alert('yah!')"} Home

However, I use a function in a separate js (as shown above) file to attach handlers (note- the examples below are prototype, not jquery) and call it on my view. My js looks something like:

myapplication.js

-------------------------

function setHandlers(){

  $('commitment_end_date_1i').onclick= setWeeks;

  $('commitment_end_date_2i').onclick= setWeeks;

  $('commitment_end_date_3i').onclick= setWeeks;

  $('commitment_start_date_1i').onclick= setWeeks;

  $('commitment_start_date_2i').onclick= setWeeks;

  $('commitment_start_date_3i').onclick= setWeeks;

}

Regards,

Nick