I want to know how i can refresh a modal and display it after update data with Ajax call-CodePudding

/ $.ajax({ type: "Post", url: '@Url.Action("ModifierPM", "Mode")', data: data, contentType: false, processData: false, success: function (response) {

     $("#modalModifPM").modal('hide');
     $("#modalTMRs").modal('show');/// i want to show data there in this Modal within refresh all the page , just the MODAL 
    }

});

CodePudding user response：

If your response comes from a Parital View Result (that's mean, your response is html text), you can put all of the response into the modal body;

$.ajax({
  type: "Post",
  url: '@Url.Action("ModifierPM", "Mode")',
  data: data,
  contentType: false,
  processData: false,
  success: function (response) {
       $("#modalModifPM").modal('hide');
       // this line finds the modal body in two step and puts the response data inside of it
       $("#modalTMRs").find(".modal-body").html(response);
       $("#modalTMRs").modal('show');
    }
});

As you seen in the comment line, there are more and better ways to find modal body. For example;

$("#modalTMRs .modal-body").html(response); // one space between parent and child

Another way is to write an id directly to modal body div and find it via id; If your modal html like below;

<div id="modalTMRs"  tabindex="-1" role="dialog">
<div  role="document">
<div >
  <div >
    <h5 >Modal title</h5>
    <button type="button"  data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div  id="modalTMRs-modal-body">  THATS THE ID
    <p>Modal body text goes here.</p>
  </div>
  <div >
    <button type="button"  data-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>

Then you can reach in one step;

$("#modalTMRs-modal-body").html(response);

Examples can be more.. :P

If yuor response just Json list then you can convert it a table client side;

 var exampleJsonResult = [
    { "id":1, "name":"test1", "statu":"OK" },
    { "id":2, "name":"test2", "statu":"OK" },
    { "id":3, "name":"test3", "statu":"OK" },
 ];

And result function can be like this;

 function makeTable(json) {
    let htmlTable = "<table>";
    json.forEach(item=>{
      htmlTable  = "<tr>";
      htmlTable  = "<td>"   item.id   "</td>";
      htmlTable  = "<td>"   item.name   "</td>";
      htmlTable  = "<td>"   item.statu   "</td>";
      htmlTable  = "</tr>";
    });
    htmlTable  = "</table>";
    return htmlTable;
 }

When you send result data to this function, this will give you a table. Next step, append the table where ever you want, like explained above.

In this sample, you have to know data model and call values by name.

If you want to make more elastic table maker, you must change the response model like this;

 var exampleJsonResult2 = [
    [ 1, "test1", "OK", 234.2 ],
    [ 2, "test2", "NO", 345.6 ],
    [ 3, "test3", "OK", 456.7 ],
    [ 4, "test4", "NO", 678.9 ],
 ];

This json is a list of list, made from each item is a object list. The advantage is this model; you can iterate via loops, no need to know property names.

 function makeTable2(json) {
    let htmlTable = "<table>";
    json.forEach(item=>{
      htmlTable  = "<tr>";
      item.forEach(prop => htmlTable  = "<td>"   prop   "</td>");
      htmlTable  = "</tr>";
    });
    htmlTable  = "</table>";
    return htmlTable;
 }

makeTable2(exampleJsonResult2) is the table string!