Reputation: 34063
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">×</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">×</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
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