Question

我有一个动态生成的表，该表基于来自我的AJAX调用的JSON响应的大小。我想做的是有一个模态，当单击表行时显示其他数据。如果它是经过硬编码的，这将很容易做到，但是看到通过调用数据库重新加载页面时如何生成页面上的数据，我似乎无法弄清楚如何将数据传递给模式。

到目前为止，我已经尝试过使用单个模式，然后使用.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";

}

我总是可以与表格一起为每行创建模态，让它们按ID排序，然后在单击表行时打开相应的模态。但是在我深入探讨之前，我想看看是否有人可以提出一个更好的解决方案，也许涉及到我目前的方法。预先感谢。

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;
        }
    }
}

在动态生成的表格行点击上显示模式，其中包含来自相应行的数据

1 个答案: