I am trying to create some buttons to approve different documents
However, when I print a value of the queried data array, it repeats the same thing in each of them, that is
It is as if the for that I am using used the same ID for all the buttons and did not increment
Here is the code for obtaining the data array
public function getDocumentosPendientes()
{
$btnAprobar = '';
$btnInfo = '';
//Custom buttoms
$arrData = $this->model->selectDocumentosPendientes();
for ($i=0; $i < count($arrData); $i++) {
$btnAprobar = '
<form action="AprobarDocumento" method="post">
<input name="intIdDocumentoAprobar" type=hidden value='.$arrData[$i]['id_documento'].'>
<input name="moduloDocumento" type=hidden value='.$arrData[$i]['modulo'].'>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Aprobar documento</h5>
<a type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" title="Cerrar">x</span>
</a>
</div>
<div class="modal-body">
¿Está seguro(a) de aprobar el documento <b>'.$arrData[$i]['id_documento'].'?</b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary">Aprobar</button>
</div>
</div>
</div>
</div>
</form>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" title="Aprobación rápida">
<i class="far fa fa-check" aria-hidden="true"></i>
</button>
';
$btnInfo = '
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal2" title="Revisar documento">
<i class="far fa fa-eye" aria-hidden="true" > </i>
</button>
';
$arrData[$i]['options'] = '<div class="text-center">'.$btnAprobar.$btnInfo.'
</div>';
}
echo json_encode($arrData,JSON_UNESCAPED_UNICODE);
die();
}
Here the code of the datatable
var tableDocumentosPendientes;
document.addEventListener('DOMContentLoaded', function () {
tableDocumentosPendientes = $('#tableDocumentosPendientes').dataTable({
"aProcessing": true,
"aServerSide": true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
},
"ajax": {
"url": " " + base_url + "DocumentosPendientes/getDocumentosPendientes",
"dataSrc": ""
},
"columns": [
{ "data": "id_documento" },
{ "data": "nombreFactura" },
{ "data": "razon" },
{ "data": "fecha_vencimiento" },
{"data": "intValorTotal"},
{"data": "observaciones"},
{ "data": "options" }
],
'dom': 'fitpr',
"bDestroy": true,
"iDisplayLength": 10,
"order": [[0, "asc"]]
});
});
$('#tableDocumentosPendientes').DataTable();
Model
public function selectDocumentosPendientes()
{
$whereAdmin = "";
if($_SESSION['idUser'] != 1 ){
$whereAdmin = " and fk_usuario_actual = '".$_SESSION['idUser']."' ";
}
$sql = "SELECT id_documento,ruta, nombreFactura,fecha_vencimiento, intValorTotal,observaciones,modulo,egreso,inicio_flujo,estado,usuario_inicial,fk_usuario_actual, ultimo_movimiento, id_proveedor,nit,razon FROM documento d LEFT JOIN proveedores p ON p.id_proveedor = d.fk_proveedor WHERE estado = 'Pendiente de aprobación'".$whereAdmin;
$request = $this->select_all($sql);
return $request;
}
When I change the pagination of the datatable (for example, when I leave only one row per page) the button does take the ID of the document to modify, but when I leave a higher page length, the buttons take the ID of the first element of the list from the datatable, it seems to me that it is printing the same button without incrementing the counter on each record
I would say that the problem is when you call the modal, because you always call the same id.
Try making these changes:
change it to this:
change it to this:
Try and tell us.