opening a modal using datatable

Question

I'm so confused what the problem in my code is. I've already tried this working code but it doesn't work for me.

I've also already tried 'toggle' and that doesn't work either.

This is my code:

$(document).ready(function() {
  $('#example').on('click', 'tr', function() {
    $("#inbox_modal").modal('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<table id="example" class="table table-bordered inbox" style="width:100%">
  <div class="modal fade" id="inbox_modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content modal-form">
        <div class="modal-header">
          <h4 class="modal-title">Example</h4>
          <a data-dismiss="modal" style="cursor: pointer">&times;</a>
        </div>
        <div class="modal-body">
          <p>POP UP ME!!!</p>
        </div>
      </div>
    </div>
  </div>

Do you get any errors in your development console and is your Javascript code in a `$(document).ready()`? — Lewis, Jan 03 '19 at 13:01
Have you imported the bootstrap .js file and jQuery in your code? — Frank, Jan 03 '19 at 13:03
@frank yup already import cuz i tried with button and it works — Del, Jan 03 '19 at 13:05
FWIW, the code in the fiddle is Bootstrap 3. I haven't been able to get this to work in BS4 for a while either. — Lewis, Jan 03 '19 at 13:09
See my answer to [this question](https://stackoverflow.com/questions/23742274/bootstrap-3-modal-placement-in-html-markup/23742609#23742609) - you should not be placing your modal code that far down the DOM tree — MTCoster, Jan 03 '19 at 13:12
Possible duplicate of [How to bind click event to button from ajax result](https://stackoverflow.com/questions/49944236/how-to-bind-click-event-to-button-from-ajax-result) — Roy Bogado, Jan 03 '19 at 13:13

Alexander · Accepted Answer · 2019-01-03T18:33:24.873

The code works fine. Just fix markup of the table and make sure the Bootstrap components are included to your page.

$(document).ready(function() {
  $('#example').on('click', 'tr', function() {
    $("#inbox_modal").modal('show');
  });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>

 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

<table id="example" class="table table-bordered inbox">
  <tbody>
    <tr>
      <td>Click</td>
      <td>here</td>
      <td>please</td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="inbox_modal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content modal-form">
      <div class="modal-header">
        <h4 class="modal-title">Example</h4>
        <a data-dismiss="modal" style="cursor: pointer">&times;</a>
      </div>
      <div class="modal-body">
        <p>POP UP ME!!!</p>
      </div>
    </div>
  </div>
</div>

` ` this components im using now . when i try your link my DataTable Jquery is not working — Del, Jan 03 '19 at 14:44
@Del, the link from my post for the Bootstrap. It was necessary to show you the snippet works. To use DataTables plug-in you have to add it to your page too. — Alexander, Jan 03 '19 at 14:50
im sorry, i mean i add your link to my code and DataTables not works well :'( doesnt show search pagination etc.. — Del, Jan 03 '19 at 15:02
@Del, you could use DataTables [download builder](https://datatables.net/download/) to include all necessary components. — Alexander, Jan 03 '19 at 18:29

score 0 · Answer 2 · answered Jan 03 '19 at 13:19

It seems to work on my end. You have to display tr a row where the user could click and show the modal.

Here added on your code <td><tr><tr></td>

$(document).ready(function() {
  $('#example').on('click', 'tr', function() {
    $("#inbox_modal").modal('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<table id="example" class="table table-bordered inbox" style="width:100%">
  <tr><td><td></tr>
  <div class="modal fade" id="inbox_modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content modal-form">
        <div class="modal-header">
          <h4 class="modal-title">Example</h4>
          <a data-dismiss="modal" style="cursor: pointer">&times;</a>
        </div>
        <div class="modal-body">
          <p>POP UP ME!!!</p>
        </div>
      </div>
    </div>
  </div>
</table>

opening a modal using datatable

2 Answers2