Setting input value with JQuery doesn't always work

Setting input value with JQuery doesn't always work - javascript

These questions are from looking at the single page app sample located here. Can anyone explain why attempts to set the value of an input control with JQuery does/does not work with the following conditions? I will include the HTML that is constant and then present a series of Javascript lines that I can't explain the behavior. First the HTML.
<form>
<div class="container-fluid">
<div class="data-container">
<div class="form-group">
<div class="row">
<div class="col">
<label>Region</label>
<input type="text" class="form-control request-region" id="regionfield" value="test" />
</div>
</div>
</div>
</div>
</div>
</form>
If I run this code it works as expected and the input box has a value of 99. Note that I'm setting the value in two different places because of the issue I found in the next sample.
$("#regionfield").val(44);
var $entry = $("div").find(".data-container");
$entry.find("#regionfield").val(99);
But if I remove that first line of code and just run this below the value of the input is "test". Why does setting the value fail now when it worked in the first instance?
var $entry = $("div").find(".data-container");
$entry.find("#regionfield").val(99);
Now if I save the HTML from the first code into a string, empty the control, then load it back, why does this code not result in the updated value of 99 but instead has the original value of "test"?
$("#regionfield").val(44);
var $entry = $("div").find(".data-container");
$entry.find("#regionfield").val(99);
var output = '';
output += $entry.html();
$entry.empty();
$entry.html(output);
Update I just noticed that I get different results when testing with Bootply vs Codeply. With Bootply the result for code sample #1 is 99 but on Codeply the result is "test". This makes me suspect the behavior is related to Bootstrap.

Simple Explanation:
The value attribute and the value property are not the same and are not connected outside of the initial load.
The value attribute is stored in the markup. This is what is initially rendered by the Browser. Unlike other properties, any subsequent changes to value through JavaScript are stored within the DOM itself.
The attribute/your markup is not updated when the value on the element is changed during the course of your application.
This means that because you're grabbing the markup as your test, you'll never see the value attribute change, but if you were to look at the actual DOM node you would see the current and correct value underneath the value property.
Longer Explanation:
Attributes in the Specification are called IDL 's and can be either reflective or non-reflective.
For more information see the HTML Standard here
A DOM Node's property and its HTML attribute are interchangeable from the point of rendering if the node is not altered - but also if specific attributes are changed.
Altering id and class in any way, whether directly on the DOM Node or within the Attribute object using the element.setAttribute method, will result in both values being changed.
id and class are reflective IDL attributes because they, in effect, watch their content attributes for changes and vice versa.
Alternatively checked and value IDL attributes are not reflective. When the value or checked properties are altered on either the DOM Node or the Attribute Object, it does not alter the corresponding attributes of the other.
Outside of those properties( there are more than id and class - though there's no real list of reflective vs not reflective - I would presume it's any property related to the identity of the Node in the DOM that would cause a re-render ) the content attributes and DOM Node properties are not bound together.
This makes using getAttribute and setAttribute useless if the intent is to update or get current data, because the current data is only found within the DOM Node properties.
Likewise, if you are trying to gauge whether a change in the value property has occurred by looking at the markup you will only see the original value.

Related

How to test value in input using XPath

In my selenium tests I need to find input element with specific value.
UI is rendered by following code:
<div id="product-list">
<!-- ko foreach: $data.productItems -->
<div class="product-list-item">
<input data-bind="value: $data.name">
</div>
<!-- /ko -->
</div>
My selenium tests uses following code to find input element with specific name:
By xpath = By.xpath(".//div[#id='product-list']//div[contains(#class, 'product-list-item')]/input[#value='Product Name']");
WebElement element = browser.getWebDriver().findElement(xpath);
The problem is that element is always null since the input[value='Product Name]" will always fail, because there is no "value" attribute in input. There is just property "value" which you can see via it e.g. "Developer Tools" in Chrome.
I have some example for investigating why "value" is not correctly processed.
jsfiddle example
Is there some advice how to find proper input element? Or at least explain how to handle value attribute vs value property?
EDIT1: fixed missing # in input[#value='Product Name']
EDIT2: updated example
EDIT3: Isn't the issue caused by inability XPATH to access DOM properties and is only capable to process HTML (or any other XGML) tag structure and its attributes? Since the knockout pushes the real value into DOM properties only, it is then not reachable from XPATH.

The last part of your XPath is incorrect:
/input[value='Product Name']
This means you are searching for an <input> where it's value attribute equals Product Name.
You want to search for the data-bind attribute instead:
/input[#data-bind='value: Product Name']
After retrieving the WebElement, get the value (not the value attribute) of the <input>:
element.getAttribute("value")

I guess, you made some typo or don't know if that was intentional. You can refer below code and see if that helps
By xpath = By.xpath(".//div[#id='product-list']//div[contains(#class, 'product-list-item')]/input[#data-bind='value: Product Name']");
WebElement element = browser.getWebDriver().findElement(xpath);
element.getAttribute("value");

What is the difference between attributes and properties when using in Jquery? [duplicate]

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.
Looking at the list on the jQuery 1.6.1 release notes (near the bottom), it seems one can classify HTML properties and attributes as follows:
Properties: All which either has a boolean value or that is UA calculated such as selectedIndex.
Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.
Thoughts?

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.
For instance, this HTML element:
<input type="text" value="Name:">
has 2 attributes (type and value).
Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.
For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.
When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship. For instance, for this HTML element:
<input id="the-input" type="text" value="Name:">
the corresponding DOM node will have id,type, and value properties (among others):
The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value.
The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text".
In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then:
theInput.value // returns "John"
whereas:
theInput.getAttribute('value') // returns "Name:"
The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.
So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
There are several properties that directly reflect their attribute (rel, id), some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. The spec covers the various kinds of reflection.

After reading Sime Vidas's answer, I searched more and found a very straight-forward and easy-to-understand explanation in the angular docs.
HTML attribute vs. DOM property
-------------------------------
Attributes are defined by HTML. Properties are defined by the DOM
(Document Object Model).
A few HTML attributes have 1:1 mapping to properties. id is one
example.
Some HTML attributes don't have corresponding properties. colspan is
one example.
Some DOM properties don't have corresponding attributes. textContent
is one example.
Many HTML attributes appear to map to properties ... but not in the
way you might think!
That last category is confusing until you grasp this general rule:
Attributes initialize DOM properties and then they are done. Property
values can change; attribute values can't.
For example, when the browser renders <input type="text" value="Bob">,
it creates a corresponding DOM node with a value property initialized
to "Bob".
When the user enters "Sally" into the input box, the DOM element value
property becomes "Sally". But the HTML value attribute remains
unchanged as you discover if you ask the input element about that
attribute: input.getAttribute('value') returns "Bob".
The HTML attribute value specifies the initial value; the DOM value
property is the current value.
The disabled attribute is another peculiar example. A button's
disabled property is false by default so the button is enabled. When
you add the disabled attribute, its presence alone initializes the
button's disabled property to true so the button is disabled.
Adding and removing the disabled attribute disables and enables the
button. The value of the attribute is irrelevant, which is why you
cannot enable a button by writing <button disabled="false">Still Disabled</button>.
Setting the button's disabled property disables or enables the button. The value of the property matters.
The HTML attribute and the DOM property are not the same thing, even
when they have the same name.

The answers already explain how attributes and properties are handled differently, but I really would like to point out how totally insane this is. Even if it is to some extent the spec.
It is crazy, to have some of the attributes (e.g. id, class, foo, bar) to retain only one kind of value in the DOM, while some attributes (e.g. checked, selected) to retain two values; that is, the value "when it was loaded" and the value of the "dynamic state". (Isn't the DOM supposed to be to represent the state of the document to its full extent?)
It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes?
If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?
The differentiation, of "it is a boolean attribute" just does not make any sense to me, or is, at least not a sufficient reason for this.

Difference HTML properties and attributes:
Let's first look at the definitions of these words before evaluating what the difference is in HTML:
English definition:
Attributes are referring to additional information of an object.
Properties are describing the characteristics of an object.
In HTML context:
When the browser parses the HTML, it creates a tree data structure wich basically is an in memory representation of the HTML. It the tree data structure contains nodes which are HTML elements and text. Attributes and properties relate to this is the following manner:
Attributes are additional information which we can put in the HTML to
initialize certain DOM properties.
Properties are formed when the browser parses the HTML and generates the DOM. Each of the elements in the DOM have their own set of properties which are all set by the browser. Some of these properties can have their initial value set by HTML attributes. Whenever a DOM property changes which has influence on the rendered page, the page will be immediately re rendered
It is also important to realize that the mapping of these properties is not 1 to 1. In other words, not every attribute which we give on an HTML element will have a similar named DOM property.
Furthermore have different DOM elements different properties. For example, an <input> element has a value property which is not present on a <div> property.
Example:
Let's take the following HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
Then we inspect the <div>, in the JS console:
console.dir(document.getElementById('foo'));
We see the following DOM properties (chrome devtools, not all properties shown):
We can see that the attribute id in the HTML is now also a id property in the DOM. The id has been initialized by the HTML (although we could change it with javascript).
We can see that the class attribute in the HTML has no corresponding class property (class is reserved keyword in JS). But actually 2 properties, classList and className.

well these are specified by the w3c what is an attribute and what is a property
http://www.w3.org/TR/SVGTiny12/attributeTable.html
but currently attr and prop are not so different and there are almost the same
but they prefer prop for some things
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
well actually you dont have to change something if you use attr or prop or both, both work
but i saw in my own application that prop worked where atrr didnt so i took in my 1.6 app prop =)

Update to my answer this a citation from https://angular.io/guide/binding-syntax
HTML attributes and DOM properties
Attributes initialize DOM properties and you can configure them to modify an element's behavior, but Properties are features of DOM nodes.
A few HTML attributes have 1:1 mapping to properties; for example, id.
Some HTML attributes don't have corresponding properties; for example, aria-*.
Some DOM properties don't have corresponding attributes; for example, textContent.
Remember that HTML attributes and DOM properties are different things, even when they have the same name.
Example 1: an
When the browser renders , it creates a corresponding DOM node with a value property and initializes that value to "Sarah".
<input type="text" value="Sarah">
When the user enters Sally into the , the DOM element value property becomes Sally. However, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns "Sarah".
The HTML attribute value specifies the initial value; the DOM value property is the current value.
Example 2: a disabled button
A button's disabled property is false by default so the button is enabled.
When you add the disabled attribute, you are initializing the button's disabled property to true which disables the button.
<button disabled>Test Button</button>
Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why you cannot enable a button by writing Still Disabled.
To control the state of the button, set the disabled property instead.
Property and attribute comparison
Though you could technically set the [attr.disabled] attribute binding, the values are different in that the property binding must be a boolean value, while its corresponding attribute binding relies on whether the value is null or not. Consider the following:
<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
The first line, which uses the disabled property, uses a boolean value. The second line, which uses the disabled attribute checks for null.
Generally, use property binding over attribute binding as a boolean value is easy to read, the syntax is shorter, and a property is more performant.

Attribute: Attributes are defined by HTML and are used to customize a tag.
Properties: HTML DOM properties are values (of HTML Elements) that you can set or change.
So, the main differences between attributes and properties are:
Attributes are defined by HTML, but properties are defined by the DOM.
The value of an attribute is constant, but the value of a property is variable.
The attribute’s main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.

Where does jquery put .val() on a DIV?

jQuery (all versions tested up through 2.1.0) allows me to call .val("some value") on a DIV object to set a value on the DIV. It is not displayed and doesn't show up as an HTML5 data property in Chrome Developer Tools. And yet I can fetch the result later with a call to .val().
For example (from http://jsfiddle.net/X2nr6/ ):
HTML:
<div id="mydiv" style="display: none;">Some text</div>
<div id="debug"></div>
Javascript:
$('#mydiv').val('A value attached .');
$('#debug').text( $('#mydiv').val() );
Displayed result:
A value attached.
Where is the value stored? Not knowing where it is stored makes me worry that I am relying on a hack.

jQuery is just assigning to a value property on the div object (the HTMLDivElement instance for that div), even though it doesn't normally have one. Creating new properties on elements is allowed in every browser I've ever seen, so it works. I wouldn't use val with divs on a regular basis, though.
Here's a non-jQuery example:
var div = document.createElement('div');
console.log('value' in div); // false, divs don't normally have a value property
div.value = 42;
console.log('value' in div); // true, we've created a property on the element
console.log(div.value); // 42
Or the same sort of thing using jQuery:
var $div = $("<div>");
display(typeof $div.prop('value'));
$div.val(42);
display(typeof $div.prop('value'));
display($div.prop('value'));
This business of creating new, custom, non-standard properties on elements is called creating "expando" properties. They can be very handy. (jQuery uses them internally, for instance, to manage the data cache and a few other things — if you look closely at a DOM element you've set data on using data, you'll see a property with a name like jQuery1110028597884019836783; that's the key jQuery uses to find the element's data in jQuery's internal data cache. jQuery doesn't store the data in an expando on the element, because of IE garbage collection issues; it stores the key there, and the data in a JavaScript object.)

It stores it on a value property on the DOM object. You can see if by running your code and then inspecting the element in a DOM inspector. In Chrome, the value property will be listed under div#mydiv in the properties tab.
HTMLDivElement objects don't officially support such a property, so you are relying on a hack.
Use data() to store arbitrary data on an element.
$('#mydiv').data("myCustomValue", 'A value attached .');

Although the above answers are accurate, I'd like to complete something out.
jQuery is designed around the concept of wrapping all HTML elements in the jQuery object. That jQuery object happens to be an array that can hold more than one element.
jQuery also goes out of its way to hide this fact from you so that the average jQuery developer never has to worry about exactly what he has -- simply call the right method and the magic happens.
(You see this if you do a $(".someClassYouHaveLotsOf").hide() or $(".someClassYouHaveNoneOf").hide()`.)
jQuery's val() method is just a wrapper for accessing an HTML input element's value property. Since jQuery doesn't throw errors unless there is really no way what-so-ever, it silently helps you by accessing the value property on whatever HTML element it happens to have. div span or whatever.
In most browsers, this works -- mostly enough.
If you are really interested in setting values on HTML elements for use later, the data() method is far better suited. Straight HTML would use <element>.setAttribute("data-key", "value");
And that is about the only time you'll see me using the HTML attributes over properties, BTW.

Issue while accessing element by dojo.byId dojo 1.8

I am trying to access a div element text by using dojo.byId but it is returning the value which is set at first time the value is selected.It is somehow binding the value initially selected to the id of div and hence returning the same value even after I change the value to some other value.
var startDateLabel = dojo.byId("startDateLabel");
<label class="secondaryColor bold75Font floatRight" id="startDateLabel">${startDate} </label>
I tried to use registry.ById but since it is in a widget that is created more than once , it gives "id already registered error".For removing that , I also used destroyRecursive method but that also doesn't work.
Earlier, I used the id of container in which the widget is loaded and traversed to the children hierarchy to get the label value and it worked fine. but the child traversal code made it a bit messy.Something like
var startDateCont = registry.byId("startDateContainer");
var startDateLabel = startDateCont.domNode.children[1].children[1].children[1].innerHTML;
Is there any other way in dojo to achive this????

If you're using this inside a widget you should not even use IDs (or at least use generated IDs). The best way to get a reference to a DOM node while using a widget is by using attach points. An example, consider the following HTML:
<label class="secondaryColor bold75Font floatRight" data-dojo-attach-point="startDateLabel">${startDate} </label>
As you can see I introduced an attribtue called data-dojo-attach-point which allows me to give a name to the label (similar to an ID).
Then inside the widget you can now easily get a reference to that DOM node by using:
this.startDateLabel;
Just some extra information, you can also define events in a similar way by using data-dojo-attach-event. Make sure to read this part of the Writing your own widget article.

What is the difference between properties and attributes in HTML?

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.
Looking at the list on the jQuery 1.6.1 release notes (near the bottom), it seems one can classify HTML properties and attributes as follows:
Properties: All which either has a boolean value or that is UA calculated such as selectedIndex.
Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.
Thoughts?

The answers already explain how attributes and properties are handled differently, but I really would like to point out how totally insane this is. Even if it is to some extent the spec.
It is crazy, to have some of the attributes (e.g. id, class, foo, bar) to retain only one kind of value in the DOM, while some attributes (e.g. checked, selected) to retain two values; that is, the value "when it was loaded" and the value of the "dynamic state". (Isn't the DOM supposed to be to represent the state of the document to its full extent?)
It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes?
If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?
The differentiation, of "it is a boolean attribute" just does not make any sense to me, or is, at least not a sufficient reason for this.

Difference HTML properties and attributes:
Let's first look at the definitions of these words before evaluating what the difference is in HTML:
English definition:
Attributes are referring to additional information of an object.
Properties are describing the characteristics of an object.
In HTML context:
When the browser parses the HTML, it creates a tree data structure wich basically is an in memory representation of the HTML. It the tree data structure contains nodes which are HTML elements and text. Attributes and properties relate to this is the following manner:
Attributes are additional information which we can put in the HTML to
initialize certain DOM properties.
Properties are formed when the browser parses the HTML and generates the DOM. Each of the elements in the DOM have their own set of properties which are all set by the browser. Some of these properties can have their initial value set by HTML attributes. Whenever a DOM property changes which has influence on the rendered page, the page will be immediately re rendered
It is also important to realize that the mapping of these properties is not 1 to 1. In other words, not every attribute which we give on an HTML element will have a similar named DOM property.
Furthermore have different DOM elements different properties. For example, an <input> element has a value property which is not present on a <div> property.
Example:
Let's take the following HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
Then we inspect the <div>, in the JS console:
console.dir(document.getElementById('foo'));
We see the following DOM properties (chrome devtools, not all properties shown):
We can see that the attribute id in the HTML is now also a id property in the DOM. The id has been initialized by the HTML (although we could change it with javascript).
We can see that the class attribute in the HTML has no corresponding class property (class is reserved keyword in JS). But actually 2 properties, classList and className.

well these are specified by the w3c what is an attribute and what is a property
http://www.w3.org/TR/SVGTiny12/attributeTable.html
but currently attr and prop are not so different and there are almost the same
but they prefer prop for some things
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
well actually you dont have to change something if you use attr or prop or both, both work
but i saw in my own application that prop worked where atrr didnt so i took in my 1.6 app prop =)

Attribute: Attributes are defined by HTML and are used to customize a tag.
Properties: HTML DOM properties are values (of HTML Elements) that you can set or change.
So, the main differences between attributes and properties are:
Attributes are defined by HTML, but properties are defined by the DOM.
The value of an attribute is constant, but the value of a property is variable.
The attribute’s main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.

We Keep Coding

JavaScript is the programming language of the Web.