How to add interactive modal dynamically into html with Javascript

Question

let http = new XMLHttpRequest();

http.open('get', 'recipe.json', true);

http.send();



http.onload = function () {

if (this.readyState == 4 && this.status == 200) {

    let products = JSON.parse(this.responseText);


    let output = "";


    for (let item of products) {
        output += `

            <div class="product">
                <img src="${item.imageURL}" alt="${item.imageURL}">
                <p class="title">${item.name}</p>
                </p>
                <button type="button" name="${item.name}" class="btn btn-primary modaltrigger" id="btn${item.name}" data-bs-toggle="modal" data-bs-target="#${item.name}">
                Get Recipe
                </button>
            </div>
            <div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        ${item.data}
                    </div>
                </div>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>              
        `;

    }

    document.querySelector(".products").innerHTML = output;
}
}

$(document).ready(function () {
    $(".modaltrigger").click(function () {
    var id = $(this).attr('name');
    $('#' + id).modal();
});
});

I want to make a dynamic modal for all the products in my json file with help of javascript. When i click on "Get recipe" Button the modal doesn't pops up and i get an error "ARIA hidden element must not contain focusable elements" in Dev tools.

Answer 1

You are not calling your modal function with your modals id.

$("#myModal").modal();

Jquery selector must match modal elements id to modal to show up. And you dont have to create a modal clone for each product you can just change contents of the modal.This will speed up your page loading time.

 let http = new XMLHttpRequest();

http.open('get', 'recipe.json', true);

http.send();



http.onload = function () {

if (this.readyState == 4 && this.status == 200) {

    let products = JSON.parse(this.responseText);


    let output = "";


    for (let item of products) {
        output += `
            <div class="product">
                <img src="${item.imageURL}" alt="${item.imageURL}">
                <p class="title">${item.name}</p>
                </p>
                <button type="button" name="${item.name}" class="btn btn-primary modaltrigger" data-bs-toggle="modal" data-bs-target="#${item.name}">
                Get Recipe
                </button>
            </div>
            <div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    </div>
                    <div class="modal-body">
                        ${item.data}
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                </div>
            </div>              
        `;
    }

    document.querySelector(".products").innerHTML = output;
}
}

$(document).ready(function () {
    $(".modaltrigger").click(function () {
    var id = $(this).attr('name');
    $('#'+id).modal();
});
});

Try this.