Problems setting HTML5 attribute values with jQuery

Question

I am currently making a list of items of downloaded and not downloaded files with jQuery mobile and Phonegap.

Everything seems to work OK, but I am simply unable to set value to my attribute data-status.

I am looping through a list of filenames in a JSON to check if they exists, and this works well. This is what happens for each file:

var $li;
$li = $("<li><a href='#' data-status='Not downloaded'>"+val.title+"</a></li>");

Then if the file is found on the system:

$li.find("a").on("click", function(){ openPdf(val.title); }); // a click handler added
$li.find("a").setAttribute('data-status', 'Downloaded'); // This is where something is wrong.

For each file, the $li is appended to the ListView. Then after the whole loop process:

$("#linkList")
            .listview({
            autodividers: true,
            autodividersSelector: function (li) {
                        var out = li.find('a').data("status");
                        return out;
                        }
                    }).listview('refresh');

So, any ideas why the attribute data-status isn't being changed to "Downloaded"?

Joel A. Villarreal Bertoldi · Accepted Answer · 2015-04-05T00:30:53.500

2

You should use the following:

$li.find("a").data('status', 'Downloaded');

If you must use setAttribute, then go with attr():

$li.find("a").attr('data-status', 'Downloaded');

edited Apr 05 '15 at 00:30

answered Apr 05 '15 at 00:24

Joel A. Villarreal Bertoldi

7,829
8
35
51

I tried that one first, but somehow they all end up sorted as "Not downloaded". So it looks like they are not changed. – janlindso Apr 05 '15 at 00:27
1

that is the correct way to use data attribute with jQuery. you should try on this. – tanaydin Apr 05 '15 at 00:30
Added another example using `attr` as an alternative. – Joel A. Villarreal Bertoldi Apr 05 '15 at 00:31
Yes this works. It seems like my problem was elsewhere. I had a `window.resolveLocalFileSystemURL(fileSource + val.title + ".pdf", success, fail);` to check for the file and it seems like it was a delay there so the $li was appended before the attribute was set. – janlindso Apr 05 '15 at 00:38

score 2 · Answer 2 · edited May 23 '17 at 12:06

2

$li.find("a")

return a jQuery object known as the "wrapped set," which is an array-like structure that contains all the selected DOM elements

$li.find("a")[0].setAttribute

it contain good description about jQuery Selector

edited May 23 '17 at 12:06

Community

1
1

answered Apr 05 '15 at 00:27

Omidam81

1,887
12
20

Problems setting HTML5 attribute values with jQuery

2 Answers2