在 Edit/Update 上填充模态

Question

我在尝试 edit/update 持久化内容时遇到了一些问题。基本上，当我点击编辑时，我会在模态面上显示一堆 JSON，如下所示

我正在从数据表中触发一个 bootstrap 模式，下面的代码是我目前正在尝试的

 $(document).ready(function () {
        $("#EditModal").on("show.bs.modal", function (e) {
            var link = $(e.relatedTarget);
            $(this).find(".modal-body").load(link.attr("href"));
        })
    })

下面是我如何调用数据表锚标记内的模式

 {
                "data": "id",
                "render": function (data) {

                    return `
                            <a href="http://someurl/record/2"  data-toggle="modal" data-target="#EditModal" style='cursor:pointer'class='text-success'><i class="fas fa-edit text-success ml-3 mr-2"></i>Details</a>    
                        `;
                }, "width": "7%", "font-size": "9px"
            },

我知道这是非常错误的，但我不确定如何在我的模态输入字段中显示数据值并显示标签等...任何帮助将不胜感激

Answer 1

正如我在评论中所说，您可以在此处使用 ajax，因为您的服务器 returns json 作为响应，然后在 ajax 成功后您可以操作您的 html。因此，ajax 的代码如下所示：

$("#EditModal").on("show.bs.modal", function(e) {
  var selector = $(this)
  var link = $(e.relatedTarget);
  $.ajax({
    type: "GET", //change this if needed to post
    url: link.attr("href"), //your link
    dataType: "json", //json because server return json
    success: function(data) {
      console.log("result will come here")
      console.log(data.data.id) //access it like this 
      console.log(data.data.surname) //etc..etc
     selector.find(".modal-body").text(data.data.id) //add result inside your dom like this ..
    }
  })
})

在 Edit/Update 上填充模态

Populating Modal on Edit/Update

javascript

jquery

razor