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

The jsfiddle works for me. If there is haml code you are referencing that is broken, be sure to include it. — Peter P., Dec 08 '16 at 20:52

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

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.

edited May 23 '17 at 10:30

Community

1
1

answered Dec 08 '16 at 21:51

James.Oliver

100
9

My javascript file already gives me a error at :javascript. Error: Statement expected. – MrN2017 Dec 08 '16 at 22:28
have you written :javascript in your options.js file? If so, remove it. That is HAML code. – James.Oliver Dec 08 '16 at 22:35
I changed it but it stil does nothing on hover. – MrN2017 Dec 08 '16 at 22:46
Nevermind I fixed it! I was missing the id at the input-fields and ofcource a little bit with your help. – MrN2017 Dec 08 '16 at 22:52

Ruby on Rails - Javascript/jQuery to Haml

1 Answers1