Dynamically Added SELECT from JavaScript


Topic: Dynamically Added SELECT from JavaScript

Andrew Ford priority asked 2 weeks ago

Through Javascript I am adding SELECT, in a MODAL.

document.getElementById('addWebSocFieldBtn').addEventListener('click', () => {
      let fieldHtml = '';
      fieldHtml += `<div class="row mb-3">
                    <div class="col-12 col-sm-auto">
                    <label for="" class="form-label visually-hidden">Add Type of Link</label>
                    <select class="select" name="typflnk[]" data-mdb-container="#addWebSocLinksLabel">
                    <option value="1">Website</option>
                    <option value="2">Twitter</option>
                    <option value="3">Twitch</option>
                    <option value="4">LinkedIn</option>
                    <option value="5">GitHub</option>
                    </select>
                    </div>
                    <div class="col-12 col-sm-auto">
                    <label for="" class="form-label visually-hidden">Add Link</label>
                    <input type="text" class="form-control" id="" name="soclinks[]" placeholder="Add Link">
                    </div>
                    </div>`;
      document.getElementById('addWebSocLinksForm').insertAdjacentHTML('beforeend', fieldHtml);
      let mySelect = new mdb.Select(document.querySelector('#addWebSocLinksForm :not(:first-child(.row)) .select'));
    });

I already have one .row-block by default, that SELECT auto-initializes. But these JS-dynamically added blocks with SELECT don't.

When I click to add a new field, I get the error Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#addWebSocLinksForm :not(:first-child(.row)) .select' is not a valid selector.


Edit: It looks like the first SELECT, the one I have hard-coded gets cloned when I click the button.

<div class="col-12 col-sm-auto">
    <label for="" class="form-label visually-hidden">Add Type of Link</label>
    <div id="select-wrapper-537119" class="select-wrapper">
        <div class="form-outline">
            <input class="form-control select-input placeholder-active active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
            <span class="select-arrow"></span>
            <div class="form-notch">
                <div class="form-notch-leading" style="width: 9px;"></div>
                <div class="form-notch-middle" style="width: 0px;"></div>
                <div class="form-notch-trailing"></div>
            </div>
            <div class="form-label select-fake-value">Website</div>
        </div>
        <div id="select-wrapper-461017" class="select-wrapper">
            <div class="form-outline">
                <input class="form-control select-input placeholder-active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true">
                <span class="select-arrow"></span>
                <div class="form-notch">
                    <div class="form-notch-leading" style="width: 9px;"></div>
                    <div class="form-notch-middle" style="width: 0px;"></div>
                    <div class="form-notch-trailing"></div>
                </div>
                <div class="form-label select-fake-value">Website</div>
            </div>
            <select class="select select-initialized" name="typflnk[]" data-mdb-container="#addWebSocLinksLabel">
                <option value="1">Website</option>
                <option value="2">Twitter</option>
                <option value="3">Twitch</option>
                <option value="4">LinkedIn</option>
                <option value="5">GitHub</option>
            </select>
        </div>
    </div>
</div>

kpienkowska staff answered 1 week ago

If you add select class to element it will init via HTML. If you then use class .select as selector to find select components for init and perform init via JS you will have double init.

If I was to init select added with JS I wouldn't do it with query selector with query to document but using variable I've already declared in ma JS file. In your example that would be some child of fieldHtml.


Andrew Ford priority commented 1 week ago

I will be honest, I didn't 100% understand your answer. But I did get my issue fixed, and is working how I want it to. In the HTML-in-JS, I am using .select-new instead of .select, then right after the row gets added I replace .select-new with .select.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No