0

buenas noches estoy intentato llamar una modal con bootstrap 4 y jquery pero no me sale lo hice como dice la documentacion $('#myModal').modal('show') pero me marca un error https://gyazo.com/7ab3403b00139197545ecb44fa4a44b8

podrian ayudarme por favor llevo buen rato intentando y nada

function editarProducto(id){
      	/*$('#formularioEditar')[0].reset();
    $.ajax({
      'method': 'POST',
      'url': 'controller/cliente/modificarSeleccion.php',
      'data': 'id='+id,
    }).done(function(valores){
      //console.log(valores);
    //  $('#mensajee').addClass("mostrar").html('Se Agrego Correctamente El Producto').show(200).delay(2500).hide(200);
    var datos = eval(valores);
    $('#id-prod').val(id);
    $('#nombrePersona').val(datos[6]);
    $('#edadPersona').val(datos[7]);
    //$('#editarCantidad').val(datos[7]);
    $('#personaReferencia').val(datos[8]);
    $('#alias').val(datos[1]);
    //$('#editarPrecio').val(datos[5]);
    $('#edad').val(datos[2]);
    $('#fechaInicial').val(datos[3]);
    //$("#editarProducto").modal("show"); 
    /*$('#myModal').modal({
    		show: true
		});
	});*/
    $('#editarProducto').modal({
            show:true,
            backdrop:'static'
          });
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <!-- Jquery ui -->
    <link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui.min.css">

  </head>
  <body>

    <header>"MVC PRUEBA"</header>
    <section>

    <div id="agregar-registros">
      <table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre del dueño</th>
      <th>edad</th>
      <th>persona Referencia</th>
      <th>Mascota Alias</th>
      <th>edad Mascota</th>
      <th>fecha de nacimiento</th>
      <th>opciones</th>
    </tr>
  </thead>
  <tbody> 
    <?php
        include 'controller/cliente/traerRegistros.php';
      ?>
  </tbody>
</table>
    </div>


      <div class="container-fluid">
        <div class="row">



          <div class="col">
            <form id="formularioAgregar" class="formulario">
                <table border="0" alling="center">
          <h2>datos de cliente</h2>
          <tr>
              <td><label>Ingresa el nombre de la persona</label></td>
              <td><input type="text" name="nombrePersona" id="nombrePersona"></td>
          </tr>
              <td><label>ingrese edad</label></td>
              <td><input type="number" name="edadPersona" id="edadPersona"></td>
          <tr>
          <tr>
              <td><label>persona de referencia</label></td>
              <td><input type="text" name="personaReferencia" id="personaReferencia"></td>
          </tr>
          <tr>
              <td><label>nombre del perro</label></td>
              <td><input type="text" name="alias" id="alias"></td>
          </tr>
          <tr>
              <td><label>edad del perro</label></td>
              <td><input type="number" name="edad" id="edad"></td>
          </tr>
          <tr>
              <td><label>fecha de nacimiento</label></td>
            <td><input type="text" name="fechaInicial" id="fechaInicial"></td>
          </tr>
          <tr>
              <td colspan="2"><div id="mensaje"></div></td>
          </tr>
          </table>
          <button type="submit" name="agregar" id="agregar" class="btn btn-primary">Agregar Datos</button>
            </form>
          </div>

  <a class="btn btn-primary" href="javascript:editarProducto('.$idPersona.');" >Editar</a>



          <!-- Modal editar-->
          <div>
              <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <form id="formularioEditar" class="formulario">
                        <table border="0" alling="center">
                          <h2>datos de cliente</h2>
                          <tr>
                              <td><input type="text" required="required" readonly="readonly" id="id-prod" name="id-prod" readonly="readonly" style="visibility: hidden;" height: "5px;"></td>
                          </tr>
                          <tr>
                              <td><label>Ingresa el nombre de la persona</label></td>
                              <td><input type="text" name="nombrePersona" id="nombrePersona"></td>
                          </tr>
                              <td><label>ingrese edad</label></td>
                              <td><input type="number" name="edadPersona" id="edadPersona"></td>
                          <tr>
                          <tr>
                              <td><label>persona de referencia</label></td>
                              <td><input type="text" name="personaReferencia" id="personaReferencia"></td>
                          </tr>
                          <tr>
                              <td><label>nombre del perro</label></td>
                              <td><input type="text" name="alias" id="alias"></td>
                          </tr>
                          <tr>
                              <td><label>edad del perro</label></td>
                              <td><input type="number" name="edad" id="edad"></td>
                          </tr>
                          <tr>
                              <td><label>fecha de nacimiento</label></td>
                            <td><input type="text" name="fechaInicial" id="fechaInicial"></td>
                          </tr>
                          <tr>
                              <td colspan="2"><div id="mensaje"></div></td>
                          </tr>
                          </table>
                          
                      </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" name="actualizar" id="actualizar" class="btn btn-primary">Actualizar</button>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
            


<!-- jQuery first -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <!-- tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <!-- BOOTSTRAP MIN -->
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!-- jquery para ui -->
  <script src="js/jquery/jquery-3.2.1.js"></script>
  <script src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  <!-- codigo del calendario en assets -->
  <script src="assets/calendario/calendario.js"></script>
  <script src="js/index/index.js"></script>
  </body>
</html>

2 respuestas 2

0

Amigo, en tu codigo tiene la siguiente linea

 <a class="btn btn-primary" href="javascript:editarProducto('.$idPersona.');" >Editar</a>

Agregale el data-toggle que permitira mostrar el modal y el data-target que indica cual es el div que usaras como modal. De la siguiente manera:

<a type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary" href="javascript:editarProducto('.$idPersona.');" >Editar</a>
6
  • eso lo intente hace mucho data-toggle="modal" data-target="#myModal" y no me funcionaba , no sabia sobre esto type="button" en una etiqueta <a></a> no lo habia visto y por eso opte por lamarla por medio de javascript cosas pequeñas te hacen sufrir bastante muchisimas gracias por su ayuda. el 22 jul. 2017 a las 15:35
  • pero ya no le llegan los parametros a la funcion de href="javascript:editarProducto('.$idPersona.');" el 22 jul. 2017 a las 16:12
  • jaja me ando respondiendo solo pero ya quedo muchas gracias jose liza <a type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary" onclick="editarProducto('.$idPersona.')">Editar</a>'; el 22 jul. 2017 a las 16:41
  • Un gusto ayudarte Carlos Enrique
    – jose liza
    el 22 jul. 2017 a las 18:59
  • Carlos Enrique, podrias darle un "respuesta util" a mi respuesta, Gracias
    – jose liza
    el 24 jul. 2017 a las 21:22
0

Si la respuesta de arriba no te funciona, prueba con colocar el request de jquery al final del body y colocarlos de tal orden que jquery quede de primero, luego bootstrap.s, y luego lo demás

2
  • siento que el error es ahi tambien ya hice lo que me dijiste si te das cuenta tengo dos enlaces a jquery jquery-3.1.1.slim.min.js y jquery-3.2.1.js uno lo utilizo para la versiond e bootstrap 4 y el otro para usar jquery ui me pide usar esa version no se si exista otra forma de tal manera de usar solo uno el 22 jul. 2017 a las 15:48
  • bueno, deberias ordenar bien tu estructura, ademas asegurate de copiar el codijo de javascript que include la documentación de Bootstrap, en el final, puedes intentar tambien crear un propio modal, busca uno en google, hay muchos, incluso en github! el 22 jul. 2017 a las 18:08

Tu Respuesta

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

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