Bootstrap: Modal dialog for editing data dynamically

Question

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?

Solution 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">&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>

Solution 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.

Comments

[Barrosy]

Please provide us with a minimal reproducible example. What does the code look like you have tried so far?

[Carl Binalla]

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

[Chris]

@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]

@CarlBinalla How exactly can I bind the id to that event? I have no experience with any sort of binding in JavaScript or HTML.

[Carl Binalla]

If you are using JQuery, check the link that is in my comment, and here is the documentation of how to get the data attribute using JQuery

[Chris]

I am already doing something similar in the buttons that are in the table. However, I need the recordId from the button in the table that was clicked to open the modal dialog. The buttons in the table do not directly call saveNote(), they just open the modal dialog. How do I get the recordId from the buttons in the table into the save button on the modal dialog?

[Muhammad Aftab]

do you want a column with the record id in the table.?

[Chris]

No, I do not need or want to show the id directly to the user.

[Muhammad Aftab]

create a hidden input field in the modal on click set the Id to the hidden input field and then you can access the id on modal.

[Chris]

Thanks for this great solution! I only got one more question: Is there a way how I can safely store the current note in a data-* attribute as well? Currently it does not work when the note contains any "weird" characters like quotes because it breaks the HTML syntax.

[Carl Binalla]

@Chris I assume note means the input inside the modal? I edited my answer which passes the note to another element, then immediately logs the current data-note of that element. Adding quotes as value to the input also works

[Chris]

Yes, but I only want the note to fill it into the input field of the modal. Basically where you do "$('.modalTextInput').val('')" I want to set the value to the current input instead. The problem is that I currently put the input into an attribute "data-input" in my backend before it is sent to the client. If the input contains any characters like quotes, this breaks the HTML syntax.

[Carl Binalla]

So you mean, the value of note is being provided somewhere, then pass to the input inside the modal?

[Chris]

Yes, I basically just want the current value of note to be put into the input field inside the modal. In my backend I added the "data-input" field to each of the buttons in the table like "data-note='{Value}'" where {Value} will be replaced with the current input that is stored in the database. As I already said before, this can potentially break the HTML syntax depending on what characters are in the current input so I am looking for a solution for this problem. I assume that calling ".data('note', text);" already encodes the text in some way but I cannot do this from my backend.