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.
– Peter P., Commented Dec 8, 2016 at 20:52

Community · Accepted Answer · 2017-05-23 10:30:13Z

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, 2017 at 10:30

CommunityBot

11 silver badge

answered Dec 8, 2016 at 21:51

batshoes

1009 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MrN2017 Over a year ago

My javascript file already gives me a error at :javascript. Error: Statement expected.

batshoes Over a year ago

have you written :javascript in your options.js file? If so, remove it. That is HAML code.

MrN2017 Over a year ago

I changed it but it stil does nothing on hover.

MrN2017 Over a year ago

Nevermind I fixed it! I was missing the id at the input-fields and ofcource a little bit with your help.

Collectives™ on Stack Overflow

Ruby on Rails - Javascript/jQuery to Haml

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related