2

I'm having trouble updating elements from JavaScript. My project is fairly complex but here's a tiny piece of it:

myWebService(/*...*/)
.done(function (result) {
    var newRows = $(rows).clone();
    $('#drop-placeholder').after(newRows);
    $(newRows).data('test', 'ZZZZZZZZZZZZZZZZZZZZZZZ');
}

Using Chrome, I can watch these statements execute. However, with newRows in the watch window, I can see that the attribute never gets added/updated. And, sure enough, after the call is done, I don't see the specified attribute on my page.

Can anyone see what I might be missing. rows (and therefore newRows) represents any number of table row elements.

Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • 1
    FYI, `newRows` is already a jQuery object. You don't have to pass it to jQuery *again*. What do yo mean by *"I don't see the specified attribute on my page"*? How are you trying to "see" it? – Felix Kling Mar 27 '13 at 22:50
  • Are you saying I can just do `newRows.data()`? I thought `$()` gave me additional options. (I was trying to see it by examining the elements in Chrome.) – Jonathan Wood Mar 27 '13 at 22:52
  • Yep. `.clone` returns a jQuery object, as does `$()`. If you already have a jQuery object, you don't have to pass it to `$()` again (the same might be for `rows`, but I don't know what it is). You usually do `$('div')` instead of `$($('div'))` right? :) – Felix Kling Mar 27 '13 at 23:03

2 Answers2

9

.data() sets background data that is handled purely by jQuery - it does not set HTML attributes.

If you are trying to set an attribute such as data-test in <div data-test="stuff"></div> you need to use .attr("data-test", variable).

Ken Herbert
  • 5,205
  • 5
  • 28
  • 37
2

The setting the data via jQuery .data() does not set the attribute, only the underlying data store. If you want to change the attribute, you have to use .attr().

jmoerdyk
  • 5,544
  • 7
  • 38
  • 49