在编辑/更新时填充模态

Question

I am having a bit of an issue when trying to edit/update the persisted content. Basically when i hit edit I get a bunch of JSON displayed on the modal face as below

I am fireing a bootstrap modal from within datatables and the below piece of code is what i am currently trying

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

The below is how i am calling the modal inside the datatables anchor tag

 {
                "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"
            },

I know this is massively wrong, but I am unsure how to display the values of the data inside my modal input fields and have labels displayed etc... any help would be greatly appreciated

Answer 1

As i already said in comments you can use ajax here because your server returns json as response then inside ajax success you can manipulate your htmls. So, your code for ajax will look like below:

$("#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 ..
    }
  })
})