Running javascript in Rails

Question

I guess this is really simple, but I can't get it to work. I have a script in my help.js in app/assets/javascript.

This is loaded and if I add an alert() it is run, but when I try to call the javascript (jquery click()) nothing happens. If I have the javascript-code in the page it works if at the bottom of the page.

I guess the includes from the assets are put at the start of the page, and then my script won't work. So...

Am I completely worthless at writing javascripts?
Should the javascript be placed at the end, and how would that be done when requiring it from assets without moving the complete javascript_include_tag? (I guess I could exclude it from applications and load it separately, but it feels wrong).
It feels very strange that this shouldn't work, so where did I go wrong?

help.js

$('.clickme').click(function() {
  $('#working').show();
  var htmlStr = this.getAttribute('data-message');
  $('#helper_box').html(htmlStr);
  $('#helper_box').toggle('slow', function() {
    // Animation complete.
    $('#working').hide();
  });
});

index.html.erb

<div class="clickme" data-message="Something...">
  <%= image_tag("question_mark.png", :alt => "helper") %><br>
</div>

any errors on firebug/js console after clicking? I guess you are not including jquery in application.js file or requiring jquery library after help.js file. Paste the content of application.js file — Muhammad Sannan Khalid
– Muhammad Sannan Khalid, Commented Feb 23, 2012 at 11:47
Friend you have to ensure that your script must be executed after DOM is ready.So @Gonzalo Quero is corrent. — Soundar Rathinasamy
– Soundar Rathinasamy, Commented Feb 23, 2012 at 12:42

Gonzalo Quero · Accepted Answer · 2012-02-23 12:18:21Z

5

Events in jQuery should be added after the document is completely loaded. Have you tried using

$(document).ready(function() {
  $('.clickme').click(function() {
    $('#working').show();
    var htmlStr = this.getAttribute('data-message');
    $('#helper_box').html(htmlStr);
    $('#helper_box').toggle('slow', function() {
     // Animation complete.
     $('#working').hide();
    });
  });
});

answered Feb 23, 2012 at 12:18

Gonzalo Quero

3,33320 silver badges23 bronze badges

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

1 Comment

abegbg Over a year ago

Sweet. That did the trick. As I thought it was something easy, as pretty much everything is when you now it. Thanks Gonzalo.

bragboy · Accepted Answer · 2012-02-24 09:14:00Z

5

I think your code is correct. I checked it at http://jsfiddle.net/Dd46n/ I guess the help.js is loading before the jQuery library file.

edited Feb 24, 2012 at 9:14

bragboy

35.7k30 gold badges116 silver badges175 bronze badges

answered Feb 23, 2012 at 12:17

Jak

3,2433 gold badges23 silver badges34 bronze badges

1 Comment

abegbg Over a year ago

Yupp. That was the problem. Thanks for the heads up.

Collectives™ on Stack Overflow

Running javascript in Rails

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related