CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
Paul Anthony Flores
Paul Anthony Flores

Reputation: 33

Bootstrap Modal Opening by Clicking JQuery DataTable

I made a JSFIDDLE, https://jsfiddle.net/t53cyutt/

and I wanted help with getting a modal to open after clicking on a row from the DataTable.

Any suggestions?

I thought this small code would do the trick but it won't.

$(document).ready(function () {
$('#jobs').DataTable();


$('#jobs').on('click', 'tr', function () {
    var name = $('td', this).eq(1).text();
    $('#DescModal').dialog("open");
});

Upvotes: 3

Views: 24267

Answers (2)

codelone
codelone

Reputation: 752

This will allow you to open a modal when you click on table tr(row) in datatable.

$(document).ready(function()
 {
      var dataTable = $('#developers').DataTable({

     $('#your-table-id-here').on('click', 'tr', function()
      {
        var jsData = dataTable.row(this).data();
        $('#your-modal-id-here').modal('show');
        $('#your-modal-body-id-here').text(jsData[0]); //[0] will display 1st column of your table
      }
  }); 
});

OR

<div class="modal fade" id="DescModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
                 <h3 class="modal-title">Job Requirements & Description</h3>

            </div>
            <div class="modal-body">
                 <h5 class="text-center"></h5>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
                <button type="button" class="btn btn-primary">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Jquery: dynamic content rendering on per row click.

$(document).ready(function () {
    $('#jobs').DataTable();
    $('#jobs').on('click', 'tr', function () {
        var val= $('td', this).eq(2).text(); //eq(2) increase the value inside eq() will display the txt column wise.
        $('#DescModal').modal("show");
        $('.text-center').text(val);
    });
});

You can see demo here.

Upvotes: 1

Cory
Cory

Reputation: 1283

Your Fiddle was missing the bootstrap JS. Bootstap uses selector.modal('show') I updated your fiddle

Upvotes: 7

Related Questions