[bug]: Invalid element ids when using multi-views #589
Description
No existing issues.
- There is no existing issue for my problem.
Describe the bug
When using multi-views option on widgets, the html element id ist created by cominging view name and widget id. This will cause issues when querying for elements in js if the view name starts with a number because that is not allowed:
https://www.w3schools.com/html/html_id.asp
Second note:
Possible solution, add prefix to view name in code. Like 'w' for widgets maybe 'v'.
To Reproduce
1, Go in vis 2 editor
2. Create two views, one starting with a number
3. Create a widget in the view with the number at the beginning
4. Set multi-views option to show the widget in the second view
5. Go in runtime and try to use querySelector or closest with the combined widget id
Example:
document.querySelector('#10_test_w000164')
-> Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#10_test_w000164' is not a valid selector.
at :1:10
document.querySelector('body').closest('#10_test_w000164')
-> Uncaught SyntaxError: Failed to execute 'closest' on 'Element': '#10_test_w000164' is not a valid selector.
at :1:32
Expected behavior
Elements should have valid ids e.g. v10_test_w000164 and not 10_test_w000164
Screenshots & Logfiles
Page or affected widget
Adapter version
2.13.8
js-controller version
7.1.0
Node version
22.17.0
Operating system
Windows 11
Additional context
No response