Can I use UUID for HTML tag id without any problem?
I have dynamic content available via a sidebar index when the user selects a sidebar item. I use the ID as a mechanism to determine what data they are referring to, so I can dynamically generate the appropriate data for the main panel.
I just used a preformatted ID appended with a number where the number was an index in the array, thus creating unique IDs for the html tags. However, in some scenarios I will have conflicts with numbers, so I thought that using a UUID would be the way to solve my problem.
However, I don't know if there is any problem using the UUID for the html tag id.
I believe the immediate and quick answer is that it should work based on my knowledge of valid characters and length constraints. Version 4 uses the characters 0-9, az and - , which, afaict, are valid characters for an HTML tag identifier. Also length is not a problem.
My main concern is browser issues limiting the effective size of ids? It works great with test and creates a single ID with a value, 2d1b8447-e37a-43d8-9f7c-075eac7d9bcc
or even creates a test with multiple. But I cannot test all the browsers that the application will use and it is difficult to test performance over time. My content is very dynamic and tags with this ID can be removed and added over time
I tried searching for messages about problems with large tag ids and found nothing, but no problem via Google does not indicate there are no problems.
So ... has anyone used UIIDs for ids in html tags, and if so, are there any issues I need to avoid that you experienced?
It should be noted that there is evidence that UUIDs have performance issues with indexing (InnoDB) , and I am concerned that DOM manipulation and jQuery's use of id, which are UUIDs, may suffer from similar issues.
Greetings.
source to share
You can accomplish the same thing using the attribute data-
.
Example:
<a href="#" data-UUID="2d1b8447-e37a-43d8-9f7c-075eac7d9bcc" class="product_link">Some product</a>
Read the attribute data-
with jQuery:
$('.product_link').click(function(){
var UUID=$(this).data('UUID');
/* do something with UUID*/
})
source to share