5

I have dynamic content which is accessible via a index on a side pane, when the user selects a side pane element, I use the id as a mechanism to figure out what data they're referring to, so I can dynamically generate the appropriate data for the main pane.

I was just using a pre-formatted id appended with a number, where the number was the index in an array, thus making unique ids for the html tags. However in certain scenarios I will have conflicts with the numbers, so I've been thinking that using UUIDs would be a way to solve my problem.

However I do not know if there are any issues with using a UUID for a html tag id.

I believe the immediate and quick answer is it should work, based on my knowledge of valid characters and length limitations. Version 4 uses characters 0-9, a-z and - which, afaict are valid characters for a HTML tag id. Also the length doesn't appear to be an issue.

My main concern is are there browser issues that limit the effective size of ids? It's fine running a test and creating a single id with a value of 2d1b8447-e37a-43d8-9f7c-075eac7d9bcc, or even creating a test with multiple. But I cannot test all browsers that will be using the app and it's difficult to test performance over time. My content is very dynamic and tags with these id's can be removed and added over time

I've tried searching for reported issues with large tag ids and found nothing, but absence of issues via Google is not evidence of the absence of any issues.

So... has anyone used UIID's for ids on html tags and if so, are there any issues I need to avoid that you experienced?

I should note that there is evidence that UUIDs have performance issues with indexing (InnoDB) and my concern is that DOM manipulation and using jQuery with id's that are UUIDs may suffer similar issues.

Cheers.

Community
  • 1
  • 1
Metalskin
  • 3,458
  • 5
  • 35
  • 59
  • 1
    Just take out the `-`'s (optional, my preference) and prepend with a character ([for HTML4 compliance](http://www.w3.org/TR/html401/types.html#type-name)). Of course, it might make sense to generate id's that have more semantic bearing. –  Jan 20 '13 at 00:56
  • See [this](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). – BeardFist Jan 20 '13 at 00:58
  • 1
    Ahh thanks guys, I forgot that the id must lead with a alphabetic while uuid is effectively alphanumeric. – Metalskin Jan 20 '13 at 01:00
  • 2
    @Metalskin The restriction was [removed in HTML5](http://stackoverflow.com/questions/10267151/id-and-class-attributes-in-html5). –  Jan 20 '13 at 01:03
  • 1
    restriction never really seemed to cause issues in html4 either – charlietfl Jan 20 '13 at 01:04
  • 1
    @charlietfl "Lenient on input, strict on output". (A good bit of HTML5 is defining/codifying the leniency of HTML4 implenentations.) –  Jan 20 '13 at 01:06
  • 2
    another thing to consider is putting the UUID in a `data-` attribute. Rarely need the actual element ID for css or script when there are so many of them and a common class will handle script and css, but with `data-` attribute have access to original value for any AJAX or user sorting etc – charlietfl Jan 20 '13 at 01:11

2 Answers2

5

Can accomplish same thing using a data- attribute.

Example:

<a href="#" data-UUID="2d1b8447-e37a-43d8-9f7c-075eac7d9bcc" class="product_link">Some product</a>

Read data- attribute with jQuery:

$('.product_link').click(function(){
     var UUID=$(this).data('UUID');
    /* do something with UUID*/
})
charlietfl
  • 164,229
  • 13
  • 110
  • 143
1

I was using a UUID as an element ID and the CSS selector would failed for me as it seems that IDs must start with a letter not a number in order to be able to perform a valid CSS id-selector based query on them.

document.querySelectorAll('#fd759ae2-c0ed-4de5-80fd-932c814a53c7 > div') # works
document.querySelectorAll('#81ea82f5-9a6f-4ae3-93e3-a5ef3579c554 > div') # fails
MichaelJones
  • 1,120
  • 1
  • 11
  • 21