Search code examples
javascriptjqueryrazor

Populating Modal on Edit/Update

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

enter image description here

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

Solution

  • 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 ..
    }
  })
})