5

I know this is going to sound like a dumb question, but as I'm learning jQuery by example, I'm finding that the placement of the scripts and functions varies a lot from example to example. Case in point, somewhere I read that the .onReady function should be placed below everything else to insure that the whole DOM is actually ready, and things of that nature.

The question is simply this, aside from obvous script tags, is there a Best Practices of where in the PHP file jquery should located? What about one-off inline scripts? Sorry for the naive nature of this, but I'd to be trying these examples in a "right" way as I figure out how to bring it all together.

This site seems to have some very insightful folks contributing, so thanks in advance for any guidance! :)

Aparently it wasn't as dumb as I thought - thank you everyone for the insights - I feel a little more clarity on what I was trying to understand in the big picture.

Al Knight
  • 452
  • 3
  • 7
  • 2
    This is a particularly interesting question because frameworks such as ASP.Net MVC that build the page as a series of components (a.k.a. views) tend to keep HTML fragments and the scripts that act on those fragments in the same view, causing the resulting JavaScript to be scattered about the final page. I have wondered before if there are issues with that approach. – Eric J. May 24 '12 at 17:00
  • I'm with you...have worked with dozens of different languages/frameworks in my career, and without knowing the bare metal aspect of how every single one works, I have also pondered this while I'm driving home at night, lol. – GDP May 24 '12 at 17:20

4 Answers4

8

AFAIK, there is no .onReady

Perhaps you are referring to $(document).ready()?

The point of the .ready() is to wait for the element to be ready. In this case, the document. So nothing within that will be executed until the document is ready. As such, you can put that anywhere you want.

As for where you link to JS files, however, you want to do that at the bottom of the document for performance reasons:

http://developer.yahoo.com/performance/rules.html

DA.
  • 39,848
  • 49
  • 150
  • 213
  • 1
    Perhaps it's stating the obvious, but just in case, you need put your `$(document).ready()`'s after you load jQuery, so `anywhere` is not strictly true. – jeroen May 24 '12 at 17:11
  • DA, will be accepting your answer because it answers my broadest concern, rather than just addressing the .ready aspect. Thank you very much for the insight and link. – Al Knight May 24 '12 at 17:27
  • 1
    Just a point of clarity,`.ready()` can only be called on `document`, it will not work for ordinary elements and will only be triggered once. – Kevin B May 24 '12 at 17:27
  • @KevinB. `ready` **can** (not should) work with any parameter you want(or without any) . You can read the source code to learn why, or watch [this DEMO](http://jsfiddle.net/w5k5t/1/). **or** [this DEMO](http://jsfiddle.net/w5k5t/2/) **or** [this DEMO](http://jsfiddle.net/w5k5t/3/) – gdoron May 25 '12 at 10:35
  • @KevinB. I asked it as a [question here](http://stackoverflow.com/q/10753306/601179), you can read it there – gdoron May 25 '12 at 11:37
  • @gdoron it isn't that you can't use it that way, it's just that it doesn't actually do what it reads. `$("#foobar").ready(handler)` will trigger when the document is ready, not when `"#foobar"` is ready. – Kevin B May 25 '12 at 13:59
  • @KevinB. I only disagree with the words _".ready() **can only** be called on document"_ it can be called with any or no parameter. I didn't wrote you should use other parameter than `document`. – gdoron May 25 '12 at 14:13
4

Don't know about PHP, but the instruction to put every onReady code at the bottom "to insure that the whole DOM is actually ready" is wrong!

The whole point of the ready event, is that you can place it everywhere you want and it will still work.

Example:

$('#foo').val() // undefined - the DOM isn't ready yet.

$(document).ready(function(){
    $('#foo').val() // bla - the DOM is ready now.
});
<input id="foo" value="bla" />

Live DEMO

Note that $(callbackFunction) equals to the verbose syntax $(document).ready(callbackFunction);

You should read the ready docs

gdoron
  • 147,333
  • 58
  • 291
  • 367
2

You should include your <script type="text/javascript"></script> before closing of <body> tag of your page. This will ensure you that all static portion of page above will be loaded before it.

Vishal
  • 2,161
  • 14
  • 25
  • See my comment under the question about how some frameworks compose pages from components. Why do you say "should". What will / can break if you don't? – Eric J. May 24 '12 at 17:01
  • You should place it there for performance reasons--but with jQuery there's no need to put it there due to having ot wait for static portions of the dom to load. (In other words, yes, put it before the closing BODY tag, but for other reasons) – DA. May 24 '12 at 17:01
  • And also, there are choices to put code bound to some events triggered by browser like .load, .ready etc. – Vishal May 24 '12 at 17:05
  • I have heard that some browsers will halt the page rendering while they wait for the script to download. This means that the user is not presented with the content as quickly as they could have been. – Steve May 24 '12 at 17:05
  • 1
    @steve js files can block concurrent downloads so, yes, you want to place links to JS files at the bottom of the page for performance reasons. – DA. May 24 '12 at 17:08
  • This is why it is best choice to put JavaScript code at the bottom of page. But `$(document).ready()` can be used when you do not want to wait for some static content like images to be completely downloaded, but it needs DOM must be ready. – Vishal May 24 '12 at 17:09
  • 1
    But when you have code which needs elements such as images fully loaded, then you should use .load() for that element. More info can be found on [jQuery docs for .load()](http://api.jquery.com/load-event/) – Vishal May 24 '12 at 17:13
0

The instruction ready allow you to put your javascript code everywhere. It will be executed only when the document is ready.

The syntax is the following :

$(document).ready(function() {
  // Put your code here.
});

OR this one :

$(function() {
 // Put your code here.
});

But to make a choice, prefer the bottom of your page, just before the closing < /body>, for performance reasons.

Cyril F
  • 1,842
  • 2
  • 19
  • 35