rail3.1 javascript coffecsript newbie question

StackOverflow https://stackoverflow.com/questions/7309083

Question

im fairly new To Javascript and Rails 3.1. So i now have a Rails app up und runnig and doing what i whant,BUT: I wanted to add some Eye Candy(like nice dropdown menus and so on)with Jquery/Coffescript

I jave the include tags, and the application.js contains my self written methods/functions. But i encounter some unwanted behaviors: id added an alert() to pages.js.coffee, and i hoped i would only be executed when calling something from the pages_controller, But it gets called on every page. Why is that? Secondly i added a small test function for coloring the <h1> tags like this:

app/assets/javascript/pages.coffee.js:

highlight_h1 = (color) ->
    $('h1').css('background',color)
#change colour on page load
$ -> highlight_h1 "red"
#add some click action for fun
$('#ccolor').click ->
    highlight_h1 "blue"

$('button').click ->
    highlight_h1 "yellow"

Now the <h1> get a red background on page load. But none of my click actions ever seem to work. Did i miss something? Here is the rendered html:

<h1 id="ccolor" style="background-image: initial; background-attachment: initial;  background-origin: initial; background-clip: initial; background-color: red; background-position: initial initial; background-repeat: initial initial; ">Home</h1>
<p>Here Should be a Login Page an Stuff</p>
<button>make me yellow</button>
<a href="/users/sign_up" class="signup_button_round">Sign up now!</a>

any hints?

Was it helpful?

Solution

Question 1:

id added an alert() to pages.js.coffee, and i hoped i would only be executed when calling something from the pages_controller, But it gets called on every page. Why is that?

The way the asset pipeline works (by default), all of your JS is aggregated into a single minified file for production. In development mode, the original files are served instead, but they're still all on every page. You'll have to make page-specific code conditional on something, e.g. the existence of a particular element:

if $('#myPageElement').length > 0
  ...

Question 2:

Now the get a red background on page load. But none of my click actions ever seem to work.

Your <script> tags come before the <body>, so your script runs right away. When it does, there is no #ccolor element yet, or any button—no HTML body at all. You can get around this by passing the code as a function into the jQuery object—as you've done with the highlight_h1 call, but not with the rest of your code—to run only after the entire document is ready:

$ -> 
  highlight_h1 "red"

  #add some click action for fun
  $('#ccolor').click ->
      highlight_h1 "blue"

  $('button').click ->
      highlight_h1 "yellow"

To paraphrase Homer Simpson: "To indentation! The cause of—and solution to—all of life's problems."

Plug: There's a chapter on jQuery in my book, CoffeeScript: Accelerated JavaScript Development. It's aimed at beginners and should help you better understand these sorts of issues.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top