Ruby on Rails - Javascript/jQuery to Haml

Question

I'm trying to implement this in my Ruby on Rails application. The only thing what doesn't work is the Javascript code. I already tried %script and :javascript. But for some reason it doesn't load. When I hover over the radio button it doesn't show anything.

Javascript/jQuery (From jsfiddle):

$(document).ready(function(){

$('#container').on('mouseenter', '#radiobtn', showBox);
$('#container').on('mouseleave', '#radiobtn', hideBox);

function showBox(e){
    var x = e.pageX + 20;
    var y = e.pageY + 20;
$('#hoverbox').fadeIn();
$('#hoverbox').offset({ left: x, top: y });
}
});

function hideBox(){
$('#hoverbox').fadeOut();
}

Example: http://jsfiddle.net/wrN2u/387/

Own Javascript file:

:javascript
 $(document).ready(function(){
  $('#container1').on('mouseenter', '#radiobtn', showBox);
  $('#container1').on('mouseleave', '#radiobtn', hideBox);

  function showBox(e){
    var x = e.pageX + 20;
    var y = e.pageY + 20;
    $('#hoverbox').fadeIn();
    $('#hoverbox').offset({ left: x, top: y });
  }
 });

function hideBox(){
$('#hoverbox').fadeOut();
}

HAML:

!!!
 %html
  %head
   = javascript_include_tag 'options.js'

    #container1
      %input{:name => "optradio", :type => "radio", :id => "radiobtn"}option1
      #hoverbox
    #container2
      %input{:name => "optradio", :type => "radio", :id => "radiobtn"}option2
      #hoverbox2

Answer 1

This question might be of help to you. Also I noticed in your js-fiddle that the Javascript is not indented. If you are using HAML, then indentation is critical. Make sure your JS begins on the first indentation of the second line after :javascript

:javascript
  $(document).ready( function() {
    alert('working');
  } );

Alternatively. If you are trying to include a js file with HAML you'll need

= javascript_include_tag "my_js"

from here.

Also, if this doesn't help. It will be super helpful to see your HAML file.