CODEWITHSUNDEEP
javascripthtml
Del
Del

Reputation: 49

opening a modal using datatable

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>

Upvotes: 0

Views: 465

Answers (2)

Alexander
Alexander

Reputation: 4527

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>

Upvotes: 1

jned29
jned29

Reputation: 478

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>

Upvotes: 0

Related Questions