Create from document.createElement

[cwolcott]

Your examples show creating the toggle from a previous created input.

<input type="checkbox" id="toggle-two">

<script>
    document.querySelector('#toggle-two').bootstrapToggle({
        onlabel: 'Enabled',
        offlabel: 'Disabled'
    });
</script>

I need to dynamically create elements and turn them into toggles. Any suggestions because the code below give the error:
Uncaught TypeError: assayToggle.bootstrapToggle is not a function

<script>
    const assayToggle = document.createElement('input');
    assayToggle.type = 'checkbox';
    assayToggle.bootstrapToggle({
        toggle: 'Toggle',
        size: 'sm',
        width: 78,
        style: 'slow',
        onlabel: 'Open',
        offlabel: 'Closed',
        onstyle: 'activeAssay',
        offstyle: 'inactiveAssay',
    });
</script>

[palcarazm]

Hi,

You should add the input to DOM and then transform it to a toggle.

The plugin do not replace the reference of the input, the input is preserved wrapped into the toggle.

Here a live demo https://codepen.io/palcarazm/pen/ExGKqaB

// Create input
const toggle = document.createElement("input");
toggle.type = "checkbox";

// Add input to DOMM
const parentNode = document.querySelector("section");
parentNode.appendChild(toggle);

// Transform to toogle
toggle.bootstrapToggle();

[cwolcott]

Thank you very much. I have been using the plugin for a while. This is the first time creating it dynamically.

I really like the look and feel. The toggle allows the user to see just the Open or Closed assay selections instead of a long, long list. Most of the time they are only concerned with the Open assays (smaller list).

BootstrapToggle.implementation.mov

[palcarazm]

It look nice!