Estoy tratando de mostrar una modal cuando una fila de la tabla se hace clic. A continuación son las partes importantes del código. Estoy usando 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>

Por favor, preste atención a esta área

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

Que es donde estoy tratando de mostrar que el modelo cuando la fila se hace clic. Sin embargo, nada de lo que está sucediendo. Yo no soy un diseñador, ¿cómo puedo solucionar esto por favor?

InformationsquelleAutor PeakGen | 2015-02-18

2 Comentarios

  1. 3

    Eres el uso de datos de los atributos y JavaScript para inicializar/mostrar sus modales, que está destinado a ser uno o el otro.

    En su ejemplo, quitar el modal js el modal debería mostrar correctamente.

    jQuery(document).ready(function($) {
    /* this is not needed
    $(".clickable-row").click(function() {
    $('#editModal').modal('show');
    });
    */
    });

    También falta un cierre </div> en el marcado de ambos verbos modales:

    <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 -->

    Trabajo JSFiddle con su ejemplo.

    • Hola, he editado mi pregunta con el código completo.
    • El problema es el mismo, que no necesita el $('#editModal').modal('show'); en JavaScript si usted está usando los datos de atributos para activar tu modal.
    • Pero no es trabajo.
    • ¿Te sale algún error en la consola de JavaScript? (ctrl + shift + J en Chrome). El HTML es también el formato correcto y contiene comillas dobles: <span" class="glyphicon glyphicon-calendar" aria-hidden="true"> aunque esto no debería ser romper el modal de bootstrap.
    • No hay errores…………………
    • Está también la falta de cierre </div> etiquetas en ambos verbos modales. He actualizado mi respuesta con un ejemplo.
    • Oye, has encontrado la respuesta. El unclosed </div> cosas. Gracias!

  2. 3

    La jQuery código en tu pregunta que no es necesario y que no son de su modal de HTML. Sin embargo, si usted utiliza su código como está, retire el jQuery y agregar un modal con un id de editModal va a trabajar. Esto es debido a que su clickable fila tiene los datos de destino de #editModal y Bootstrap, recoge esto para usted.

    Por ejemplo:

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <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></td>
    <td></td>
    <td>Active</td>
    </tr>
    </tbody>
    </table>
    <!-- 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 -->

    • hmm..no trabajo en la mina..
    • Es el archivo js de Bootstrap añadido después el archivo js de jQuery?
    • OK, me dejaba actualizar a la pregunta con el código completo. Por favor nota que contiene algunas JSTL Código, ya que este es aJSP archivo.
    • Por favor, compruebe el nuevo código.
    • Como lo que puedo decir que no hay prácticamente nada de malo con su código distinto al innecesarios jQuery que me dijo a quitar. Algunas preguntas: ¿Qué versión de jQuery que hacer referencia? La versión de Boostrap se que hacer referencia? Está usted recibiendo cualquier error en el navegador de la consola?
    • No hay errores. Ninguna idea acerca de la versión.
    • Las versiones son potencialmente crítica, ¿de dónde sacaste los archivos?
    • Archivos de mi diseñador..
    • Abrir los archivos, deben tener el número de versión en la parte superior.
    • Esto es de «Bootstrap.css». La versión es – Bootstrap v3.3.1
    • También necesita el jQuery y Bootstrap js versión?
    • Muchas gracias por el apoyo continuo. Realmente lo aprecio. El problema fue con unclosed <div> etiquetas.

Dejar respuesta

Please enter your comment!
Please enter your name here