问题
This question might be a duplicate but I did not know any good key words to search for to find the solution I am looking for.
I am working on a website which shows a table to the user. In one column the table contains notes that the user can edit. To do so, I added a button for every row in that column to open a bootstrap modal dialog where the user can edit the note associated with the specific row. I also have a JavaScript-function "saveNote(recordId)" which reads the entered text from the input field in the modal dialog and then sends it to the server via an ajax post.
Now my question is: How and where can I store the id of the row that is currently being edited so that I can pass it to the saveNote()-function? I found an example in the bootstrap documentation but that only covers passing data dynamically to the modal dialog (Varying modal content). Is there any common way to do this in a modal dialog or do I need a global variable for that in JavaScript?
回答1:
Basically, put the id
of each row to the data-id
attribute of the row button. Then bind the modal to the show.bs.modal
event then use $(e.relatedTarget).data('id')
to get the data-id
of the button that opened the modal. Check the comments for some other explanation
$(function() {
$('#exampleModal').on('show.bs.modal', function(e) {
$('.modalTextInput').val('');
let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
$('.saveEdit').data('id', id); // then pass it to the button inside the modal
})
$('.saveEdit').on('click', function() {
let id = $(this).data('id'); // the rest is just the same
saveNote(id);
$('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
})
})
function saveNote(id) {
let text = $('.modalTextInput').val();
$('.recentNote').data('note', text);
console.log($('.recentNote').data('note'));
console.log(text + ' --> ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input class="modalTextInput form-control" placeholder="Text Here" />
</div>
<div class="modal-footer">
<button type="button" class="saveEdit btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>Some data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
<tr>
<td>Another data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="2" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
<tr>
<td>More data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="3" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
</tbody>
</table>
<p class="recentNote"></p>
回答2:
where you are binding saveNote button you can set value of button as a record id and pass it to the method as follows:
<button value""+ recordId +"" onclick="saveNote("+ recordId +")">edit</button>
something like this.
来源:https://stackoverflow.com/questions/58763573/bootstrap-modal-dialog-for-editing-data-dynamically