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

Dirk_Vandervoort — Thu, 31 Oct 2024 17:21:50 GMT

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:

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

Re: Calcite RadioButtons added as innerHTML to a
container throws error in JavaScript

MattDriscoll — Fri, 01 Nov 2024 17:21:10 GMT

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

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

topic Calcite RadioButtons added as innerHTML to a <div> container throws error in JavaScript in Calcite Design System Questions

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

Re: Calcite RadioButtons added as innerHTML to a container throws error in JavaScript

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

Re: Calcite RadioButtons added as innerHTML to a
container throws error in JavaScript