I am extracting data from a database that I do not administer. It is a single list, and the important values are:

• Folder Name
• Index Integer
• UID (unique identification) String
• Filename

I have successfully created a Tree-structured browser, based on a model using <ul> and <li> tags. I had also implemented action listeners on double click, that found the id, and acted accordingly. The identifications were stored, and found as a value-parameter to the individual <li>'s that represented the leaves, or filenames.

However it turns out that the Index numbers are not unique. I expected them to be, even though there were a column for UID's. I tried to set the value to be the UID String. It works in my browser, as a snippet of my generated HTML code shows:

<li role="treeitem" value="1581f20c-0ef9-4c21-a8ab-a407da310cf5" ... >

However, when I retrieve the value, and save it to database, it only gets the numeric value that appears ahead of the first non-numeric character. In this case 1581. I've checked, and e to the conclusion that the value-parameter only accepts numeral values, which really sucks for me...

Are there any other ways to tie a non-displayed UID String to a HTML-list element?

EDIT 2:

I removed my previous edit, due to a realization of what my misunderstanding was. Custom data tags needs the syntax "data-variablename", and when retrieving it, I should ommit the "data-", and just get the variablename.

I am extracting data from a database that I do not administer. It is a single list, and the important values are:

• Folder Name
• Index Integer
• UID (unique identification) String
• Filename

I have successfully created a Tree-structured browser, based on a model using <ul> and <li> tags. I had also implemented action listeners on double click, that found the id, and acted accordingly. The identifications were stored, and found as a value-parameter to the individual <li>'s that represented the leaves, or filenames.

However it turns out that the Index numbers are not unique. I expected them to be, even though there were a column for UID's. I tried to set the value to be the UID String. It works in my browser, as a snippet of my generated HTML code shows:

<li role="treeitem" value="1581f20c-0ef9-4c21-a8ab-a407da310cf5" ... >

However, when I retrieve the value, and save it to database, it only gets the numeric value that appears ahead of the first non-numeric character. In this case 1581. I've checked, and e to the conclusion that the value-parameter only accepts numeral values, which really sucks for me...

Are there any other ways to tie a non-displayed UID String to a HTML-list element?

EDIT 2:

I removed my previous edit, due to a realization of what my misunderstanding was. Custom data tags needs the syntax "data-variablename", and when retrieving it, I should ommit the "data-", and just get the variablename.

• javascript
• jquery
• html
• html-lists
• uid

• 4 Can't you create custom data tags? – cr0ss Commented Jun 16, 2014 at 12:57
• $(li).data("value", $value-string); ? – Alex Commented Jun 16, 2014 at 12:58
• If your clients are all using up-to-date browsers, you could try the "data" attributes. For instance: <li role="treeitem" data-UID="1581f20c-0ef9-4c21-a8ab-a407da310cf5" ...> – DevlshOne Commented Jun 16, 2014 at 12:59
• WOW, that was a lot of answers, and fast! I was unaware of the option of defining custom data tags in HTML, and I am extremely happy to learn about them. I need to make it patible for IE8, so I'll read about it's support before setling on a solution, and accepting an answer. – jumps4fun Commented Jun 16, 2014 at 13:04

4 Answers 4

The value property of <li> elements is an ordinal value and is exclusively used in <ol> context (i.e. numbered lists).

Instead, you can add this piece of information as a data item:

<li role="treeitem" data-value="abc-foo-bar" ...>

Then, use this to access the value again:

$(el).data('value')

See also: .data()

jQuery adds a special property to each element that uniquely identifies an object in "reserved" memory that will contain your data, so you don't have to worry about overwriting anything of the element itself.

value is already an html attribute. So the browser try to fix your value when you use it. Try to use a custom attribute like data-value :

<li role="treeitem" data-value="1581f20c-0ef9-4c21-a8ab-a407da310cf5" ... >

Try this:

HTML:

<li data-uid="[your-UID-here]">

jQ:

$("li").data("uid");

You can make use of jQuery .data() function.

$(element).data(key, value)