Is there a different way to pass data between modals?-CodePudding

I have a view and edit modal with data being passed from view to edit. However, when a record is passed for one record, the data is then persisted and isn't overwritten.

User clicks "view" record 1, then clicks "edit" record 1 -- data for record -1- displayed

User clicks "view" record 2, then clicks "edit" record 2 -- data for record -1- displayed

Data for record -2- should appear

Suggestions?

$(document).ready(function () {
  $("#viewModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    var record_obj = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Viewing Record #"   record_obj.record_id);
    $(this).find(".modal-body").html(record_obj.record_id);
    $(this).find(".btn-primary").attr("data-record-detail", record_body_raw);
    console.log("showing view modal for record "   record_obj.record_id);
  });

   $("#editModal").on("show.bs.modal", function (e) {
    var progressAttr = $(e.relatedTarget);
    var record_body_raw = progressAttr.data("record-detail");
    var record_json_string = decodeURIComponent(record_body_raw);
    var record_obj = JSON.parse(record_json_string);

    $(this)
      .find(".modal-title")
      .text("Editing Record #"   record_obj.record_id);
    $(this).find(".modal-body").html(record_obj.record_id);
    console.log("showing edit modal for record "   record_obj.record_id);
  });
});

@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<table >
  <thead>
    <tr>
      <th>record</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><button  data-record-detail="{"record_id":1}" data-toggle="modal" data-target="#viewModal">View</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td><button  data-record-detail="{"record_id":2}" data-toggle="modal" data-target="#viewModal">View</button></td>
    </tr>
</table>

<!-- view modal -->
<div  id="viewModal" tabindex="-1" role="dialog">
  <div >
    <div >
      <div >
        <h4  id="myModalLabel"></h4>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" data-toggle="modal" data-target="#editModal">Edit</button>
      </div>
    </div>
  </div>
</div>


<!-- edit modal -->
<div  id="editModal" tabindex="-1" role="dialog">
  <div >
    <div >
      <div >
        <h4 ></h4>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" >Edit</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Maybe it's related to jQuery syntax. I solved your problem using pure JavaScript as follows:

        $("#editModal").on("show.bs.modal", function (e) {
            var progressAttr = e.relatedTarget;
            var record_body_raw = progressAttr.dataset.recordDetail;
            var record_json_string = decodeURIComponent(record_body_raw);
            var record_obj = JSON.parse(record_json_string);

            $(this)
                .find(".modal-title")
                .text("Editing Record #"   record_obj.record_id);
            $(this).find(".modal-body").html(record_obj.record_id);
            console.log("showing edit modal for record "   record_obj.record_id);
        });