Getting different results from attribute.dataset and jquery .data() method - javascript

I was getting unexpected results and when I debugged into the problem, I found that I was not getting right data-attribute value by Jquery .data() method. It was pretty clear that value was not right and when I changed my code to attribute.dataset.name (native property of an element) It returned me the expected value.
here's the screenshot of an error
Any ideas, what could be the possible reason because I am using a lot of data-attributes in my situation and don't want to change the code everywhere I am accessing data-attributes by Jquery .date() method.

.data(prop) and .dataset[prop] can be different if:
The HTML dataset contains one value
jQuery's .data has been called on the element previously to store a value associated with the same key
Example:
$('div').data('foo', 'newFooVal');
console.log($('div').data('foo'));
console.log($('div')[0].dataset.foo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-foo="oldFooVal"></div>
jQuery's .data will retrieve:
Any previous value set with .data (which will be completely unrelated to the dataset)
If no previous value has been set to that key with that element, the value for that key in the dataset will be returned
So you have to be careful with what setting and retrieving. It's admittedly not entirely intuitive, since it'll do something different in different situations.

Related

Javascript document.querySelector just need the value

my webpage excerpt looks like this
<div class="current-timestamp" style="--duration:"00:13:19"; --absolute-position:"00:00:00";"><span class="position"></span><span class="divider"></span><span class="duration"></span></div>
i try to get the value 00:13:19 via the chrome console with this command
document.querySelector(".current-timestamp");
however i receive the full code like above.
What do i need to do to just receive "00:13:19" ?
It's not common to store the value of a component in a CSS variable like you have done, however it can be accessed in the following way:
getComputedStyle(document.querySelector(".current-timestamp")).getPropertyValue("--duration");
Essentially, we are getting the computed style of the element in question, and then using getPropertyValue to get the value of the duration variable on the element.
However, I would highly advise against using CSS variables for storing non-style related values in the future.
Edit: This can actually be done using the style property directly, as this is set on the element itself:
document.querySelector(".current-timestamp").style.getPropertyValue("--duration");

How to work with custom Custom data-* attributes [duplicate]

I am updating a data attribute by jQuery, Like:
jQuery('div').data('hidden', 'true');
alert(jQuery('div').data('hidden'));
Data attribute value got changed and returned new value which is true but DOM is still showing the old value which is false.
When you use .data() to update a data value, it is updating internal object managed by jQuery, so it will not be updated in the data-* attribute
I was beating around the bush so badly :( and able to solve the problem. Seams like we can't do achieve this using the jquery data method if the html is dynamic and the data attribute changed later after accessing the first time.
According to jQuery.data()
The data- attributes are pulled in the first time the data property is
accessed and then are no longer accessed or mutated (all data values
are then stored internally in jQuery).
So what I did is, changed it to attr method which won't give you the parsed value for integer, so you have to use '+' operand to convert like:
+ myElement.attr('data-index');
Note: You have to be careful, it will convert the result to NaN if there is any string in the data attr. BTW it's your choice of implementation of the code.

jQuery data function returning the first value

I have a one span tag with data attribute, data-kr-id. On clicks of different items of the list, I update this span's data-kr-id attributes and it gets updated.
When for the first time I retrieve this(data-kr-id) value using jQuery's data method, I get the correct value. But from the subsequent time, I always get the same value as of the first time. But on using jQuery's attr function, I get the correct value. Can't figure out why.
CODE: Where I set the data-kr-id value:
$_applozicWtLauncherBtn.attr('data-kr-id', seller.UserId);
CODE: Where I retrieve the values:
var topicId = $applozic(this).data("kr-id");
topicId = $applozic(this).attr("data-kr-id");
In the above code where I retrieve values, using data method gives me old value(the value of the first item I retrieved), but using attr method gives me correct value.
UPDATE :
As informed by everyone, I was setting the data attributes with attr method and retrieving the value with data method. After using data method for setting the attribute, When I was retrieving the values, I was getting a getting empty string. After digging a bit deeper, I realized there are two different versions of the jQuery are being used here.
Sorry for the incomplete information and late update.
You set value only using attr, Second time when you set data-kr-id value using attr then data value remains same, so need to set value with data also
// With Attr
$_applozicWtLauncherBtn.attr('data-kr-id', seller.UserId);
// With Data
$_applozicWtLauncherBtn.data('kr-id', seller.UserId);
Actually jquery's .data() fetches value from the property (same as .prop()) not from attributes. Main difference is .attr() fetches data from HTML tag which you can see it will reflect on your HTML when you update it with .attr(). But when you use .prop() or .data() it will not reflect in HTML tag but it will update value in it's property for that HTML tag as per the DOM tree.
You'll find out more about difference property and attribute from here.
Initially this property will set when your element is created. So for the first time your .data() and .attr() will work fine. When you update value from .attr() it will manipulate DOM but property will be remain same.

Strange knockout js select option binding issue

Does anybody have a minute to take a look at a puzzling problem I'm having with Knockout JS and binding select lists?
The person's favourite color should be selected in the list by calling value: favColorId in the select list, rather than with the function-based call of value: favColorId(), something very strange is going on here, I've never used () in the past, it's also causing some other weird issues where it won't recall the value into the span (so changing the selected item does nothing).. I have tried recreating a simple sample as best I can demonstrating the issue.
http://jsfiddle.net/goneale/ph8Jw/
I have included my mapDictToArray() function but it simply converts a
javascript object into a key-value JS array. I wouldn't think that is
contributing to the problem.
Actually, that was part of the problem. The function returns a JavaScript array, not an observable array and therefor can't be used properly by Knockout. I've made the following changes to your code:
// The "mapDictToArray" makes a normal JS array, not a ko.observableArray();
// You can't simply "merge" a JS array with an observableArray(); you'll need
// some extra functionality for that: ko.utils.arrayPushAll()
// viewModel.colors(mapDictToArray(dict));
ko.utils.arrayPushAll(viewModel.colors(), mapDictToArray(dict));
// Apply the bindings *after* you've added the contents to the "colors" observable, in order to
// get the correct selected value
ko.applyBindings(viewModel);
That should do the trick (with the correct HTML without the () )!
JSFiddle.
UPDATE
I thought about my solution, but something wasn't correct. The only thing that was correct, was the part that you need to apply the bindings after you've added the contents of the colors observable. This is your fiddle, with that part moved down.
This works in your case, but you'll need to use the arrayPushAll method when there is already data inside the observableArray. This method merges, while you overwrite it when not using it (example with data inside the observable).

jquery attr() not returning expected value

I am using jQuery and would like to retrieve the 'id' attribute
of a clicked element, which in this case is a element.
Kindly check the image below. Notice that the returned string whenever
I use the attr() method in jQuery is somekind of an object (or array perhaps).
The expected value is printed below the next line. It returns the right value when
I use this:
$(this)[0].id
When an element is clicked, Isn't it the element is the one being reference in 'this'?
Why does attr() return an array?
I isolated the code and figured out that the tinymce plugin for jquery is making a conflict. Check out the static.html
https://www.dropbox.com/s/wbk8hxqjw34hzn1/jquery-attr-not-working.7z
Sorry for the archive, Dropbox won't let me upload 9mb and above so I have to compress.

Categories