1

I want to assign a custom value to an element. It seems that .attr(customName, value) will work fine for this. If the attribute doesn't exist (it won't) jQuery creates it and lays in the value I provide. Later I'm able to read the value with .attr(customName), as if it were a normal HTML-known attribute. I know there's an HTML5 .data() method for this kind of thing but it's not persistent. If I move the html off to a disk and then retrieve it, anything set with data() will be gone, while .attr() goes right into the HTML.

I don't see in the .attr() documentation where it's guaranteed to create a new attr name if it doesn't recognize what you give it, so I'm a bit nervous. Is it safe to use .attr() this way? Thanks.

Steve
  • 4,534
  • 9
  • 52
  • 110
  • 2
    _"I know there's an HTML5 .data() method for this kind of thing but it's not persistent. If I move the html off to a disk and then retrieve it, anything set with data() will be gone, while .attr() goes right into the HTML."_ Uhhh, what? – j08691 Aug 14 '13 at 16:10
  • Neither save to html, if I understand your statement correctly. Exactly what are you hoping to achieve? – Kai Qing Aug 14 '13 at 16:13
  • *"if _it_ doesn't recognize"* What's it? There is nothing recognizing those strings AFAIK, only the browser parsing them, but the DOM stays the same, recognized or not, so feel free to add anything. – Trylks Aug 14 '13 at 16:13
  • 1
    @j08691 I believe @Steve is referring to the behavior that jQuery `data()` will read from HTML5 data attributes, but it will not write back to them. – nullability Aug 14 '13 at 16:20
  • 1
    If you're relying on modified HTML to save persistent data, you're doing something wrong anyway. – JJJ Aug 14 '13 at 16:27
  • Let's see if I can be clearer. The HTML I'm creating will be written to the server and accessed later as a normal .html file. When you add data with data() it just goes into a local cache with a link to the element, so when you shut off the computer it's gone. The attribute I add needs to be present when the file is brought down later by a browser, and this will occur if I use .attr(): the actual HTML becomes, for example, pop = 'steve'. By "if it doesn't recognize" I mean if the .attr() method doesn't recognize the attribute name you provide . . . – Steve Aug 14 '13 at 16:38
  • @Steve a good place to explain this would be... in the question itself! – Christophe Aug 14 '13 at 16:46

3 Answers3

1

You should be using data to create custom attributes. It works cross browser using .data() and you can keep it in your markup so it doesn't get reset. Nettuts Data Attr Article

E.g.

<a href="#" data-custom-description="lorum ipsum">tool tip</a>

$('a').data('custom-description'); -> returns lorum ipsum

Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
  • 1
    If you update `data()`, however, it will not update the DOM. jQuery will only read initial values from HTML5 data attributes, after that all data is stored in jQuery's cache. See http://stackoverflow.com/questions/2446098/how-does-jquery-store-data-with-data – nullability Aug 14 '13 at 16:22
1

You should not use attr() to create an attribute which is not in the HTML specification as it will render your page invalid, and lead to other problems.

I assume what you mean by .data() not being persistent is that the values do not appear in the rendered source, as they are kept in a cached object which jQuery holds.

What you instead can do is set your data attributes using attr():

$('#foo').attr('data-bar', 'wibble');
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
1

Yes, you can do that. It won't be valid HTML, however. What you would be doing is creating a new fork of XHTML. You could create your own DTD to validate against, but that's probably not necessary.

Just keep in mind that you may run into issues with some browsers (especially older versions of IE). However, most browsers will just ignore unknown attributes and you would therefore be free to do with them what you please. Whether or not you care that your HTML is invalid is your call, but for practical purposes it would work fine as long as you avoid certain reserved attribute names (like id or class).

You might want to take a step back and re-evaluate what you are trying to accomplish, however, since there are probably better ways of storing persistent data in your document.

nullability
  • 10,545
  • 3
  • 45
  • 63
  • "there are probably better ways of storing persistent data in your document" Such as . . . – Steve Aug 14 '13 at 16:53
  • @Steve Without more details about your application I can't really answer that, but possibilities include HTML5 Web Storage. – nullability Aug 14 '13 at 17:33