How to add interactive modal dynamically into html with Javascript-CodePudding

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 >
                <img src="${item.imageURL}" alt="${item.imageURL}">
                <p >${item.name}</p>
                </p>
                <button type="button" name="${item.name}"  id="btn${item.name}" data-bs-toggle="modal" data-bs-target="#${item.name}">
                Get Recipe
                </button>
            </div>
            <div  id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div >
                <div >
                    <div >
                        ${item.data}
                    </div>
                </div>
                </div>
                <div >
                <button type="button"  data-bs-dismiss="modal">Close</button>
                <button type="button" >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.

CodePudding user response：

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 >
                <img src="${item.imageURL}" alt="${item.imageURL}">
                <p >${item.name}</p>
                </p>
                <button type="button" name="${item.name}"  data-bs-toggle="modal" data-bs-target="#${item.name}">
                Get Recipe
                </button>
            </div>
            <div  id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    </div>
                    <div >
                        ${item.data}
                    </div>
                    <div >
                    <button type="button"  data-bs-dismiss="modal">Close</button>
                    <button type="button" >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.