Cambio de estado ajax php
Publicado por Julian (4 intervenciones) el 11/03/2021 02:07:07
Quisiera que los iconos de estado cambien cuantas veces sea necesario al igual que el estado en sql, por el momento solo cambia una vez de estado y toca recargar la pagina para que pueda volver a cambiar de estado
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<?php
$categoria = new Categoria();
$categorias = $categoria->consultarTodos();
?>
<div class="container pb-1">
<div class="row mt-4 justify-content-center d-flex">
<div class="col-lg-6">
<div class="card text-white pt-4">
<div class="cardAdmin card-header text-center rounded">
<h3>Consultar Categoria</h3>
</div>
<div class="card-body">
<div class="table-responsive contenedor">
<table id="example-table" class="display" style="width:100%;color: black;">
<thead style="color: white;">
<th> Nombre</th>
<th> Servicios</th>
</thead>
<tbody>
<?php
foreach ($categorias as $categoriaActual) {
echo "<tr>";echo "<td>" . $categoriaActual->getNombre() . "</td>";
echo "<td>";if ($_SESSION["rol"] == "Administrador") {
echo "<a href='index.php?pid= " . encrypt("presentacion/administrador/categoria/editarCategoria.php", $key) . "&id=" . encrypt($categoriaActual->getIdCategoria(), $key) . "' class ='btn btn-sm'><i class='fas fa-edit text-light' data-bs-toggle='tooltip' title='Editar'></i></a>";
echo "<button class='btn btn-sm estado" . $categoriaActual->getIdCategoria() . "' name='estado" . $categoriaActual->getIdCategoria() . "' idp='" . $categoriaActual->getIdCategoria() . "' ide='" . $categoriaActual->getEstado() . "'>";
echo $categoriaActual->getEstado() == 1 ? "<i class='fas fa-ban text-light' id='d' data-bs-toggle='tooltip' title='Deshabilitar'></i>" : "<i class='fas fa-check text-light' id='h' data-bs-toggle='tooltip' title='Habilitar'></i>";
echo "</button>"; } echo "</td>"; echo "</tr>"; }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<?php
foreach ($categorias as $categoriaActual) {
?>
<script>
$(document).ready(function() {
$(".estado<?php echo $categoriaActual->getIdCategoria() ?>").click(function() {
var d = document.getElementById("d");
var h = document.getElementById("h");
var idp = $(this).attr('idp'); // valor del idp
var ide = $(this).attr('ide');
var parametros = {
"idp": idp,
"ide": ide
}; // construccion del parametro para enviar al AJAX
// sintaxis para cambiar la clase de la etiqueta hijo de span$.ajax({
data: parametros,
url: '<?php echo "index.php?pid=" . encrypt("presentacion/administrador/categoria/updateCategoria.php", $key) ?>',
type: 'POST',
beforeSend: function() {},
success: function(response) {
if (ide == 1) {
const data = document.querySelector(".estado<?php echo $categoriaActual->getIdCategoria() ?>");
data.innerHTML = "<i class='fas fa-check text-light' id='h' data-bs-toggle='tooltip' title='Habilitar'></i>";
data.textContent; // "Tema 1"
data.innerHTML; // "<h1>Tema 1</h1>"
data.outerHTML; //
} else if (ide == 0) {
const data = document.querySelector(".estado<?php echo $categoriaActual->getIdCategoria() ?>");
data.innerHTML = "<i class='fas fa-ban text-light' id='d' data-bs-toggle='tooltip' title='Deshabilitar'></i>";
data.textContent; // "Tema 1"
data.innerHTML; // "<h1>Tema 1</h1>"
data.outerHTML; //
}},
}); // fin de ajax/
}); // fin de click
});
</script>
<?php
}?>
<script>
$(document).ready(function() {
mostrar();
});
function mostrar() {
var table = $('#example-table').DataTable({
"destroy": true,
"lengthMenu": [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
responsive: true,
columnDefs: [{
responsivePriority: 1,
targets: 0},
{responsivePriority: 10001,
targets: 1},
{responsivePriority: 2,
targets: -1
}],
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
}});
new $.fn.dataTable.FixedHeader(table);
}</script>
Valora esta pregunta
0
