Error: [DOM] Found 7 elements with non-unique id #x1522080126216:

Webix JS
#1

Hi, I really like the Webix product. But I am still trying to transition my current site over to it and having little difficulty.
I need to integrate ‘activeContent’ (view switch) within each Datatable row and user should be able to click on/off. And there can only be one ‘ON’ at a given time in the entire datatable. But right now when you try to click on one of the switch buttons it jumps right back to the top (because of the non-unique ID) and the switch button is not working as intended. Try clicking on the Third row.

Please see this code snipped example for more details:
https://snippet.webix.com/3v7js4k1

NOTE: for the switch ID I have even tried using a this option
id: function(){Math.round(new Date().getTime() + (Math.random() * 100));},
This still uses the same ID across all the rows…

#2

Also, would it be possible to integrate another jQuery type switch control in the Datatable something like → Flip Toggle Switch - jQuery Mobile Demos

#3

Hello,

Yep, I can confirm the issue with Webix switch button. The fix will be available in the next update, but if you need it ASAP and have support subscription, please contact support@webix.com.

But please note that when using UI switch as an active element of data components, you will lose its animation since the data row is re-painted to reflect the new cell value.

Also, active content elements have equal IDs by design as in fact the same control is rendered in each row - but its scope is limited, so it is not the IDs that cause the described issue.

#4

Hello, Helga. Thanks for the reply.
I am still in the trial period trying to see if Webix is a fit for our project. So, at this point I am ready to give up the switch UI with the checkbox control. I have been trying everything possible and I can’t figure out a solution for the non-unique id issue. If you don’t mind, can you please update my snippet with a working checkbox version. no matter what I do with the ActiveContent I always get a non-unique ID.
Your online datatable activecontent demos look simple and in working condition. I am trying to follow the same examples but I can’t get it to working. At this point I don’t know what else to do. I am stuck.

Here are my requirements:

  • need to show checkbox with each datatable row
  • There should only be one checkbox selected. in the entire DataTable. (note: we can’t use radio buttons - since a row can be checked as ON or checked off as OFF)

Thank you,
HSDev

#5

Here you are: https://snippet.webix.com/up5l84qn

You needn’t use active content for this task: just render Font Awesome checkboxes within an HTML template returned by a function, and update the item in the CSS click handler.

#6

Helga! Thank you for the super fast reply. This is a start. I’ll continue from here. I am sure this will be beneficial for others.

thank you