Search code examples
javascriptjqueryhtmlhtml-listsuid

How can I tie a String value to a <li>-tag, as a hidden parameter?

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 come 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.

Solution

  • 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.