Question

146

How to show a modal when a table row is clicked?

rated 0 times [ 151] [ 5] / answers: 1 / hits: 18657 / 9 Years ago, wed, february 18, 2015, 12:00:00

I am trying to display a modal when a table row is clicked. Below are the important parts of the code. I am using Bootstrap.

  <%@page import=java.sql.Date%>

<%@taglib prefix=c uri= http://java.sun.com/jsp/jstl/core %>

<!DOCTYPE html>

<html lang=en>

<head>

<meta charset=utf-8>

<meta http-equiv=X-UA-Compatible content=IE=edge>

<meta name=viewport content=width=device-width, initial-scale=1>

<meta name=description content=>

<meta name=author content=>

<title>Passport</title>



<!-- Bootstrap Core CSS -->

<link href=css/bootstrap.min.css rel=stylesheet>



<!-- Custom CSS -->

<link href=css/simple-sidebar.css rel=stylesheet>

<link href=css/custom.css rel=stylesheet>



<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

        <script src=https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js></script>

        <script src=https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js></script>



    <![endif]-->

<!-- jQuery -->



<script src=js/jquery.js></script>



<!-- Bootstrap Core JavaScript -->

<script src=js/bootstrap.min.js></script>



<link rel=stylesheet type=text/css href=css/jquery.dataTables.css>



    <script type=text/javascript language=javascript src=js/jquery.dataTables.min.js></script>



        <script type=text/javascript>

            $(document).ready(function() {

                $('#example').dataTable( {

                    scrollY:        200px,

                    scrollCollapse: true,

                    paging:         false

                } );

            } );





            jQuery(document).ready(function($) {

                $(.clickable-row).click(function() {

                    $('#editModal').modal('show');

            });

            });



        </script>

</head>



<body>

<div id=header></div>

<!-- Navigation -->

<nav class=navbar navbar-fixed-top role=navigation id=navbar_top> 

  <!-- Brand and toggle get grouped for better mobile display -->

  <div class=navbar navbar-fixed-top mytopbar > 

    <!-- Top Menu Items -->

    <ul class=nav navbar-right top-nav myul>

      <li class=dropdown id=dropdown> <a href=# class=dropdown-toggle data-toggle=dropdown><i class=fa fa-user></i> William Harold <b class=caret></b></a>

        <ul class=dropdown-menu>

          <li> <a href=#><i class=fa fa-fw fa-user></i> Profile</a> </li>

          <li> <a href=#><i class=fa fa-fw fa-envelope></i> Inbox</a> </li>

          <li> <a href=#><i class=fa fa-fw fa-gear></i> Settings</a> </li>

          <li class=divider></li>

          <li> <a href=#><i class=fa fa-fw fa-power-off></i> Log Out</a> </li>

        </ul>

      </li>

    </ul>

  </div>

</nav>

<nav class=navbar navbar-default mynav id=navbar_second>

  <div class=container-fluid> 

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class=navbar-header menu>

      <button type=button class=navbar-toggle collapsed data-toggle=collapse data-target=#bs-example-navbar-collapse-1> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button>

      <a href=#menu-toggle class=btn menu id=menu-toggle><img src=images/icon_menu.png width=20 height=20/>Menu</a> </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class=collapse navbar-collapse id=bs-example-navbar-collapse-1>

      <form class=navbar-form navbar-left role=search>

        <div class=form-group>

          <input id=search_input type=text class=form-control placeholder=Start typing a patient name..>

        </div>

        <button type=submit class=btn btn-default><img src=images/search.png /></button>

      </form>

      <ul class=nav navbar-nav navbar-right>

        <li><a href=#><i class=fa fa-fw fa-gear></i>Recent</a></li>

      </ul>

    </div>

    <!-- /.navbar-collapse --> 

  </div>

  <!-- /.container-fluid --> 

</nav>

<div id=wrapper> 



  <!-- Sidebar -->

  <div id=main-sidebar-wrapper style=margin-top:50px; width:150px;>

    <ul class=sidebar-nav style=margin-top:10px;>

      <li> <a href=#> Face Sheet</a> </li>

      <li> <a href=#>Designation</a> </li>

      <li class=li_active > <a href=#>Passport</a> </li>



    </ul>

  </div>

  <!-- /#sidebar-wrapper --> 



  <!-- Sidebar -->

  <div id=sidebar-wrapper style=margin-top:50px;>

    <ul class=sidebar-nav main-nav style=margin-top:10px;>

      <li > <a href=#> <span class=glyphicon glyphicon-home aria-hidden=true> Home</span> </a> </li>

      <li class=main-nav-active> <a href=#><span class=glyphicon glyphicon-user aria-hidden=true> Patients</span></a> </li>

      <li> <a href=#><span class=glyphicon glyphicon-calendar aria-hidden=true> Calender</span></a> </li>

      <li> <a href=#><span class=glyphicon glyphicon-ok-sign aria-hidden=true> Tasks</span></a> </li>

      <li> <a href=#><span class=glyphicon glyphicon-credit-card aria-hidden=true> Billing </span></a> </li>

      <li> <a href=#><span class=glyphicon glyphicon-folder-open aria-hidden=true> Documents </span></a> </li>

      <li> <a href=#><span class=glyphicon glyphicon-stats aria-hidden=true> Reports </span></a> </li>

      <li> <a href=#><span class=glyphicon glyphicon-dashboard aria-hidden=true> Meaningful</span></a> </li>

      <hr>

      <li> <a href=#><span class=glyphicon glyphicon-wrench aria-hidden=true> Admin</span></a> </li>

    </ul>

  </div>

  <!-- /#sidebar-wrapper -->



  <div class=row row-top>

    <div class=col-lg-12 style=margin-top:50px;>

      <div class=col-md-3> <img src=images/img6.jpg width=70 height=70/>

        <p style=border-bottom:solid #666 1px;><strong>John Generalmend Demo</strong></p>

        <p>17 Jul 1956 (58 yrs)</p>

        <p>0123456789</p>

      </div>

         <!--

      <div class=col-md-2>

        <p>ALLERGIES</p>

        <div class=allergy_box>Peanut</div>

      </div>



      <div class=col-md-7   >

        <button class= btn btn-default btn-sm><img alt=print title=print src=images/mailButton.png width=30 height=20/><span class=help_button>Pt. Msg</span></button>

        <button class= btn btn-default btn-sm><img alt=print title=print src=images/printButton.png width=30 height=20/> <span class=help_button>Print</span></button>

        <button class= btn btn-default btn-sm><img alt=print title=print src=images/bookButton.png width=30 height=20/><span class=help_button>Pt. Ed. </span></button>

        <button class=dropdown btn btn-default btn-sm id=dropdown>

        <img alt=print title=print src=images/noteButton.png width=30 height=20/><span class=help_button>+ Note</span> <a href=# class=dropdown-toggle data-toggle=dropdown> <b class=caret></b></a>

        <ul class=dropdown-menu>

          <li> <a href=#><i class=fa fa-fw fa-user></i> link</a> </li>

          <li> <a href=#><i class=fa fa-fw fa-envelope></i> link</a> </li>

          <li class=divider></li>

          <li> <a href=#><i class=fa fa-fw fa-power-off></i> link</a> </li>

        </ul>

        </button>

        <button class=dropdown btn btn-default btn-sm id=dropdown>

        <img alt=print title=print src=images/scriptButton.png width=30 height=20/><span class=help_button>Scripts</span> <a href=# class=dropdown-toggle data-toggle=dropdown> <b class=caret></b></a>

        <ul class=dropdown-menu>

          <li> <a href=#><i class=fa fa-fw fa-user></i> link</a> </li>

          <li> <a href=#><i class=fa fa-fw fa-envelope></i> link</a> </li>

          <li class=divider></li>

          <li> <a href=#><i class=fa fa-fw fa-power-off></i> link</a> </li>

        </ul>

        </button>

        <button class=dropdown btn btn-default btn-sm id=dropdown>

        <img alt=print title=print src=images/ordersButton.png width=30 height=20/><span class=help_button>Orders</span> <a href=# class=dropdown-toggle data-toggle=dropdown> <b class=caret></b></a>

        <ul class=dropdown-menu>

          <li> <a href=#><i class=fa fa-fw fa-user></i> link</a> </li>

          <li> <a href=#><i class=fa fa-fw fa-envelope></i> link</a> </li>

          <li class=divider></li>

          <li> <a href=#><i class=fa fa-fw fa-power-off></i> link</a> </li>

        </ul>

        </button>

        <button class=dropdown btn btn-default btn-sm id=dropdown>

        <img alt=print title=print src=images/exchangeButton.png width=30 height=20/><span class=help_button>Exchange</span> <a href=# class=dropdown-toggle data-toggle=dropdown> <b class=caret></b></a>

        <ul class=dropdown-menu>

          <li> <a href=#><i class=fa fa-fw fa-user></i> link</a> </li>

          <li> <a href=#><i class=fa fa-fw fa-envelope></i> link</a> </li>

          <li class=divider></li>

          <li> <a href=#><i class=fa fa-fw fa-power-off></i> link</a> </li>

        </ul>

        </button>

      </div>

        -->

    </div>

  </div>



  <!-- Page Content -->

  <div id=page-content-wrapper>

    <div class=container-fluid>

    <div class=row style=margin-bottom:20px>





    <form class=form-horizontal method=post action=PassportSrvlt?idEmployee=1 >

          <fieldset id=modal_form>



            <!-- Text input-->

            <div class=form-group>

              <label class=col-md-2 control-label for=textinput>Passport Number</label>

              <div class=col-md-3>

                  <input id=textinput name=passportNumber type=text value=${requestScope.passportNumber} class=form-control input-md >

              </div>





             <!-- Text input-->



              <label class=col-md-2 control-label for=textinput>Passport date</label>

              <div class=col-md-3>

                  <input id=textinput name=passportDate type=date value=${requestScope.passportDate} class=form-control input-md >

              </div>

            <!-- button-->

               <button type=submit  class=btn btn-primary>Save</button>



            </div>

                </fieldset>

        </form>





    </div>

      <div class=row>

        <div class=col-lg-12>

          <div class=row>

              <div class=col-lg-6 > <small><u>Reminder Section</u></small>

              <!-- Multiple Checkboxes -->

              <div class=control-group>

                <label class=control-label for=checkboxes></label>

              </div>

            </div>

            <div class=col-lg-6 id=div_above_table> <a class=btn btn-default data-toggle=modal data-target=#addModal>+ New Reminder</a> </div>

          </div>

          <div class=row>

            <table id=example class=display cellspacing=0 width=100%>

        <thead>

            <tr>

                <th>Date Renewal</th>

                <th>Reminder Date</th>

                <th>Reminder Status</th>

            </tr>

        </thead>



        <tfoot>

            <tr>

                <th>Date Renewal</th>

                <th>Reminder Date</th>

                <th>Reminder Status</th>

            </tr>

        </tfoot>



        <tbody>

            <tr class='clickable-row' data-toggle=modal data-target=#editModal style=cursor:pointer>

            <td> <c:out value=${currentPassportBean.dateRenewalDue}/></td>

            <td> <c:out value=${currentPassportBean.reminderDate}/></td>

            <td> Active</td>

        </tr>

        <c:forEach var=historyPassportBean items=${requestScope['historyPassportBean']} >

            <tr>

                <td><c:out value=${historyPassportBean.dateRenewalIssued}/></td>

                <td><c:out value=${historyPassportBean.dateRenewalIssued}/></td>

                <td>Deactivated</td>

            </tr>

         </c:forEach>   

        </tbody>

    </table>

          </div>

          <!-- /.row --> 



        </div>

      </div>

    </div>

  </div>

  <!-- /#page-content-wrapper --> 



</div>

<!-- /#wrapper --> 



<!-- Menu Toggle Script --> 

<script>

$(#wrapper).toggleClass(toggled);

    $(#menu-toggle).hover(function(e) {

        e.preventDefault();

        $(#wrapper).toggleClass(toggled);

    });

    $(#sidebar-wrapper).hover(function(e) {

        e.preventDefault();

        $(#wrapper).toggleClass(toggled);

    });















    </script> 



<!-- add New Job modal -->



<button type=button class=close data-dismiss=modal aria-hidden=true>&times;</button>

<div class=modal fade id=addModal tabindex=-1 role=dialog aria-labelledby=basicModal aria-hidden=true>

  <div class=modal-dialog>

    <div class=modal-content>

      <div class=modal-header> <a href=# data-dismiss=modal> <img src=images/arrow-back-512.png  width=30px height=30px> <small>Back</small></a> <span id=myModalLabel style=margin-left:20px;><font size=+2><b>Add to problem list</b></font></span> </div>

      <div class=modal-body>

        <form class=form-horizontal method=post action=InsertPassportReminderSrvlt?idEmployee=1 >

          <fieldset id=modal_form>



            <!-- Text input-->

            <div class=form-group>

              <label class=col-md-4 control-label for=textinput>Date Renewal Due</label>

              <div class=col-md-6>

                <input name=dateRenewalDue type=date  class=form-control input-md >

              </div>

            </div>



            <!-- Text input-->

            <div class=form-group>

              <label class=col-md-4 control-label for=textinput>Reminder Date</label>

              <div class=col-md-6>

                <input  name=reminderDate type=date class=form-control input-md> 

              </div>



            </div>







      <div class=modal-footer>

        <button type=submit class=btn btn-primary>Save</button>

        <button type=button class=btn btn-default data-dismiss=modal>Cancel</button>

      </div>

                </fieldset>

        </form>



    </div>

  </div>

</div>



<!-- /add New Job modal -->





<!-- Edit  Job modal -->



<button type=button class=close data-dismiss=modal aria-hidden=true>&times;</button>

<div class=modal fade id=editModal tabindex=-1 role=dialog aria-labelledby=basicModal aria-hidden=true>

  <div class=modal-dialog>

    <div class=modal-content>

      <div class=modal-header> <a href=# data-dismiss=modal> <img src=images/arrow-back-512.png  width=30px height=30px> <small>Back</small></a> <span id=myModalLabel style=margin-left:20px;><font size=+2><b>Add to problem list</b></font></span> </div>

      <div class=modal-body>

        <form class=form-horizontal method=post action=InsertPassportReminderSrvlt?idEmployee=1 >

          <fieldset id=modal_form>



            <!-- Text input-->

            <div class=form-group>

              <label class=col-md-4 control-label for=textinput>Date Renewal Due</label>

              <div class=col-md-6>

                <input name=dateRenewalDue type=date  class=form-control input-md >

              </div>

            </div>



            <!-- Text input-->

            <div class=form-group>

              <label class=col-md-4 control-label for=textinput>Reminder Date</label>

              <div class=col-md-6>

                <input  name=reminderDate type=date class=form-control input-md> 

              </div>



            </div>







      <div class=modal-footer>

        <button type=submit class=btn btn-primary>Save</button>

        <button type=button class=btn btn-default data-dismiss=modal>Cancel</button>

      </div>

                </fieldset>

        </form>



    </div>

  </div>

</div>



<!-- /Edit Job modal -->

</body>

</html>

Please pay attention to this area

<tr class='clickable-row' data-toggle=modal data-target=#editModal style=cursor:pointer>

That is where I am trying to show that model when the row is clicked. However, nothing is happening. I am not a designer, how can I fix this please?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisc

Add To Favorites

Follow

Total Points: 533

Total Questions: 82

Total Answers: 90

Location: Bangladesh

Member since Thu, Aug 5, 2021

3 Years ago

answered 9 Years ago blaisep · Accepted Answer

You're using data-attributes and JavaScript to initialize/show your modal, it's meant to be one or the other.

In your example, remove your modal js the modal should show correctly.

jQuery(document).ready(function($) {

    /* this is not needed

    $(.clickable-row).click(function() {

        $('#editModal').modal('show');

    });

    */

});

You are also missing a closing </div> in the markup of both of your modals:

<div class=modal fade id=editModal tabindex=-1 role=dialog aria-labelledby=basicModal aria-hidden=true>

    <div class=modal-dialog>

        <div class=modal-content>

            <div class=modal-header>

                <a href=# data-dismiss=modal> <img src=images/arrow-back-512.png width=30px height=30px> <small>Back</small>

                </a><span id=myModalLabel style=margin-left:20px;><font size=+2><b>Add to problem list</b></font></span>

            </div>



            <div class=modal-body>

                <form class=form-horizontal method=post action=InsertPassportReminderSrvlt?idEmployee=1>

                    <fieldset id=modal_form>

                        <!-- Text input-->

                        <div class=form-group>

                            <label class=col-md-4 control-label for=textinput>Date Renewal Due</label>

                            <div class=col-md-6>

                                <input name=dateRenewalDue type=date class=form-control input-md>

                            </div>

                        </div>



                        <!-- Text input-->

                        <div class=form-group>

                            <label class=col-md-4 control-label for=textinput>Reminder Date</label>

                            <div class=col-md-6>

                                <input name=reminderDate type=date class=form-control input-md>

                            </div>



                        </div>



                        <div class=modal-footer>

                            <button type=submit class=btn btn-primary>Save</button>

                            <button type=button class=btn btn-default data-dismiss=modal>Cancel</button>

                        </div>

                    </fieldset>

                </form>

            </div>

        </div>

    </div>

</div> <!-- This is missing from both modals -->

Working JSFiddle with your example.