topic Re: $element not working to find ID of html-elements in Integration, Extension & APIs

$element not working to find ID of html-elements

johannaalmm — Wed, 14 Feb 2024 11:26:06 GMT

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>');

console.log($element.find("#myCheckbox"));

$element.find('#myCheckbox').on("change",function(e) {

console.log(layout.qInfo.qId)

if($element.find('#myCheckbox').checked == true) {

$element.find("#otherCheckboxLi").addClass("lui-disabled");

}

else {

$element.find("otherCheckboxLi").removeClass("lui-disabled");

}

});

When the paint methods is executed the first time, the first console.log prints out the individual checkbox of each extension. However, when I click the checkbox in the second extension, the action is performed in the first. In the console.log of the extensions ID, the ID of the first extension is printed, not of the one I clicked the checkbox in.

I thought using $element ensured that the code would operate within the specific instance of the extension, but am I missing something? How should I define the event listener I have bolded above in such way so it is applied in the specific instance of the extension?

Re: $element not working to find ID of html-elements

alex_colombo — Thu, 22 Feb 2024 14:00:22 GMT

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).

Re: $element not working to find ID of html-elements

johannaalmm — Fri, 23 Feb 2024 07:01:24 GMT

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) {});

Re: $element not working to find ID of html-elements

alex_colombo — Fri, 23 Feb 2024 08:54:26 GMT

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