Boton de formulario en ventana modal de Bootstrap y ajax no funciona
Publicado por Toni (4 intervenciones) el 23/02/2023 21:26:53
Hola! Estoy implemntando un CRUD y todo funciona perfectamente. Puedo añadir usuarios a través de un botón que abre una ventana modal. Sin embargo, no puedo editarlos ni eliminarlos porque al pulsar el botón de editar / eliminar no se abre la ventana modal. No entiendo por qué. Podéis ayudarme? Envío el código de 2 archivos: el index.php y el script.js que realiza las acciones.
Index.php
script.js
Tiene algo que ver las nuevas clases de Bootstrap data-bs-toggle ?? No estoy en la versión 5 de bootstrap, por lo que no lo entiendo qué ocurre
Gracias
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
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
<!DOCTYPE html>
<html>
<head>
<title>CRUD con PHP, MySQL, Bootstrap, JavaScript y AJAX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>CRUD con PHP, MySQL, Bootstrap, JavaScript y AJAX</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addUserModal">
Agregar Usuario
</button>
<br><br>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Correo Electrónico</th>
<th>Teléfono</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="users">
</tbody>
</table>
</div>
<!-- Ventana modal para agregar usuario --><div class="modal" id="addUserModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Agregar Usuario</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="addUserForm">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Correo Electrónico:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Teléfono:</label>
<input type="tel" class="form-control" id="phone" name="phone" required>
</div>
<button type="submit" class="btn btn-primary">Agregar</button>
</form>
</div>
</div>
</div>
</div>
<!-- Ventana modal para editar usuario --><div class="modal" id="editUserModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Usuario</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="editUserForm">
<input type="hidden" id="editId" name="id">
<div class="form-group">
<label for="editName">Nombre:</label>
<input type="text" class="form-control" id="editName" name="name" required>
</div>
<div class="form-group">
<label for="editEmail">Correo Electrónico:</label>
<input type="email" class="form-control" id="editEmail" name="email" required>
</div>
<div class="form-group">
<label for="editPhone">Teléfono:</label>
<input type="tel" class="form-control" id="editPhone" name="phone" required>
</div>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<!-- Ventana modal para eliminar usuario --><div class="modal" id="deleteUserModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Eliminar Usuario</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>¿Está seguro que desea eliminar a este usuario?</p>
<form id="deleteUserForm">
<input type="hidden" id="deleteUserId" name="id">
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
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
$(document).ready(function() {
// Función para obtener la lista de usuariosfunction getUsers() {
$.ajax({
url: 'getUsers.php',
type: 'get',
success: function(response) {
$('#users').html(response);
}});
}getUsers();
// Función para agregar usuario$('#addUserForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'addUser.php',
type: 'post',
data: $('#addUserForm').serialize(),
success: function(response) {
$('#addUserModal').modal('hide');
$('#addUserForm')[0].reset();
getUsers();
}});
});
// Función para obtener datos de usuario$(document).on('click', '.editBtn', function() {
var id = $(this).attr('data-id');
$.ajax({
url: 'getUser.php',
type: 'post',
data: {id: id},
success: function(response) {
var data = JSON.parse(response);
$('#editId').val(data.id);
$('#editName').val(data.name);
$('#editEmail').val(data.email);
$('#editPhone').val(data.phone);
}});
});
// Función para editar usuario$('#editUserForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'editUser.php',
type: 'post',
data: $('#editUserForm').serialize(),
success: function(response) {
$('#editUserModal').modal('hide');
$('#editUserForm')[0].reset();
getUsers();
}});
});
// Función para eliminar usuario$(document).on('click', '.deleteBtn', function() {
var id = $(this).attr('data-id');
if (confirm('¿Estás seguro de que deseas eliminar este usuario?')) {
$.ajax({
url: 'deleteUser.php',
type: 'post',
data: {id: id},
success: function(response) {
getUsers();
}});
}});
});
Tiene algo que ver las nuevas clases de Bootstrap data-bs-toggle ?? No estoy en la versión 5 de bootstrap, por lo que no lo entiendo qué ocurre
Gracias
Valora esta pregunta
0