1

como se puede modificar este código para evitar el uso de "indices" para la carga de datos desde un dataTable a un modal y así evitar también el uso de "indices" en todos los eventos y datos del formulario, vistas etc etc.
Primero la vista del dataTable, se eliminaron los datos sensibles.

<div class="panel-body">
                    <table id="misBienesUnidadUsuarioImpresionResguardo"  class="table table-striped table-bordered display" style="width:100%">
                        <thead>
                        <tr>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ORDEN</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NUMERO EMPLEADO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NOMBRE COMPLETO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CLAVE UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CANTIDAD DE BIENES</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">PROCESO:</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ACCIONES:</th>

                        </tr>
                        </thead>
                        <tbody>
                        <?PHP
                        for($i=0; $i< $totalResultadoBienes_UnidadUsuario; $i++){
                            $empleado_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getNumero_Empleado();
                            $nombre_UnidadUsuario= $resultadoBienes_UnidadUsuario[$i]->getNombre();
                            $cct_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getCct();
                            $unidad_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getLoc_Pla();
                            $activo_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getActivo();
                            $movimiento_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getEstatus_Movimiento();
                            $nombreMovimiento_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getNombreMovimiento();
                            $estatus_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getEstatus_Proceso();
                            ?>
                            <tr>
                                <td style="font-size:10px;"><?= $i+1?></td>
                                <td style="font-size:10px;"><?=$empleado_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$nombre_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$cct_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$unidad_UnidadUsuario?></td>
                                <td style="font-size:10px;"><?=$activo_UnidadUsuario?></td>
                                <td>
                                    <?PHP
                                    if($movimiento_UnidadUsuario == 0){

                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_blue_48.png" width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;"><?=$nombreMovimiento_UnidadUsuario ?></p></strong></div>
                                        </div>

                                        <?PHP
                                    }
                                    elseif($movimiento_UnidadUsuario == 1){

                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_orange_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;"><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }
                                    elseif($movimiento_UnidadUsuario == 2){
                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_yellow_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;" ><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }elseif($movimiento_UnidadUsuario == 3){
                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_green_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;" ><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }elseif($movimiento_UnidadUsuario == 4){
                                        ?>
                                        <div class="contenedor"><img src="imagenes/iconos/proceso/folder_green_48.png"  width="35" height="35">
                                            <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;" ><?=$nombreMovimiento_UnidadUsuario?></p></strong></div>
                                        </div>
                                        <?PHP
                                    }
                                    ?>

                                </td>
                                <?PHP
                                ?>

                                <td  style="font-size:10x;">
                                    <?PHP
                                    if ($_SESSION['ID_ROL'] == 3) {
                                        if($movimiento_UnidadUsuario == 4){
                                            ?>
                                            <button type="button" id="CargarResguardoIndividual" class="btn btn-success -upload"   data-toggle="modal" data-target="#modalCargaResguardoIndividual<?= $i+1?>"
                                                    data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span>
                                            </button>
                                            <?PHP
                                        } else {

                                            ?>
                                            <button type="button"  id="CargarResguardoIndividual" class="btn btn-success -upload" data-toggle="modal" data-target="#modalCargaResguardoIndividual<?= $i+1?>"
                                                    data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span>
                                            </button>
                                            <?PHP
                                        }
                                    }
                                    ?>
                                    <button id="AyudaCargarResguardoIndividual" name="boton"  type="button"  class="btn btn-success -sign-in"  title="AYUDA" data-toggle="modal" data-target="#modalAyudaCargaResguardoIndividual"><span class="glyphicon glyphicon-question-sign"></span>
                                    </button>
                                </td>
                            </tr>

                            <?php
                        }// cierre del ciclo
                        ?>
                        <tfoot>
                        <tr>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ORDEN</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NUMERO EMPLEADO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">NOMBRE COMPLETO</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CLAVE UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">UNIDAD</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">CANTIDAD DE BIENES</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">PROCESO:</th>
                            <th label style="font-size:12px; background-color: #C8C8AA;">ACCIONES:</th>
                        </tr>
                        </tfoot>
                        </tbody>
                    </table>
                <!--  Inicio del Modal CargarProyectoResguardoIndividual-->
                        <?PHP require_once 'modales/modalCargarProyectoResguardoIndividual.php';?>
                <!--  Fin del Modal CargarProyectoResguardoIndividual-->
                <!--  Inicio del Modal AyudaCargarProyectoResguardoIndividual-->
                        <?PHP require_once 'modales/modalAyudaCargarProyectoResguardoIndividual.php';?>
                <!--  Fin del Modal AyudaCargarProyectoResguardoIndividual-->
                <div class="pie_tabla">
                    <button class="btn btn-success" type="button" id="btnCargarProyecto" data-toggle="modal" data-target="#modalCargarProyectoResguardoMultiple" data-keyboard="false" data-backdrop="static" data-numero_empleado=""
                            title="CARGAR PROYECTO" ><img  type="button" src="imagenes/iconos/acciones/archivoPDF.png" width="35" height="35" >&nbsp; CARGAR PROYECTO </button>
                </div>
                <!--  Inicio del Modal CargarProyectoResguardoMultiple-->
                <?PHP require_once 'modales/modalCargarProyectoResguardoMultiple.php'; ?>
                <!--  Inicio del Modal CargarProyectoResguardoMultiple-->
            </div>
Este codigo genera esta vista Vista de dataTable

El boton : <button type="button" id="CargarResguardoIndividual" class="btn btn-success -upload" data-toggle="modal" data-target="#modalCargaResguardoIndividual<?= $i+1?>" data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span> </button>

Para la peticion del modal.

Este es el codigo del Modal:

<!-- Modal -->
<?PHP
for($i=0; $i< $totalResultadoBienes_UnidadUsuario; $i++)
{
    $nombreUnidad=$resultadoBienes_UnidadUsuario[$i]->getLoc_Pla();
    $nombreTipoUnidad=$resultadoBienes_UnidadUsuario[$i]->getTipoUnidad();
    $nombreProyectoUnidad=$resultadoBienes_UnidadUsuario[$i]->getProyecto();
    $numeroEmpleado=$resultadoBienes_UnidadUsuario[$i]->getNumero_Empleado();
    $nombreEmpleado=$resultadoBienes_UnidadUsuario[$i]->getNombre();
    ?>
<script>
    $(document).ready(function(){

        $("button#cargarArchivo<?=$i+1?>").click(function(e){
            e.preventDefault();
            var paqueteDeDatos = new FormData();
            paqueteDeDatos.append('archivo',$('#archivo<?=$i+1?>')[0].files[0]);
            paqueteDeDatos.append('nombreTipoUnidad',$("#nombreTipoUnidad<?=$i+1?>").val());
            paqueteDeDatos.append('nombreProyectoUnidad',$("#nombreProyectoUnidad<?=$i+1?>").val());
            $.ajax({
                url: "procesarArchivo.php",
                type: "post",
                data: paqueteDeDatos,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function(){
                    $("#modalCargaResguardoIndividual<?=$i+1?>").modal('hide');
                    swal("Se Cargo el Archivo Exitosamente!","Aceptar","success");
                    console.log("Alert Callback");
                    location.reload();
                },
                error: function(){
                    $("#modalCargaResguardoIndividual<?=$i+1?>").modal('hide');
                    swal("No se pudo Cargar el Archivo","Aceptar","error");
                    console.log("Alert Callback");
                    location.reload();
                },
            });
        });
    });

</script>
<div class="modal fade" id="modalCargaResguardoIndividual<?=$i+1?>" name="modalCargaResguardoIndividual" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="exampleModalLabel"><strong>CARGA DE RESGUARDO INDIVIDUAL POR COLABORADOR</strong></h5>
            </div>
            <div class="modal-body">

                    <table id="CargarProyectoResguardo_DatosUnidad-1" class="table table-striped center table-bordered responsive display" style="width:100%">
                        <thead>
                        <tr>
                            <th style="font-size:10px; background-color: #5bc0de;" class="text-center" colspan="3"> INFORMACI&Oacute;N GENERAL</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;UNIDAD:&nbsp;</td>
                            <td> TIPO DE UNIDAD:&nbsp;</td>
                            <td>&nbsp;PROYECTO AL QUE PERTENECE:&nbsp;</td>
                        </tr>
                        <tr style="font-size:10px;" class="text-center">
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreTipoUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreProyectoUnidad?></strong>&nbsp;</span></td>
                        </tr>
                        </tbody>
                    </table>
                    <table id="CargarProyectoResguardo_DatosUnidad-2" class="table table-striped center table-bordered responsive display" style="width:100%">
                        <thead>
                        <tr>
                            <th style="font-size:10px; background-color: #5BC0DE;" class="text-center" colspan="2"> INFORMACI&Oacute;N DEL COLABORADOR</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;NOMBRE :&nbsp;</td>
                            <td>&nbsp;NUMERO EMPLEADO:&nbsp;</td>
                        </tr>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;<strong><?=$nombreEmpleado?></strong>&nbsp;</td>
                            <td>&nbsp;<strong><?=$numeroEmpleado?></strong>&nbsp;</td>
                        </tr>
                        <tr>
                        </tbody>
                    </table >
                <table id="CargarProyectoResguardo_DatosUnidad-3" class="table table-striped center table-bordered responsive display" style="width:100%">
                    <thead>
                    <tr>
                        <th style="font-size:10px; background-color: #5BC0DE;" class="text-center" colspan="3"> CARGA DE ARCHIVOS INDIVIDUALES POR COLABORADOR</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <div class="row">
                                <div id="content" class="col-lg-12">
                                    <div id="respuesta" class="alert"></div>
                                    <form action="" method="post" id="formCargarArchivo<?=$i+1?>" name="formCargarArchivo" enctype="multipart/form-data" >
                                        <div id="content" class="col-lg-12">
                                            <div class="form-group col-lg-12">
                                                <input type="file" class="form-control-file" name="archivo" id="archivo<?=$i+1?>" accept="application/pdf">
                                            </div>
                                            <div class="form-group col-lg-12">
                                                <button type="submit" id="cargarArchivo<?=$i+1?>"  class="btn btn-primary">Subir Archivo</button>
                                            </div>
                                            <div class="form-group col-lg-12">
                                                <progress id="barra_de_progreso" value="0" max="100"></progress>
                                            </div>

                                            <input type="hidden" class="form-control"  name="nombreTipoUnidad" id="nombreTipoUnidad<?=$i+1?>" value="<?=$nombreTipoUnidad?>">
                                            <input type="hidden" class="form-control"  name="nombreProyectoUnidad"  id="nombreProyectoUnidad<?=$i+1?>" value="<?=$nombreProyectoUnidad?>">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div> <!-- fin Modal Body --->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

    <?php
}
?>

Y este codigo es el del modal que se muestra a continuacion ESte es el modal

Como se puede observar me veo en la necesidad de colocar este pequeño fragmento de codigo <?=$i+1?> al cual yo le denomino "indice", para que al momento que se despliegue el modal, muestre los datos correctos de la consulta y que corresponda de acuerdo al renglon y persona que ahi se muestra, asi como tambien su respectiva correspondencia del modal con cada renglon, y su funcion javascript para que haga la peticion del boton, etc. etc..

Si no utilizo este elemento <?=$i+1?> pues solo me muestra el dato del primer registro que trae la consulta o el ultimo.

Los datos que trae la tabla (dataTable): Orden , Numero Empleado , Nombre Completo, Clave Unidad , Unidad , Cantidad de bienes, Proceso, Acciones,

De estos datos en el modal se muestran:

Unidad, Nombre y numero de empleado, adicionalmente se trae en la consulta lo que corresponde al proyecto y tipo de unidad, estos datos se ocupan como parametros para formar una ruta de almacenamiento y complementar el nombre del archivo que se esta cargando al sistema o servidor, se muestran en el modal de la siguiente manera:

<tr style="font-size:10px;" class="text-center">
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreTipoUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong><?=$nombreProyectoUnidad?></strong>&nbsp;</span></td>
                        </tr>

Gracias

2
  • Para facilitar un poco las cosas, por favor edita la pregunta y agrega listas de los datos que muestras en la tabla y otra de los que aparecen en la ventana modal y cómo los muestras (div, span, td, input, etc.)
    – Triby
    Commented el 14 ene. 2021 a las 19:00
  • Pues no se que mas pueda modificar , la estructura del modal es el cuerpo de modal como lo especifica boostrap, hay un <div> que contiene una tabla y dentro de esta los< td>´s, dentro de estos los <span> que aloja las variables para que las muestre con los atributos de la tabla.
    – Cesarin
    Commented el 14 ene. 2021 a las 20:26

1 respuesta 1

2

Hay algunos cambios al generar la tabla, los principales son:

  • Dejar de usar <?=i+1> para los ID
  • Agregar información que no aparece en la tabla como atributos de datos en cada fila (TR)
  • Puedes reducir el código si creas variables para aplicar a un solo atributo, en lugar de tener muchas comparaciones, como el caso de la imagen.
  • En los botones se va a activar la única ventana modal
          <div class="panel-body">
                <table id="misBienesUnidadUsuarioImpresionResguardo"  class="table table-striped table-bordered display" style="width:100%">
                    <thead>
                    <tr>
                        <th label style="font-size:12px; background-color: #C8C8AA;">ORDEN</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">NUMERO EMPLEADO</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">NOMBRE COMPLETO</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">CLAVE UNIDAD</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">UNIDAD</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">CANTIDAD DE BIENES</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">PROCESO:</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">ACCIONES:</th>

                    </tr>
                    </thead>
                    <tbody>
                    <?PHP
                    for($i=0; $i< $totalResultadoBienes_UnidadUsuario; $i++){
                        $empleado_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getNumero_Empleado();
                        $nombre_UnidadUsuario= $resultadoBienes_UnidadUsuario[$i]->getNombre();
                        $cct_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getCct();
                        $unidad_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getLoc_Pla();
                        $activo_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getActivo();
                        $movimiento_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getEstatus_Movimiento();
                        $nombreMovimiento_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getNombreMovimiento();
                        $estatus_UnidadUsuario=$resultadoBienes_UnidadUsuario[$i]->getEstatus_Proceso();
                        // Faltan dos datos que deben usarse en la modal
                        $nombreTipoUnidad = $resultadoBienes_UnidadUsuario[$i]->getTipoUnidad();
                        $nombreProyectoUnidad = $resultadoBienes_UnidadUsuario[$i]->getProyecto();
                        // Agrégalos como dataset del TR:
                        ?>
                        <tr data-tipo="<?php echo $nombreTipoUnidad; ?>" data-proyecto="<?php echo $nombreProyectoUnidad; ?>">
                            <td style="font-size:10px;"><?= $i+1?></td>
                            <td style="font-size:10px;"><?=$empleado_UnidadUsuario?></td>
                            <td style="font-size:10px;"><?=$nombre_UnidadUsuario?></td>
                            <td style="font-size:10px;"><?=$cct_UnidadUsuario?></td>
                            <td style="font-size:10px;"><?=$unidad_UnidadUsuario?></td>
                            <td style="font-size:10px;"><?=$activo_UnidadUsuario?></td>
                            <td>
                                <?PHP
                                // Coloca las imágenes en un arreglo, para evitar comparaciones y reducir código
                                $imagenes = ['folder_blue_48.png', 'folder_orange_48.png', 'folder_yellow_48.png', 'folder_green_48.png', 'folder_green_48.png'];
                                ?>
                                    <div class="contenedor"><img src="imagenes/iconos/proceso/<?php echo $imagenes[$movimiento_UnidadUsuario]; ?>" width="35" height="35">
                                        <div class="centrados"><strong><p><font face="Arial" style="font-size:10px;"><?=$nombreMovimiento_UnidadUsuario ?></p></strong></div>
                                    </div>
                                    <?PHP
                                }
                                ?>

                            </td>
                            <?PHP
                            ?>

                            <td  style="font-size:10x;">
                                <?PHP
                                if ($_SESSION['ID_ROL'] == 3) {
                                    if($movimiento_UnidadUsuario == 4){
                                        // Qué diferencia hay entre estos botones?
                                        // Elimina ID de los botones
                                        ?>
                                        <button type="button" class="btn btn-success -upload"   data-toggle="modal" data-target="#modalCargaResguardoIndividual"
                                                data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span>
                                        </button>
                                        <?PHP
                                    } else {

                                        ?>
                                        <button type="button" class="btn btn-success -upload" data-toggle="modal" data-target="#modalCargaResguardoIndividual"
                                                data-keyboard="false" data_backdrop="static" title="CARGA INDIVIDUAL DEL RESGUARDO"><span class="glyphicon glyphicon-open-file"></span>
                                        </button>
                                        <?PHP
                                    }
                                }
                                ?>
                                <button name="boton"  type="button"  class="btn btn-success -sign-in"  title="AYUDA" data-toggle="modal"
                                      data-target="#modalAyudaCargaResguardoIndividual"><span class="glyphicon glyphicon-question-sign"></span>
                                </button>
                            </td>
                        </tr>

                        <?php
                    }// cierre del ciclo
                    ?>
                    <tfoot>
                    <tr>
                        <th label style="font-size:12px; background-color: #C8C8AA;">ORDEN</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">NUMERO EMPLEADO</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">NOMBRE COMPLETO</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">CLAVE UNIDAD</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">UNIDAD</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">CANTIDAD DE BIENES</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">PROCESO:</th>
                        <th label style="font-size:12px; background-color: #C8C8AA;">ACCIONES:</th>
                    </tr>
                    </tfoot>
                    </tbody>
                </table>
            <!--  Inicio del Modal CargarProyectoResguardoIndividual-->
                    <?PHP require_once 'modales/modalCargarProyectoResguardoIndividual.php';?>
            <!--  Fin del Modal CargarProyectoResguardoIndividual-->
            <!--  Inicio del Modal AyudaCargarProyectoResguardoIndividual-->
                    <?PHP require_once 'modales/modalAyudaCargarProyectoResguardoIndividual.php';?>
            <!--  Fin del Modal AyudaCargarProyectoResguardoIndividual-->
            <div class="pie_tabla">
                <button class="btn btn-success" type="button" id="btnCargarProyecto" data-toggle="modal" data-target="#modalCargarProyectoResguardoMultiple" data-keyboard="false" data-backdrop="static" data-numero_empleado=""
                        title="CARGAR PROYECTO" ><img  type="button" src="imagenes/iconos/acciones/archivoPDF.png" width="35" height="35" >&nbsp; CARGAR PROYECTO </button>
            </div>
            <!--  Inicio del Modal CargarProyectoResguardoMultiple-->
            <?PHP require_once 'modales/modalCargarProyectoResguardoMultiple.php'; ?>
            <!--  Inicio del Modal CargarProyectoResguardoMultiple-->
        </div>

Los cambios en la ventana modal son solo para poder mostrar los datos e integrarlos al formulario. Debe ser solo una, sin ciclos.

  • Agregué ID a los elementos donde se deben mostrar datos: id="span-nombreDeDato"
  • También agregué otros campos ocultos, pero ahora que lo veo, parece que no son necesarios, deja solo los que realmente vayas a usar.
<div class="modal fade" id="modalCargaResguardoIndividual" name="modalCargaResguardoIndividual" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="exampleModalLabel"><strong>CARGA DE RESGUARDO INDIVIDUAL POR COLABORADOR</strong></h5>
            </div>
            <div class="modal-body">

                    <table id="CargarProyectoResguardo_DatosUnidad-1" class="table table-striped center table-bordered responsive display" style="width:100%">
                        <thead>
                        <tr>
                            <th style="font-size:10px; background-color: #5bc0de;" class="text-center" colspan="3"> INFORMACI&Oacute;N GENERAL</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;UNIDAD:&nbsp;</td>
                            <td> TIPO DE UNIDAD:&nbsp;</td>
                            <td>&nbsp;PROYECTO AL QUE PERTENECE:&nbsp;</td>
                        </tr>
                        <tr style="font-size:10px;" class="text-center">
                            <td class="input-group-addon" style="font-size:10px;"><span><strong id="span-nombreUnidad"><?=$nombreUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong id="span-nombreTipoUnidad"><?=$nombreTipoUnidad?></strong>&nbsp;</span></td>
                            <td class="input-group-addon" style="font-size:10px;"><span><strong id="span-nombreProyectoUnidad"><?=$nombreProyectoUnidad?></strong>&nbsp;</span></td>
                        </tr>
                        </tbody>
                    </table>
                    <table id="CargarProyectoResguardo_DatosUnidad-2" class="table table-striped center table-bordered responsive display" style="width:100%">
                        <thead>
                        <tr>
                            <th style="font-size:10px; background-color: #5BC0DE;" class="text-center" colspan="2"> INFORMACI&Oacute;N DEL COLABORADOR</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;NOMBRE :&nbsp;</td>
                            <td>&nbsp;NUMERO EMPLEADO:&nbsp;</td>
                        </tr>
                        <tr style="font-size:10px;" class="text-center">
                            <td>&nbsp;<strong id="span-nombreEmpleado"><?=$nombreEmpleado?></strong>&nbsp;</td>
                            <td>&nbsp;<strong id="span-numeroEmpleado"><?=$numeroEmpleado?></strong>&nbsp;</td>
                        </tr>
                        <tr>
                        </tbody>
                    </table >
                <table id="CargarProyectoResguardo_DatosUnidad-3" class="table table-striped center table-bordered responsive display" style="width:100%">
                    <thead>
                    <tr>
                        <th style="font-size:10px; background-color: #5BC0DE;" class="text-center" colspan="3"> CARGA DE ARCHIVOS INDIVIDUALES POR COLABORADOR</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <div class="row">
                                <div id="content" class="col-lg-12">
                                    <div id="respuesta" class="alert"></div>
                                    <form action="" method="post" id="formCargarArchivo" name="formCargarArchivo" enctype="multipart/form-data" >
                                        <div id="content" class="col-lg-12">
                                            <div class="form-group col-lg-12">
                                                <input type="file" class="form-control-file" name="archivo" id="archivo" accept="application/pdf">
                                            </div>
                                            <div class="form-group col-lg-12">
                                                <button type="submit" id="cargarArchivo"  class="btn btn-primary">Subir Archivo</button>
                                            </div>
                                            <div class="form-group col-lg-12">
                                                <progress id="barra_de_progreso" value="0" max="100"></progress>
                                            </div>

                                            <input type="hidden" class="form-control"  name="nombreUnidad" id="nombreUnidad" value="">
                                            <input type="hidden" class="form-control"  name="nombreTipoUnidad" id="nombreTipoUnidad" value="">
                                            <input type="hidden" class="form-control"  name="nombreProyectoUnidad"  id="nombreProyectoUnidad" value="">
                                            <input type="hidden" class="form-control"  name="numeroEmpleado"  id="numeroEmpleado" value="">
                                            <input type="hidden" class="form-control"  name="nombreEmpleado"  id="nombreEmpleado" value="">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div> <!-- fin Modal Body --->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

Finalmente, el código Javascript para controlar la ventana modal:

  • Debes crearlo solo una vez, fuera de ciclos
  • Se detecta clic en botones para abrir la ventana modal, probablemente se abre de forma automática, pero no debe afectar esta función.
  • Actualizar contenedores y campos ocultos:
    • Primero se obtiene la fila
    • Acceder a atributos de datos de TR con $.data() para: nombreTipoUnidad y nombreProyectoUnidad
    • Obtener celda (TD) por posición para: numeroEmpleado (segunda celda - 1), nombreEmpleado (tercera celda - 2) y nombreUnidad (quinta celda - 4)
<script>
$(document).ready(function(){
    // Abrir ventana modal escuchando clic en los botones
    $('#misBienesUnidadUsuarioImpresionResguardo').on('click', '.-upload', e => {
        // Reiniciar formulario para evitar que aparezcan cosas de procesos anteriores
        $('#formCargarArchivo')[0].reset();
        $("#modalCargaResguardoIndividual").modal('show');
        // Obtener TR
        let tr = $(e.target).closest('tr');
        // Asignar datos de modal desde TR o celdas específicas
        $('#span-nombreEmpleado').text($(tr).find('td:eq(2)').text());
        $('#span-numeroEmpleado').text($(tr).find('td:eq(1)').text());
        $('#span-nombreUnidad').text($(tr).find('td:eq(4)').text());
        $('#span-nombreTipoUnidad').text($(tr).data('tipo'));
        $('#span-nombreProyectoUnidad').text($(tr).data('proyecto'));
        // Asignar valores a campos ocultos, agregé para los 5 datos, pero puedes elimminar los que no necesites
        $('#nombreEmpleado').val($(tr).find('td:eq(2)').text());
        $('#numeroEmpleado').val($(tr).find('td:eq(1)').text());
        $('#nombreUnidad').val($(tr).find('td:eq(4)').text());
        $('#nombreTipoUnidad').val($(tr).data('tipo'));
        $('#nombreProyectoUnidad').val($(tr).data('proyecto'));
    });

        // Enviar formulario
        $("button#cargarArchivo").click(function(e){
            e.preventDefault();
        // Creas formData directamente con el formulario, no necesitas agregar más cosas
            var paqueteDeDatos = new FormData($('#formCargarArchivo')[0]);
            $.ajax({
                url: "procesarArchivo.php",
                type: "post",
                data: paqueteDeDatos,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function(){
                    $("#modalCargaResguardoIndividual").modal('hide');
                    swal("Se Cargo el Archivo Exitosamente!","Aceptar","success");
                    console.log("Alert Callback");
                    location.reload();
                },
                error: function(){
                    $("#modalCargaResguardoIndividual").modal('hide');
                    swal("No se pudo Cargar el Archivo","Aceptar","error");
                    console.log("Alert Callback");
                    location.reload();
                },
            });
        });
});
</script>
9
  • Del botón que preguntas que diferencia existe, depende de una validación que todavía no escribo ahí, se validara si cumple o no cierta acción previa, en caso negativo se deshabilita el botón, de cumplirse la acción, habilita el botón para que se pueda abrir el modal.
    – Cesarin
    Commented el 15 ene. 2021 a las 0:20
  • Ya estoy haciendo pruebas con las recomendaciones, no importa que boton hagas clic dentro de la tabla, siempre carga el ultimo valor que trae la consulta, creo que tendre que añadir una nueva consulta, en la cual carge los valores solo del empleado sobre el boton correspondiente al renglon seleccionado
    – Cesarin
    Commented el 15 ene. 2021 a las 18:17
  • No es necesario hacer otra consulta, porque los datos ya están cargados en la tabla y se toman de ahí mismo.
    – Triby
    Commented el 15 ene. 2021 a las 18:19
  • No @Triby no tengo otra función que llame o cargue el modal, solo es con ese jquery al hacer clic en el botón, es la única petición que se realiza , lo que creo es que a lo mejor es necesaria otra consulta, que solo cargue los valores que requiero del numero de empleado que se selecciona
    – Cesarin
    Commented el 15 ene. 2021 a las 18:19
  • La otra unica manera que conozco de enviar datos de un datatable, es metiendolos en el boton y en el jquery hacer una extracion de estos y metiendolos en variables y luego pasarlos a los campos del modal, pero la verdad no me gusta mucho ese metodo jaja
    – Cesarin
    Commented el 15 ene. 2021 a las 18:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.