PHP - Pasar variable php a modal Bootstrap

 
Vista:
sin imagen de perfil

Pasar variable php a modal Bootstrap

Publicado por Zair Estevan (7 intervenciones) el 13/05/2021 18:54:06
Hola, estoy haciendo un crud con Bootstrap y necesito que al editar y eliminar un registro salga un modal, pero este no abre, (A menos que ponga los includes antes de los botones de "Eliminar" y "Editar"), al inspeccionar los botones con el navegador me aparece el nombre del botón concatenado con el id del producto que seleccione ("editar_1"), no se si necesite un JQUERY. Agradecería mucho la ayuda, gracias.

Adjunto los dos partes de los códigos

INDEX.PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<table class="table table-striped"  >
					<thead class="titulostabla">
 
                <br>
						<tr>
 
							<th>ID</th>
							<th>Nombre</th>
							<th>Portada</th>
                            <th>Ejemplares</th>
							<th>Categoria</th>
							<th>Estado</th>
                            <th>Editorial</th>
							<th>Estante</th>
							<th>Autor</th>
                            <th>Modificar</th>
							<th>Eliminar</th>
 
						</tr>
					</thead>
					<tbody>
 
                    <?php
    // en la variable fila guarda un registro de la tabla producto y lo recorre hasta que no haya más.
    while ($fila = mysqli_fetch_assoc($resultado)) {
 
 
 
 
 
 
    ?>
						<tr>
 
  <td><?php echo $fila['IDProducto']; ?>  </td>
  <td><?php echo $fila['NombreProducto']; ?>  </td>
  <td><?php  if($fila['Portada'] !=""){
                       echo " <div class='imagen123'><img class='imagen' src='../../img/" . $fila['Portada'] . "' width='70px'/></div>";
                       } ?></td>
  <td><?php echo $fila['CantidadEjemplares']; ?>  </td>
  <td><?php echo $fila['NombreCategoria']; ?>  </td>
  <td><?php echo $fila['Estado']; ?>  </td>
  <td><?php echo $fila['NombreEditorial']; ?>  </td>
  <td><?php echo $fila['Estante']; ?>  </td>
  <td><?php echo $fila['NombreAutor']; ?>  </td>
 
 
 
  <td><center><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#editar<?php echo $fila['IDProducto']; ?>">
  Editar
  </button></center></td>
  <td><center><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eliminar<?php echo $fila['IDProducto']; ?>">
  Eliminar
  </button>
  </center></td>
 
</tr>
 
 
<?php
 
 
include('nuevo.php');
include('eliminar.php');
include('editar.php');
 
 
} ?>


EDITAR.PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- Editar -->
<div class="modal fade" id="editar<?php echo $fila['IDProducto']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	 <center><h4 class="modal-title" id="myModalLabel">Editar Producto</h4></center>
 
 
 
            </div>
            <div class="modal-body">
			<div class="container-fluid">
			<form method="POST" action="?<?php echo $fila['IDProducto']; ?>">
            <h6>Usted esta editando el producto con codigo <?php echo $fila['IDProducto']  ?></h6><br>
 
				<div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Nombre:</label>
					</div>
					<div class="col-sm-9">
 
                        <input name="nombre" type="text" class="form-control" value="<?php echo $fila['NombreProducto']  ?>" /></td>
					</div>
				</div>
                <div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Ejemplares</label>
					</div>
					<div class="col-sm-9">
				    <input name="ejemplares" type="text"  class="form-control" value="<?php echo $fila['CantidadEjemplares']  ?>" /></td>
					</div>
				</div>
 
                <div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Categoria</label>
					</div>
					<div class="col-sm-9">
                    <select name="categoria"class="form-control">
                    <option value="" selected="selected">[Seleccione:<?php echo $fila['NombreCategoria'] ?>]
                        <!--
                        aqui va el codigo en php para mostrar los tipos -->
 
                    </select>
					</div>
				</div>
 
                <div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Estado</label>
					</div>
					<div class="col-sm-9">
                    <select name="categoria"class="form-control">
                    <option value="" selected="selected">[Seleccione:<?php echo $fila['NombreCategoria'] ?>]
                        <!--
                        aqui va el codigo en php para mostrar los tipos -->
 
                    </select>
					</div>
				</div>
 
                   <div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Editorial</label>
					</div>
					<div class="col-sm-9">
                    <select name="categoria"class="form-control">
                    <option value="" selected="selected">[Seleccione:<?php echo $fila['NombreCategoria'] ?>]
                        <!--
                        aqui va el codigo en php para mostrar los tipos -->
 
                    </select>
					</div>
				</div>
 
 
                <div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Estante</label>
					</div>
					<div class="col-sm-9">
                    <select name="categoria"class="form-control">
                    <option value="" selected="selected">[Seleccione:<?php echo $fila['NombreCategoria'] ?>]
                        <!--
                        aqui va el codigo en php para mostrar los tipos -->
 
                    </select>
					</div>
				</div>
 
                <div class="row form-group">
					<div class="col-sm-3">
						<label class="control-label" style="position:relative; top:7px;">Editorial</label>
					</div>
					<div class="col-sm-9">
                    <select name="categoria"class="form-control">
                    <option value="" selected="selected">[Seleccione:<?php echo $fila['NombreCategoria'] ?>]
                        <!--
                        aqui va el codigo en php para mostrar los tipos -->
 
                    </select>
					</div>
				</div>
            </div>
			</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="fa fa-close"></span> Cancelar</button>
                <button type="submit" name="edit" class="btn btn-success"><span class="fa fa-check"></span> Actualizar</a>
			</form>
            </div>
 
        </div>
    </div>
</div>


Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 393
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Pasar variable php a modal Bootstrap

Publicado por Jefferson (203 intervenciones) el 13/05/2021 23:56:10
Hola amigo hazlo asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
  <title>bootstrap</title>
</head>
 
<body>
  <section class="container">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
          <th scope="col">Accion</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td><button type="button" class="btn btn-primary" onclick="editar(this.id)" id="1">Editar</button></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td><button type="button" class="btn btn-primary" onclick="editar(this.id)" id="2">Editar</button></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
          <td><button type="button" class="btn btn-primary" onclick="editar(this.id)" id="3">Editar</button></td>
        </tr>
      </tbody>
    </table>
 
  </section>
 
  <div class="modal" tabindex="-1" id="EditModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p id="variable"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
 
  <script>
    function editar(este) {
      var ModalEdit = new bootstrap.Modal(EditModal, {}).show();
      variable.innerHTML = "El id es : " + este;
    }
  </script>
</body>
 
</html>

Saludos ...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar