Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hello,
I'm developing one of my first extensions and it works as long as it is the only instance of said extension on the page. However, when I have multiple extensions on the same sheet, my eventlisteners start acting up. I've included the specific rows of code which confuses me:
$element.html(
'<li class="lui-list__item" id="myCheckbox">'+
'<input type="checkbox" id="myCheckbox" class="myClass"/>'+
'<label for="myCheckbox" class="lui-list__text" id="myCheckboxLabel">abc'+
'<span class="lui-icon lui-icon--tick" aria-hidden="true">'+
'</label>'+
'</li>'+
'<li class="lui-list__item" id="otherCheckboxLi">'+
'<input type="checkbox" id="otherCheckbox" class="advancedCheckBoxes"/>'+
'<label for="otherCheckbox" class="lui-list__text" id="otherCheckboxLabel">cde'+
'<span class="lui-icon lui-icon--tick" aria-hidden="true">'+
'</label>'+
'</li>');
Hi @johannaalmm one way for fixing this is to set a unique id to your HTML. Instead of using "myCheckBox" you could concatenate your visualization ID, something like "Gthye_myCheckBox". You can get visualization ID from layout object, under layout.qInfo.qId).
Hello @alex_colombo!
I have tried that, but no luck... Even with the included objectID, which is put together like:
$(""+layout.qInfo.qId+"myCheckBox").find('#myCheckbox').on("change",function(e) {});
This is HTML stuff, not related to the extension itself. Please check your HTML code and see if you are pointing to the correct checkbox.
Try to print into console $(""+layout.qInfo.qId+"myCheckBox").find('#myCheckbox') and check if you are selecting the correct HTML. Then, you can also try to use native JS intead of Jquery using addEventListener