javascript - Bootstrap: Modal dialog for editing data dynamically - Stack Overflow

admin管理员组

文章数量:1343336

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 mon way to do this in a modal dialog or do I need a global variable for that in JavaScript?

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 mon way to do this in a modal dialog or do I need a global variable for that in JavaScript?

• javascript
• bootstrap-modal

Share Improve this question Follow edited Nov 8, 2019 at 9:23 Chris asked Nov 8, 2019 at 9:14 ChrisChris 2,05566 gold badges3232 silver badges7878 bronze badges 5

• 2 Please provide us with a minimal reproducible example. What does the code look like you have tried so far? – Barrosy Commented Nov 8, 2019 at 9:28
• You can store the id in the data attribute of the button in the table, then bind to the show.bs.modal event. From there get the value of the data attribute from the button, then pass it to the button from the modal for the saveNote() to use. Although, it would be nice if you add some codes so that we can properly know what to do – Carl Binalla Commented Nov 8, 2019 at 9:33
• @Barrosy It is somewhat difficult for me to provide that because ~50% of the code is dynamically generated in 3 different places. I will try to edit the question and provide an example. – Chris Commented Nov 8, 2019 at 9:39
• @CarlBinalla How exactly can I bind the id to that event? I have no experience with any sort of binding in JavaScript or HTML. – Chris Commented Nov 8, 2019 at 9:40
• If you are using JQuery, check the link that is in my ment, and here is the documentation of how to get the data attribute using JQuery – Carl Binalla Commented Nov 8, 2019 at 9:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 ments 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn./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">&times;</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>

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.

本文标签： javascriptBootstrap Modal dialog for editing data dynamicallyStack Overflow