FAQ: jQuery Setup - .ready()


#1

This community-built FAQ covers the “.ready()” exercise from the lesson “jQuery Setup”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to jQuery

FAQs on the exercise .ready()

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

According to the official jQuery .ready() documentation, the syntax suggested in this exercise has been deprecated and may be disabled in future versions: https://api.jquery.com/ready/

What I don’t understand is the recommended syntax does not include .ready() anywhere:

$(function() {
  //Handler for .ready() called.
});

The rest of the document is not helpful in explaining how .ready() is called without explicit inclusion in the code. Have they baked the .ready() method into all $() wrappers? I want to make sure I’m not missing some crucial detail when I use their recommended syntax.


#3

DOMContentLoaded looks to be the driving event going forward. Needless, deprecated does not mean ‘not supported’. The language will be backward compatible for a good long time to come.


#4

.ready() is not being deprecated - only certain syntax variants. The example I posted is the recommended syntax for the .ready() method. I can’t think of any argument to use deprecated syntax when there is an equivalent syntax that has much less chance of breaking down the road. The implementation (complete omission of the word “ready”) is confusing to me and I was hoping to get some more insight.

Also, the document advocates an advantage .ready() has over DOMContentLoaded: since it is only waiting for a condition (is the DOM loaded?), it can be called well after the page loads. However:

In contrast, a DOMContentLoaded event listener added after the event fires is never executed.

The document is not written very well, so I can see how someone might misinterpret it (I had to read it several times).


#5

Please cite your source for this.


#6

The source is the link I shared on my first post. I’ll link it again here: https://api.jquery.com/ready/

As I said, the document isn’t written very well, so I’ll walk you through it.

The document lists several “equivalent” syntaxes :

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

As the last line says, only the first syntax is recommended (and has not been deprecated). The document then provides an example in the recommended form, which I thought was a better analog to the Codecademy exercise than simply $( handler):

$(function() {
  //Handler for .ready() called.
});

This code block misleadingly follows a block of how the .ready() method is “typically” written according to the document, and it is very similar to the Codecademy syntax:

$( document ).ready(function() {
  // Handler for .ready() called.
});

Is that clear enough?


#7

Most importantly it refers to jQuery 3.0 and above.

$( handler )
$( document ).ready( handler )

Both have been taught here in the now removed jQuery course(s) which were version 1.8 and 1.9. We would need to check the version on any current lessons.


#8

This lesson uses 3.2.1 (see below). Shall I submit a bug report or will you pass this on to the relevant channels?

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script> 

Now that we have that cleared up, we can get to my original question: how is .ready() called if there’s no .ready() in the syntax?


#9

According to this page, the event has not been removed, so it’s still present and functioning. This is to support older versions of code that may be plugged into the namespace. Granted, we should follow the direction of the 3.x syntax in all future writing so that when support is officially removed, we don’t have to backtrack through our old code.


#10

Just to be clear, I’m not talking about the fact it has been deprecated anymore. That whole bit was just a segue into my original question (from my first post), which I’m not sure you ever figured out. Let me try one more time. The following syntax does not have the word “ready” in it anywhere.

$( handler )

In every other JS method I’ve encountered on Codecademy, the method name is always included in the method call. So what makes .ready() different? I find it especially confusing because the syntax is so similar to jQuery syntax in general.

p.s. I hope there’s a prize at the end of this thread lol


#11

Timing.

There is an old stage joke that demonstrates this…

"Ask me, 'What's the secret of good comedy?'"

To which the listener replies,

"What's the secret of ...

only to be interrupted by the reply,

"Timing."

The ready event is somewhere in the mix of load events which created some confusion, as we have seen, as versions evolved and weaknesses began to reveal themselves. It wasn’t always perfectly timed.

These concerns are way above a learner’s head, for starters, but more importantly we only want the learner to know that deferral of scripts has a value, and is important. As long as the ready event fires at the right time for our lesson code it is not a concern whether it is deprecated or not.

Far be it for me to ascertain what the authors are planning in the courseware, or why. I only hope that for all intents and purposes they are giving the learner a chance to think on their own.


#12

Perhaps this is true, but it appears my question is above your head, because I still don’t think you got it. Please don’t take this personally. I’m just baffled that I couldn’t explain it clearly enough. The joke reference was not helpful, btw. I’m ready to move on. Thank you for trying.


#13

What this really suggests is that .ready() is not called, since as pointed out, it is deprecated. The function above does not wait for anything to be loaded. If it does, then that suggests jQuery itself is waiting for a suitable moment to jump into action. There are a range of load events that it can listen for in the background.

If the syntax does indeed wait for loading of DOM elements to complete then it is completely testable. Write the script into the HEAD and see if it works on DOM elements. If not, then that means just like all JS, there is no deferral. Script executes when it loads.


#14

You got it!!!

That’s such a great idea to test it - I tried this with the exercise I’m working on right now “Mouse Events: Chaining Events”. Putting the code in the <head> made no difference. All the jQuery event handlers still functioned.

I had considered this, but I thought it was an odd idea - why wrap everything again if every jQuery function is already waiting for the DOM? Seems inefficient (both the redundant wrapping and the need to check if the DOM loaded every time you call another function).

As I said before, 'ready() is not being deprecated, only some syntax variants. And the test you suggested bolsters that interpretation.