1

estoy intentando que por medio de Jquery aparezca mi modal, pero no funciona, la idea es que presionando boton "btnmodal" aparezca el modal por medio de Jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="UTF-8">
    <title>CRUD Mascotas</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#btnmodal').click(function(){
                $('#modal').modal('show');
            });
            
        });
    </script>
</head>
<body>
<div class="container"> 
   <div align="center" class="starter-template">
      <h1 align= "center"><b>CRUD CON AJAX</b></h1>
       <button type="button" id="btnmodal"  class="btn btn-primary btn-lg">
           <span class="glyphicon glyphicon-star" aria-hidden="true"></span>Nuevo
       </button> 
   </div>
   <div class="panel panel-default">
       <div class="panel-heading">Lista de mascotas</div>
       <table class="table">
           <thead>
              <tr>
                <th>ID Mascota</th>
                <th>Nombre</th>
                <th>Fecha De Nacimiento</th>
                <th>Raza</th>
                <th>Especie</th>
                <th>Acciones</th>
              </tr>
           </thead>
           <tbody>
               <?php 

                    $conexion = mysqli_connect("localhost","root","","crud-ajax");
                    $resultado = mysqli_query($conexion,"SELECT * FROM MASCOTA"); 
               while($filas=mysqli_fetch_array($resultado))
               { ?> 
              
              <tr>
                 <td><?php echo $filas['idmascota']; ?></td>
                 <td><?php echo $filas['nombre']; ?></td>
                 <td><?php echo $filas['fechanacimiento']; ?></td>
                 <td><?php echo $filas['raza']; ?></td>
                 <td><?php echo $filas['especie']; ?></td>
                 <td>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger">Seleccione</button>
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                          <li><a>Eliminar</a></li>
                          <li><a>Actualizar</a></li>
                        </ul>
                    </div>
                 </td>
              </tr>
               <?php    
               }
               ?>   

                 
                 
           </tbody>
       </table>
   </div>
   
   <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Registrar Mascota</h4>
            </div>
            <form role="form" action="" name="frmMascotas" onsubmit="Registrar(); return false">
              <div class="col-lg-12">
                <div class="form-group">
                  <label>ID Mascota</label>
                  <input name="ID" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Nombre</label>
                  <input name="Nombre" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Fecha De Nacimiento</label>
                  <input name="Fecha" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Raza</label>
                  <input name="Raza" class="form-control" required>
                </div>
                
                <div class="form-group">
                  <label>Especie</label>
                  <input name="Especie" class="form-control" required>
                </div>

                <button type="submit" class="btn btn-info btn-lg">
                  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Registrar
                </button>

              </div>
            </form>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger btn-circle" data-dismiss="modal"><i class="fa fa-times"></i>x</button>
            </div>
          </div>
        </div>
      </div>
    </div> 
</body>
</html>

2 respuestas 2

2

Prueba con:

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

Pero veo que exportas la librería de jquery 4 veces, estoy puede estar causando conflictos. El orden correcto es, primero exportar el jquery y luego la librería js de bootstrap.

También ten en cuenta que por cuestiones de ejecución lo recomendable es siempre poner las librerías y el código JavaScript el final del HTML (justo antes de cerrar el body) los css siempre en el head, esto te evitará muchos inconvenientes

2
  • Te refieres a que se debe poner solo esas 2? y en ese orden Commented el 29 mar. 2018 a las 5:49
  • 2
    Si esas dos y el CSS, por cuestiones de ejecución lo recomendable es siempre poner las librerías y el código JavaScript el final del HTML (justo antes de cerrar el body) los css siempre en el head, esto te evitará muchos inconvenientes Commented el 29 mar. 2018 a las 5:54
1
<html>
<head>
    <meta charset="UTF-8">
    <title>CRUD Mascotas</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->

</head>
<body>
<div class="container"> 
   <div align="center" class="starter-template">
      <h1 align= "center"><b>CRUD CON AJAX</b></h1>
       <button type="button" id="btnmodal"  class="btn btn-primary btn-lg">
           <span class="glyphicon glyphicon-star" aria-hidden="true"></span>Nuevo
       </button> 
   </div>
   <div class="panel panel-default">
       <div class="panel-heading">Lista de mascotas</div>
       <table class="table">
           <thead>
              <tr>
                <th>ID Mascota</th>
                <th>Nombre</th>
                <th>Fecha De Nacimiento</th>
                <th>Raza</th>
                <th>Especie</th>
                <th>Acciones</th>
              </tr>
           </thead>
           <tbody>
               <?php 

                    $conexion = mysqli_connect("localhost","root","","crud-ajax");
                    $resultado = mysqli_query($conexion,"SELECT * FROM MASCOTA"); 
               while($filas=mysqli_fetch_array($resultado))
               { ?> 

              <tr>
                 <td><?php echo $filas['idmascota']; ?></td>
                 <td><?php echo $filas['nombre']; ?></td>
                 <td><?php echo $filas['fechanacimiento']; ?></td>
                 <td><?php echo $filas['raza']; ?></td>
                 <td><?php echo $filas['especie']; ?></td>
                 <td>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger">Seleccione</button>
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                          <li><a>Eliminar</a></li>
                          <li><a>Actualizar</a></li>
                        </ul>
                    </div>
                 </td>
              </tr>
               <?php    
               }
               ?>   



           </tbody>
       </table>
   </div>

   <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Registrar Mascota</h4>
            </div>
            <form role="form" action="" name="frmMascotas" onsubmit="Registrar(); return false">
              <div class="col-lg-12">
                <div class="form-group">
                  <label>ID Mascota</label>
                  <input name="ID" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Nombre</label>
                  <input name="Nombre" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Fecha De Nacimiento</label>
                  <input name="Fecha" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Raza</label>
                  <input name="Raza" class="form-control" required>
                </div>

                <div class="form-group">
                  <label>Especie</label>
                  <input name="Especie" class="form-control" required>
                </div>

                <button type="submit" class="btn btn-info btn-lg">
                  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Registrar
                </button>

              </div>
            </form>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger btn-circle" data-dismiss="modal"><i class="fa fa-times"></i>x</button>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#btnmodal').click(function(){
                $('#modal').modal('show');
            });

        });
    </script>
</body>
</html>

Este codigo si funciona lo que hice fue eliminar como 4 librerias jquerys que tenia y pasar todo lo relacionado a javascript al final del documento. En si no se porque no funcionaba pero funciono al eliminar el penultimo jquery.

2
  • 1
    Muchas gracias, realmente lo intenté al ver ejemplos...Pero no había funcionado, es muy raro...Gracias :) Commented el 29 mar. 2018 a las 5:48
  • Con gusto. Es que tenia muchas versiones de jquery. Y generan conflicto. Commented el 30 mar. 2018 a las 3:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.