Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

Kieran Barker
Kieran Barker
15,028 Points
Posted by Kieran Barker
Kieran Barker
15,028 Points

.prop() vs .attr()

  1. Why does Dave use jQuery's .prop() method in one instance, and then .attr() in another to accomplish the same thing? What's the difference? Surely it would be better to be consistent?

  2. Why does setting .prop("disabled", false) or .attr("disabled", false) work? My understanding was that the mere presence of the disabled attribute turns it on, so disabled, disabled="", disabled="true", disabled="false", and disabled="sandwich" would all make something disabled. I thought you had to actually remove the attribute altogether. Or is this how jQuery handles it in this case, specifically?

2 Answers

Janice Childers
Janice Childers
18,958 Points
Janice Childers
Janice Childers
18,958 Points

I had the same question and did not find the jQuery docs very useful in answering it. I found several discussions of how properties and attributes are different, but what helped me understand it was to realize that in the first case of $searchField.prop("disabled", true) we are setting the property of that field to be disabled. In the second case, $submitButton.attr("disabled", true).val("searching ..."); we are disabling the submit button AND we are changing the value attribute from "Search" to "searching ...". Hope that is helpful.

Nour El-din El-helw
Nour El-din El-helw
8,241 Points
Nour El-din El-helw
Nour El-din El-helw
8,241 Points

I think the jQuery docs will answer your questions. :D

Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

I understand why this comment got down votes because one's gut reaction as a new learner is to react negatively to someone who suggests that you search for your own answers; however, there is wisdom to his suggestion.

  1. Things change, including how jQuery functions work. If you rely on static responses, you could be learning deprecated solutions to a problem. The jQuery docs will ALWAYS be up to date and therefore they are a more reliable source of information.
  2. If you don't research answers yourself, you'll never get a full picture of how jQuery (or any other programming language or library) works. There are almost always several ways to do something. This case is no different.
  3. The jQuery docs do have a better explanation for the difference between .attr() and .prop() than anything posted here so far. In fact, there is a section called "Attributes vs. Properties". Imagine that.

Something from a Stackflow thread: "Attributes are defined by HTML. Properties are defined by DOM. Some HTML attributes have 1:1 mapping onto properties. id is one example of such. Some do not (e.g. the value attribute specifies the initial value of an input, but the value property specifies the current value)."