Javascript does not pass data to modal

Question

Javascript does not pass data to modal

Navigation

#1 by (1 votes)

0

I'm using this template link which I want to pass some php data to a modal The same code that I put below works perfectly for me in another application but this template does not work:

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

javascript modal

asked by Vieira 02.07.2018 в 16:27

source

1 answer

call files from the same module daughter class method visible from the superclass

score 1 · Accepted Answer

First of all you should try to verify that all your libraries load correctly, especially jquery, to use the method of assigning values to the input.

I'll give you an example with 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>

I hope it will be your guide and help .. luck !!