Create jquery modal by clicking on table cell

Question

I am beginner in jquery, I have table which contains one column like no of employees (total no of employee in department) when user clicks on it it should display list of employees in jquery modal (like EmpA,EmpB,EmpC) when clicking on specific employee (EmpA) should display details of that EmpA .

have you gone through Jqueryui Documentation for modal window? — Akshay Khandelwal, Jun 19 '16 at 14:56
Yes I have gone through jqueryui documentation but I didn't find solutions — user3629270, Jun 19 '16 at 15:03
Hi akshay I want to open that dialog on click of table cell which contains list by clicking on specific item from list should open details of item — user3629270, Jun 19 '16 at 15:08
`$('#table-cell-id').dialog(options);` would work. where in options you must have a look at the documentation link provided at the bottom of the page that I shared the link for — Akshay Khandelwal, Jun 19 '16 at 15:12
Hi Akshay I had tried as you described but it didn't work will will you explain In brief. — user3629270, Jun 19 '16 at 15:59

score 0 · Answer 1 · edited May 23 '17 at 10:29

You have a huge question. It is not just a question, it is an application. I can help you get started by showing you how you can (a) use a modal, (b) open/close the modal, and (c) stick stuff into the modal. After that, you must experiment / work with it before asking another question. Fair enough?

For the modal, you have three choices:

(1) You can write your own modal. Not very difficult, but if you are already using another system that includes modals, you should use that.

(2) You can use jQueryUI -- but this is not the same as jQuery. It is an enhancement/add-on to jQuery, the same as Bootstrap is. jQueryUI includes a modal dialog - but so does Bootstrap.

(3) Since you are already using Bootstrap, and since Bootstrap includes a cool modal system, you can -- and should -- use the Bootstrap modal system. It is quite easy.

Here is a link to how the Bootstrap modal system works.

In your case, you might wish to use the jQuery/javascript method of opening/closing the modal. This allows you to decide programmatically when to open the modal.

You also need to populate the modal with new data. Notice that the Bootstrap modal basically looks like this:

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div>This is the body of the modal. This is where your data goes (HTML table, values, etc).</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Notice the class called modal-body. If you inject new HTML code in there using the jQuery .html() method, you can change what is inside the modal dialog.

$('#mybutt').click(function(){
    var newstuff = '\
      <div id="newstuff">\
        <img src="http://placekitten.com/400/150" /><br>\
        <h1>This is an example</h1>\
        <h3>Of some new stuff in the modal</h3>\
        <button id="nutherbutt">Click me next</button>\
      </div>\
    ';
    $('.modal-body').html(newstuff);  
});

$(document).on('click', '#nutherbutt', function(){
  //You must use .on() to trap events for injected tags
  alert('you clicked me');
  $('#myModal').modal('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>



<!-- - - - - -  Modal  - - - - - -  -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <button id="mybutt">Click Me!</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

score 0 · Answer 2 · answered Jun 19 '16 at 15:58

Make sure all the libraries are included; jquery, bootstrap.css, bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

<!-- trigger modal -->
<td>
  Total
</td>
<td>
  <a href=""  data-toggle="modal" data-target="#myModal">4 emplyees</a>
</td>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">List of emplyees</h4>
      </div>
      <div class="modal-body">
        <ul>
           <li>Emp 1</li>
           <li>Emp 2</li>
           <li>Emp 3</li>
           <li>Emp 4</li>
        </ul>
      </div>
     
    </div>
  </div>
</div>

Create jquery modal by clicking on table cell

2 Answers2