Отображение модального в динамически сгенерированном клике строки таблицы, содержащей данные из соответствующей строки

Question

У меня есть динамически сгенерированная таблица, основанная на размере ответа JSON от моего вызова AJAX.То, что я хочу сделать, это иметь модальный режим, который отображает дополнительные данные при нажатии на строку таблицы.Это было бы легко сделать, если бы оно было жестко запрограммировано, но, видя, как данные на моей странице генерируются всякий раз, когда страница перезагружается при вызове базы данных, я не могу понять, как передать данные в модальный режим.

До сих пор я пытался использовать один модальный вид, а затем использовать .addAttribute и .appendChild для передачи информации в модальный режим, но это не работает, и модальный режим пуст.Я подозреваю, что это происходит из-за того, что модал загружается одновременно со страницей, поэтому он никогда не заполняется, даже если я нажимаю кнопку.

Мой модал:

<div id="modalDisplay" class="modal">
    <div id="modalDisplayContent" class="modal-content">
        <span class="close" onclick="onClickGetSpan()">&times;</span>
        <div id="formDisplayContent" class="modalContent">
        </div>
    </div>
</div>

Моя функция, которая вызывается при каждом щелчке строки таблицы:

function getSingleTask(id){
    var taskName = "";
    var taskDescription = "";
    $.ajax(
        {
            url: "http://localhost:8080/tasks/" + id,
            type: "GET",
            dataType: "JSON",
            success: function(){

                taskName = data.name;
                taskDescription = data.description;
                var nameTitle = document.createElement("H2");
                nameTitle.setAttribute("value", name);

                var description = document.createElement("P");
                description.setAttribute("value", taskDescription);

                document.getElementById("formDisplayContent").appendChild(nameTitle);
                document.getElementById("formDisplayContent").appendChild(description);
            },
            error: function () {
                var noNameTitle = document.createElement("H2");
                noNameTitle.setAttribute("value", "Error finding task! Try again!");
                document.getElementById("formDisplayContent").appendChild(noNameTitle);
            }
        }
    )

    var modal = document.getElementById("modalDisplay");
    modal.style.display = "block";

}

Я всегда мог создавать модалы вместе со своей таблицей для каждой строки, сортировать их по идентификаторам, а затем открывать соответствующий модал, когда строка таблицынажата.Но прежде чем я углублюсь в это, я хотел посмотреть, сможет ли кто-нибудь придумать лучшие решения, возможно, с использованием моего нынешнего подхода.Заранее спасибо.

Answer 1

Вот мой обычный код:

<div id="myModal" class="modal">
    <div id="modal-dialog" class="modal-content">
        <span class="btn"></span><br/>
        <span id="changethis"></span>
    </div>
</div>


function btnFromTableRows() {
    $.ajax( {
        url: "http://localhost:8080/main/",
        type: "GET",
        dataType: "JSON",
        success: function(){
            mydata = "<div class='container'>This is a sample container</div>";
            document.getElementById("changethis").innerHTML = mydata;
        },
        error: function () {
            mydata = "<h2>Invalid data</h2>";
            document.getElementById("changethis").innerHTML = mydata;
        }
    }
}