0

estoy usando esta plantilla http://byrushan.com/projects/super-admin/app/2.1.2/modals.html la cual quiero pasar unos datos php a un modal. El mismo código que pongo mas abajo me funciona perfectamente en otra aplicación pero en esta plantilla no funciona:

<a data-toggle="modal" data-id="<?php echo $id;?>" data-id2="<?php echo $row['firstname'];?>" data-id3="<?php echo $row['lastname']; ?>"  data-id4="<?php echo $row['username']; ?>"  data-id5="<?php echo $row['password']; ?>"  data-id6="<?php echo $row['cell']; ?>" data-id7="<?php echo $row['email']; ?>" data-id8="<?php echo $row['skype']; ?>" title="Edit teacher" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">Actualizar</a>

<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title pull-left">Default modal</h5>
                                        </div>
                                        <div class="modal-body">
                                            <input type="hidden" name="proposal_id" class="form-control" id="proposalId" value=""/>
                                                <label>Firstname:</label>
                                                <input class="form-control" name="firstname"  id="proposalId2" type="text" placeholder = "Firstname">
                                                <label>Lastname:</label>
                                                <input class="form-control" name="lastname"  id="proposalId3" type="text" placeholder = "Lastname">
                                                <label>Username:</label>
                                                <input class="form-control" name="un"  id="proposalId4" type="text" placeholder = "Username" readonly>
                                                <label>Password:</label>
                                                <input class="form-control" name="password"  id="proposalId5" type="text" placeholder = "Password">
                                                <label>Telephone:</label>
                                                <input class="form-control" name="telephone"  id="proposalId6" type="text" placeholder = "">
                                                <label>Email:</label>
                                                <input class="form-control" name="email"  id="proposalId7" type="email" placeholder = "">
                                                <label>Skype</label>
                                                <input class="form-control" name="skype"  id="proposalId8" type="text" placeholder = "">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-link">Save changes</button>
                                            <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

<script>
$(document).on("click", ".open-AddBookDialog", function () {
     var myproposalId = $(this).data('id');
     var myproposalId2 = $(this).data('id2');
     var myproposalId3 = $(this).data('id3');
     var myproposalId4 = $(this).data('id4');
     var myproposalId5 = $(this).data('id5');
     var myproposalId6 = $(this).data('id6');
     var myproposalId7 = $(this).data('id7');
     var myproposalId8 = $(this).data('id8');
     $(".modal-body #proposalId").val( myproposalId );
     $(".modal-body #proposalId2").val( myproposalId2);
     $(".modal-body #proposalId3").val( myproposalId3);
     $(".modal-body #proposalId4").val( myproposalId4);
     $(".modal-body #proposalId5").val( myproposalId5);
     $(".modal-body #proposalId6").val( myproposalId6);
     $(".modal-body #proposalId7").val( myproposalId7);
     $(".modal-body #proposalId8").val( myproposalId8);
     $('#addBookDialog').modal('show');
});
</script>
7
  • Primero te sugiero verificar si efectivamente tienes los valores en myproposalId....myproposalId2...etc...mediante console.log(myproposalId); Commented el 2 jul. 2018 a las 14:34
  • una vez que sepas que si existen dichos valores... podrias poner en tus inputs asi con el ID del modal y el ID del input ejemplo: $("#addBookDialog #proposalId").val( myproposalId ); Commented el 2 jul. 2018 a las 14:36
  • Pues me aparece Uncaught ReferenceError: $ is not defined
    – Vieira
    Commented el 2 jul. 2018 a las 14:43
  • en donde te aparece eso en console.log o en $("#addBookDialog #proposalId").val( myproposalId ); Commented el 2 jul. 2018 a las 14:44
  • Exacto, y error en esto también, perdón leanmodal/js/jquery-1.12.4.min
    – Vieira
    Commented el 2 jul. 2018 a las 14:46

1 respuesta 1

1

Primero que nada deberias tratar de verificar que todas tus librerias carguen correctamente, en especial jquery, para usar el metodo de asignar valores al input.

Te dejo un ejemplo con bootstrap:

<!doctype html>
<html lang="en">
  <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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">
       <div class="form-group">
       <label>nombre:</label>
       <input type="text" id="nombre">
       </div>
       <div class="form-group">
       <label>Telefono:</label>
       <input type="text" id="telefono">
       </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
  <script>
  var valor1 = "Diego Avila";
  var valor2 = "0328205126";
  //poniendo valor en modal
  $("#exampleModal #nombre").val(valor1);
    //poniendo valor en modal
  $("#exampleModal #telefono").val(valor2);
  </script>
</html>

Espero te sirva de guia y ayuda.. suerte !!

2
  • Perfecto, funciona a la perfección!
    – Vieira
    Commented el 2 jul. 2018 a las 15:04
  • Gracias por todo!!!!
    – Vieira
    Commented el 2 jul. 2018 a las 15:04

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.