CODEWITHSUNDEEP
jquery
Kermit
Kermit

Reputation: 34063

Is there a different way to pass data between modals?

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 class="table">
  <thead>
    <tr>
      <th>record</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><button class="btn btn-primary" data-record-detail="%7B%22record_id%22%3A1%7D" data-toggle="modal" data-target="#viewModal">View</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td><button class="btn btn-primary" data-record-detail="%7B%22record_id%22%3A2%7D" data-toggle="modal" data-target="#viewModal">View</button></td>
    </tr>
</table>

<!-- view modal -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"data-toggle="modal" data-target="#editModal">Edit</button>
      </div>
    </div>
  </div>
</div>


<!-- edit modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Edit</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 43

Answers (1)

talent-jsdev
talent-jsdev

Reputation: 676

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);
        });

Upvotes: 1

Related Questions