Hacker News Reader

Comment by sergiotapia | Hacker News Reader

So you would need to update

    data-progrecss="X"

using JS or whatever at each "progress step" update.

View on HN

Yeah sorry if this piece is unclear, I could maybe add some more instruction if that would help??

I wanted to make the demo page as minimalist as possible. Maybe I will just add (using js) after step three.

But yes you can use js, something like

      $('.myprogrecss').attr('data-progrecss', <PERCENT>); (if using jQuery)

Or I believe

       Document.getElementById('myProgrecss').setAttribute('data-progrecss', <PERCENT>);

DISCLAIMER, this code just popped out of my head so it's probably not quite correct but near abouts.

EDIT: I've added that little piece to the demo page.

If using jQuery this would be better:

    $('.myprogrecss').data('progrecss', 60);

Sorry, my bad, that is correct.

Thanks!

I don't believe $.fn.data is symmetric with respect to get and set. This will update an in memory cache of "data-*" values only, leaving the corresponding DOM attribute untouched.

I don't know why jq does this.

Guessing, but it's probably because $.fn.data is meant as a storage mechanism, not a DOM manipulation mechanism. Changing the DOM attribute would make it just that tiny bit more expensive and you can already use $.fn.attr to do the same thing.

Thanks for this saraid216 :)

It's always good to know things like this.

Thanks again!

$.data is tightly bound to the DOM however - much of jQuery is, in order to reduce developer friction - so this is just more jQuery api asymmetry IMO.

To your point, performance is noble goal. Having some asymmetry is no big deal.

Yeah now this rings a bell I did have a go at using it like this before but the DOM didn't update as mentioned so I reverted to using it how I wrote above.

Thanks

I think jq's data methods allow you to store any type of object. So in the example above, '60' would be stored as a Number and not a String. When you extract it, you would get the Number and this helps if you want to do any math on the value.

Since you can't really set element attributes to non-string values, trying to sync the 'data' values with element attributes raises all sorts of unwanted problems.

You can also just set dataset[0] on the raw element:

    document.getElementById('myProgrecss').dataset.progrecss = '<PERCENT>';

[0]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...

Hey woogley,

Thanks for that :) I was actually unaware of that method and I prefer that style if I'm honest.

Thanks!

Reply on news.ycombinator.com