Select to view content in your preferred language

Calcite RadioButtons added as innerHTML to a <div> container throws error in JavaScript

177
1
10-31-2024 10:21 AM
Dirk_Vandervoort
Frequent Contributor

I have a JavaScript application that dynamically appends the DOM in code with HTML that includes Calcite radio buttons.

There is a target container in the DOM:

document.getElementById("my-html-container");

I want to hydrate the container with HTML that exists as a string in the code (theHTML):

<calcite-radio-button-group name="Options" id="my_options" layout="vertical">
    <calcite-label layout="inline">
        <calcite-radio-button value="trees"></calcite-radio-button>
        Trees
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="shrubs"></calcite-radio-button>
        Shrubs
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="flowers"></calcite-radio-button>
        Flowers
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="groundcover"></calcite-radio-button>
        Groundcover
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="bushes"></calcite-radio-button>
        Bushes
    </calcite-label>
</calcite-radio-button-group>

In Javascript&colon;

document.getElementById("power360-jxdm-container").innerHTML = theHTML;

 HOWEVER: the following gets thrown to the console when the above line executes:

Dirk_Vandervoort_0-1730394807552.png

The DOM gets hydrated successfully and the radio buttons are fully operational.

I would like to get rid of this error, which is apparently buried in ArcGIS code. What can I do?

TIA

 

0 Kudos
1 Reply
MattDriscoll
Esri Contributor

Hello! can you help us reproduce this error? I tried to replicate but i'm not seeing it:

 

https://codepen.io/driskull/pen/abeKZVy

0 Kudos