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

Kieran Barker
Kieran Barker
14,997 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

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,229 Points

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

Jeff Sanders
Jeff Sanders
Courses Plus Student 8,839 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)."