Search code examples
javascripthtmljquerybootstrap-modal

Using datatables prevent other modal from opening when clicked on a button inside a tr td where clicking on tr opens another modal

So I have a web page which has a table. I have linked each tr to open a modal showing details.

In the last column I have some button to perform specific task for example edit.

I have referred to this question and achieved some level or functionality. My button does open the correct modal but when i click outside or I click on the input elements of the modal or the close button, the modal linked to tr opens up.

Can someone help me fix it so that when I click the button only the modal linked to it opens up and functions properly, as in, it takes input and closes properly instead of opening the modal linked to tr?

The edit button opens the correct modal. But if I click anywhere on the modal it closes and opens the modal linked to the tr by the anchor button.

What I want is modalBtn to open the modal linked to it with everything working correctly. If I close that modal the modal linked to tr shouldn't open. Basically I want two modals in this scenario. One which opens when i click anywhere on the tr, one modal to open when i click on the edit button which is inside tr in that last column. Please simplify your answer as much as possible thanks.

To clarify my original question: I am able to apply my function to all tr tags. The question is I have a last column which has buttons in it. 2 of those buttons are linked to their own unique modals. When I click anywhere in tr the correct modal is opened. Also when I click on button the correct modal open. Problem arises here, when i click anywhere on the screen even the current modal input element the current modal closes and opens the modal linked to tr tag which functions normally. What I want is that every modal works normally.

I have modified the code so you can simply run the html and check the problem this is not the original table just a small example of my problem.

First part of my problem was solved by this answer. Second part is how to do the same functionality when using it with datatables. Currently when I click on the column header for sort, after sorting the click on tr element doesn't open the modal linked to it.

$(document).ready(() => {
  Array.from($('tr[id*="Deets"]')).forEach(element => {
    element.addEventListener('click', (e) => {
      if (e.target.parentElement.classList.contains('modalBtn')) {
        e.stopPropagation()
      } else {
        document.querySelector(`#anchor${element.id.split('Deets')[1]}`).click()
      }
    })
  });
  Array.from($('td .modalBtn')).forEach(ele => {
    console.log(ele);
    ele.addEventListener('click', (e) => {
      e.stopPropagation();
      console.log(e.target.parentElement.nextElementSibling.getAttribute('id'));
      $(`#${e.target.parentElement.nextElementSibling.getAttribute('id')}`).modal('show');
    })
  })
})
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
    <title>Hello, world!</title>
</head>

<body>
    <table class="table table-borderless datatable">
        <thead>
            <tr>
                <th scope="col" class="w-30">Remarks</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr id="demoDeets1">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor1" data-bs-toggle="modal" data-bs-target="#demoDeets1"></a>
            <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <tr id="demoDeets2">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor2" data-bs-toggle="modal" data-bs-target="#demoDeets2"></a>
            <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <tr id="demoDeets3">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">

                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor1" data-bs-toggle="modal" data-bs-target="#demoDeets3"></a>
            <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

</body>

</html>

datatables code:

$(() => {
  const dataTable = new simpleDatatables.DataTable(".datatable");
  $('.table').on('click', 'tr[data-target*="Deets"] td', function (e) {
    if ($(this).find('.modalBtn').length === 0) {
      const target = $(this).closest("tr").data("target");
      $(target).modal("show");
    }
  });
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless datatable">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-target="#demoDeets1">
        <td scope="row"><label for="" title="remark">Remark 1</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">Remark 2</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">Remark 3</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Solution

  • Your code is far too complex and your HTML was invalid.

    Here is a better version since your button is in its own td

    $(() => {
  let table = new DataTable('.table');
  $('.table').on('click', 'tr[data-target*="Deets"] td', function(e) { // listen for clicks in cells
    if ($(this).find('.modalBtn').length === 0) { // only react if there is not a button
      const target = $(this).closest("tr").data("target"); // get the data-target from row
      $(target).modal("show"); // show the target
    }
  });
});
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-target="#demoDeets1">
        <td scope="row"><label for="" title="remark">Remark 1</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">Remark 2</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">Remark 3</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

    With your choice of datatable, the script does not work per row

    I just completely wasted my time creating this script which SHOULD work but it does not because the crap datatable script does NOT sort the rows!!! It just replaces the cell contents.

    I had to use the label in the first cell to save the row index.

    $(() => {
  const dataTable = new simpleDatatables.DataTable('.datatable');
  const $datatable = $('.datatable-table');
  $datatable.on('click', 'tr td', function(e) { // listen for clicks in cells
    if ($(this).find('.modalBtn').length === 0) { // only react if there is not a button
      // BUT use the button to get the row
      const editTarget = $(this).closest('tr').find('td a.modalBtn').attr('data-bs-target'); // get the data-target from row
      const target = editTarget.replace('edit', 'demoDeets');
      $(target).modal('show'); // show the target
    }
  });
});
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless datatable">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr target="#demoDeets1">
        <td scope="row"><label for="" title="remark">Remark 1</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">Remark 2</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">Remark 3</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>