Why doesn't this Rails JQuery code in application.js work?

Question

Here's what I'm using:

application.js:

$('#hfb').mouseup(function(){
$('#hideform').css('display', 'none');
});

the head from application.html.erb:

<head>
<title>CommentsApp</title>
<%= stylesheet_link_tag 'application', 'grid' %>
<%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
<%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
<%= javascript_include_tag "jquery-rails.js" %>
<%= javascript_include_tag "application.js" %>

<%= csrf_meta_tag %>
</head>

and the thing I want to hide:

<a href="" id="hfb">Hide Form</a>
<div id="hideform">
<% form_for Comment.new, :remote => true do |f| %>
#form stuff
<%= f.submit "Add comment" %>
<% end %>
</div>

What am I missing here ?

can you please post the rendered output in html, instead of the erb code? — Kyle Wild
– Kyle Wild, Commented Feb 16, 2011 at 18:18

DGM · Accepted Answer · 2011-02-16 18:19:37Z

3

I'm not sure why you are trying mouseup, I'd just use click() and hide()

$(document).ready(function() {
  $('#hfb').click(function(){
    $('#hideform').hide();
    return false;
  });
});

It also might be reloading the page, so returning false from the handler is a good idea.

edit idlefingers has a good idea too. you can't run the handlers until the document is ready.

answered Feb 16, 2011 at 18:19

DGM

27.1k7 gold badges65 silver badges82 bronze badges

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

1 Comment

Kesarion Over a year ago

Thanks for the answers, seems I had to use return false as well :)

idlefingers · Accepted Answer · 2011-02-16 18:20:35Z

2

You need to use $(document).ready in your js. Also, you could use jQuery's 'hide' method rather than changing the css explicitly (that's all hide does - it just reads a littler nicer):

$(document).ready(function() {
  $('#hfb').mouseup(function(){
    $('#hideform').hide();
  });
});

answered Feb 16, 2011 at 18:20

idlefingers

32.1k5 gold badges85 silver badges68 bronze badges

Collectives™ on Stack Overflow

Why doesn't this Rails JQuery code in application.js work?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related