Use Javascript in Rails

Question

I just started to learn javascript and want to use it in Rails. The javascript code is very simple, mainly for experiment:

var pageAlert = function(){
            alert("This is working");}
$('#refresh-button').on('click',pageAlert);

I must put the code in "application.js" file and inside the function

 $(document).ready(function(){...});

Otherwise, it won't work. For example, if I put it in "custom.js" or in "application.js" but outside the document.ready function, not working. I assume I don't have to put everything inside the document.ready function. I know the concept of asset pipeline, and in the "application.js", I have the default

 //= require_tree .

This should be easy, but I just can't figure it out. Any suggestion or tutorial on this? Thanks.

The var pageAlert.. part can be outside the $(document).ready... block, but the $('#refresh-button').on.. part should be within the $(document).ready... as you want to make sure the element with id refresh-button exists in the DOM before that JavaScript runs. — mccannf
– mccannf, Commented May 9, 2013 at 22:11
Yes, but I assume if I don't put it inside the document.ready, it also should run when I click the button. Am I right? — melodrama
– melodrama, Commented May 9, 2013 at 22:15
When the JS engine in the browser encounters the statement $('#refresh-button').on.. it searches for an element in the DOM with that ID and assigns the event handler to that element. If the DOM is still loading, and it doesn't find that element, then no event handler is assigned, and the click doesn't fire. — mccannf
– mccannf, Commented May 9, 2013 at 22:17
@mccannf That makes sense. So the "assignment" process only happens once? — melodrama
– melodrama, Commented May 9, 2013 at 22:23
Correct - JQuery does not go back and check if the element is loaded later and then assign the event. That is why any JavaScript that deals with DOM elements should be initiated from a $(document).ready block or from some other event that is fired after the DOM is loaded. — mccannf
– mccannf, Commented May 9, 2013 at 22:28

jokklan · Accepted Answer · 2013-05-09 22:16:59Z

1

You can put code like function declarations and basic javascript outside $(document).ready(function(){...}); block. Try for example to just write alert("Hello world").

However $(document).ready(function(){...}); will first be triggered when the DOM is loaded, ie. when your browser have downloaded the HTML and are ready to render the page. If you call javascript functions that manipulate the DOM like $('#refresh-button') outside of the ready block, will the code be runned before the DOM is ready, and will most likely not work because, like in this example, there is no element with the id refresh-button yet.

Hope this answers your question, otherwise feel free to ask for more information.

answered May 9, 2013 at 22:16

jokklan

3,56020 silver badges37 bronze badges

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

2 Comments

melodrama Over a year ago

Thanks for your explanation. So basically, if the javascript code is about the event handler(like my case), I must put it inside the document.ready's block.

jokklan Over a year ago

Exactly! Everything that is based on, or manipulates, HTML elements in any way, have to be inside the ready block.

Collectives™ on Stack Overflow

Use Javascript in Rails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related