0

introducir la descripción de la imagen aquíTengo un inconveniente, estoy creando filas apartir de los option de un select (el cual tiene materiales), con mi funcion actual de JS me permite crear total las filas con dar un solo click en boton Materiales, para poder generar las filas recorro la cantidad de option que tiene el select en un for y luego con ajax envio los datos de mi formulario al controller de laravel 9 para hacer unas formulas las cuales estan todo ok, pero al momento de generar las filas de mi tabla me genera las filas de manera desordenada. Ejemplo: Deberia primero crear la fila de tubos y despues de materiales; pero lo hace de manera desordenada.

Aqui esta mi funcion en JS

function crear_filas_materiales(){

let select = document.getElementById('material');    
let tableBody = document.getElementById('list-materials');

dataSend.id = document.getElementById('material').value;
dataSend.name = document.getElementById('name').value;
dataSend.long = document.getElementById('long').value;
dataSend.width = document.getElementById('width').value;
dataSend.thickness = document.getElementById('thickness').value;
dataSend.rows = document.getElementById('rows').value;
dataSend.tube = document.getElementById('tube').value; 

for(let i= 0; i < select.length; i++){
            
    let option = select[i];         
    let id_material = option.value;
    let desc_material = option.innerHTML;         
    
    $.ajax({
        method:'POST',
        data:{dataSend: dataSend, id_material: id_material, desc_material: desc_material},
        url:'/productos/material',
        statusCode:{
            422: function (response) {
                console.log(response);
            },
            200: function(response){
                console.log(response['success']);
                if(response['success'][0] == 1){                                                    
                    let newRow = tableBody.insertRow(-1);
                    let count = tableBody.rows.length;
                    newRow.innerHTML = '<th scope="row">' + count + '</th><input type="hidden" class="material_id" name="material_id" value="' + response['success'][0] + '"><td class="fw-bold">' + response['success'][1] + '</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold quantity" id="cantidadTubos" name="cantidad" readonly value=' + response['success'][2] + '> tubos</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold parts" name="piezas" readonly value=' + response['success'][3] + '> x rollo</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold inches" name="pulgadas" readonly value=' + response['success'][4] + '> tuberia</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold total_material" name="total-material" readonly value=' + response['success'][5] + '> rollos</td><td><input type="text" class="form-control form-control-sm text-center bg-light fw-bold sale_price" name="precio" placeholder="Ingresar precio">dolares</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold" id="total_cost_tube" name="costo-total" readonly placeholder="$0.00"></td><td><button class="btn btn-success" onclick="cost_material(this)"><i class="fas fa-check text-white"></i></button></td><td><button class="btn btn-danger" onclick="delete_row_material(this)"><i class="fas fa-trash-alt"></i></button></td>';
                }     
                if(response['success'][0] == 2){   
                    let newRow = tableBody.insertRow(-1);
                    let count = tableBody.rows.length;
                    newRow.innerHTML = '<th scope="row">' + count + '</th><input type="hidden" class="material_id" name="material_id" value="' + response['success'][0] + '"><td class="fw-bold">' + response['success'][1] + '</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold quantity" id="cantidadLaminas" name="cantidad" readonly value=' + response['success'][2] + '> láminas</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold parts" name="piezas" readonly value=' + response['success'][3] + '> x plancha</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold inches" name="pulgadas" readonly value=' + response['success'][4] + '> láminas</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold total_material" name="total-material" readonly value=' + response['success'][5] + '> metros</td><td><input type="text" class="form-control form-control-sm text-center bg-light fw-bold sale_price" name="precio" placeholder="Ingresar precio">dolares</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold" id="total_cost_lamina" name="costo-total" readonly placeholder="$0.00"></td><td><button class="btn btn-success" onclick="cost_material(this)"><i class="fas fa-check text-white"></i></button></td><td><button class="btn btn-danger" onclick="delete_row_material(this)"><i class="fas fa-trash-alt"></i></button></td>';
                }    
                           
            },
            500: function(){
                console.log('error');
            }                
        }               
    });  
}

}

Este es mi codigo del controller el cual en base al id de material va enviar los datos y crear la fila, pero lo hace desorneado cuando deberia primero pasar por el id 1 y luego el 2 sucesivamente.

public function showDataMaterial(Request $request){

    $data = [];
    $response = ['status' => 500];
    
    if ($request->id_material == 1) {
        try {
            $descripcion = $request->desc_material;
            $cantidad_tubos = $request->dataSend['width'] * $request->dataSend['rows'];
            $pulgadax_rollo = 15 * 39.38;
            $piezasx_rollo = round($pulgadax_rollo / $request->dataSend['long']);
            $total_pulgadas = $request->dataSend['long'] * $cantidad_tubos;

            $rollos = round($total_pulgadas / $pulgadax_rollo);

            $data[0] = $request->id_material;
            $data[1] = $descripcion;
            $data[2] = $cantidad_tubos;
            $data[3] = $piezasx_rollo;
            $data[4] = $total_pulgadas;
            $data[5] = $rollos;
            $response['status'] = 200;
            
        } catch (Exception $e) {
            Log::error('error al obtener datos: ' . $e->getTrace() . ' ' . $e->getMessage());
        }
    }
    if ($request->id_material == 2) {
        try {
            $descripcion = $request->desc_material;
            $aletas_xpulgada = 10;
            $cantidad_aletas = $request->dataSend['long'] * $aletas_xpulgada;
            $pulgadax_plancha = 1.22 * 39.38;
            $piezasx_plancha = round($pulgadax_plancha / 2.5);
            $total_laminas = $cantidad_aletas / $piezasx_plancha;
            $total_pulgadas = round($total_laminas * $request->dataSend['width']);
            $metros_lamina = round($total_pulgadas / 39.38);

            $data[0] = $request->id_material;
            $data[1] = $descripcion;
            $data[2] = $cantidad_aletas;
            $data[3] = $piezasx_plancha;
            $data[4] = $total_pulgadas;
            $data[5] = $metros_lamina;
            $response['status'] = 200;
        } catch (Exception $e) {
            Log::error('error al obtener datos: ' . $e->getTrace() . ' ' . $e->getMessage());
        }
    }

    return response()->json(['success' => $data, 'status' => $response['status']]);     
          
}

Este es mi HTML, el select lo tengo oculto porque en base a los option que tiene se va generar las filas en la tabla con sus datos procesados en el controller.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <form class="formModal" action="">
        @csrf
        <div class="row">
            <div class="col mb-3 col-12">
                <label for="name" class="form-label">Producto:</label>
                <input type="text" name="name" id="name" class="form-control form-control-sm" placeholder="Por favor ingresar una descripción del producto">
            </div>
            <div class="col mb-3 col-12 col-md-6 col-lg-2">
                <label for="long" class="form-label">Largo "</label>
                <input type="text" name="long" id="long" class="form-control form-control-sm" placeholder="Ingrese su medida">
            </div>
            <div class="col mb-3 col-12 col-md-6 col-lg-2">
                <label for="width" class="form-label">Ancho "</label>
                <input type="text" name="width" id="width" class="form-control form-control-sm" placeholder="Ingrese su medida">
            </div>
            <div class="col mb-3 col-12 col-md-6 col-lg-2">
                <label for="thickness" class="form-label">Espesor "</label>
                <input type="text" name="thickness" id="thickness" class="form-control form-control-sm" placeholder="Ingrese su medida">
            </div>
            <div class="col mb-3 col-12 col-md-6 col-lg-2">
                <label for="rows" class="form-label">Filas</label>
                <input type="number" name="rows" id="rows" min="1" pattern="^[0-9]+" class="form-control form-control-sm" placeholder="Ingrese su medida">
            </div>
            <div class="col mb-3 col-12 col-md-6 col-lg-2">
                <label for="tube" class="form-label">Tubo</label>
                <div class="input-group input-group-sm">
                    <select class="form-control form-control-sm" id="tube" name="tube" required>
                        <option selected>Seleccionar...</option>
                        <option value="3/8">3/8</option>
                    </select>
                    <span class="text-white input-group-text" style="background-color: rgb(33,136,201);">ø</span>
                </div>
            </div>
        </div>
        <li class="nav-item">
            <select class="mb-3 col-12 col-md-9 col-lg-12 form-control form-control-sm" style="visibility:hidden" id="servicios" name="servicios" onchange="add_labour_product()" required>
                <option value="1">Servicio de corte</option>
                <option value="2">Servicio de troquelado</option>
                <option value="3">Servicio de llenado</option>
                <option value="4">Parrillas</option>
                <option value="5">Codos</option>
                <option value="6">Oxigas</option>
                <option value="7">Servicio de soldadura</option>
                <option value="8">Mano de obra</option>
                <option value="9">Prueba de presión</option>
                <option value="10">Trabajos de limpieza y acabados</option>
            </select>
        </li>
        <table class="table table-bordered table-hover text-center">
            <thead style="color:#ffffff; background-color: rgb(33,136,201)">
                <tr>
                    <th class="align-text-top text-sm" scope="col">Item</th>
                    <th class="align-text-top text-sm" scope="col">Descripción</th>
                    <th class="align-text-top text-sm" scope="col">Cantidad requerida</th>
                    <th class="align-text-top text-sm" scope="col">Piezas</th>
                    <th class="align-text-top text-sm" scope="col">Pulgadas ''</th>
                    <th class="align-text-top text-sm" scope="col">Total material</th>
                    <th class="align-text-top text-sm" scope="col">Precio.unit <img class="img-fluid" style="height: 35px;" src="{{asset('images/iconos/dolar.png')}}" alt="dolar"></th>
                    <th class="align-text-top text-sm" scope="col">Costo total <img class="img-fluid" style="height: 35px;" src="{{asset('images/iconos/dolar.png')}}" alt="dolar"></th>
                    <th class="align-text-top text-sm" scope="col"><i class="fas fa-check text-white"></i></th>
                    <th class="align-text-top text-sm" scope="col"><i class="fas fa-trash-alt"></th>
                </tr>
            </thead>
            <tbody class="text-sm" id="list-materials">
            </tbody>
        </table>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</body>

</html>

1 respuesta 1

1

antes que nada he visto que para ver si tienes materiales miras que el "status"[0] o "status"[1] sean 200. Esto no es una buena práctica pues normalmente las request solo tienen un código (en el caso de traer datos 200, aunque falte uno de los dos materiales).

Otra cosa que puedes hacer es que el array ya venga formateado, me refiero en vez de usar $data[XX] podrías hacer lo siguiente:

Separar data según el material, de esta forma siempre los tienes separados. Con lo que el controller quedaría así:

    $data = [
        'tubo' => [],
        'material' => []
    ];
    $response = ['status' => 500];
    
    if ($request->id_material == 1) {
        try {
            $descripcion = $request->desc_material;
            $cantidad_tubos = $request->dataSend['width'] * $request->dataSend['rows'];
            $pulgadax_rollo = 15 * 39.38;
            $piezasx_rollo = round($pulgadax_rollo / $request->dataSend['long']);
            $total_pulgadas = $request->dataSend['long'] * $cantidad_tubos;

            $rollos = round($total_pulgadas / $pulgadax_rollo);

            $data['tubo'][0] = $request->id_material;
            $data['tubo'][1] = $descripcion;
            $data['tubo'][2] = $cantidad_tubos;
            $data['tubo'][3] = $piezasx_rollo;
            $data['tubo'][4] = $total_pulgadas;
            $data['tubo'][5] = $rollos;
            
        } catch (Exception $e) {
            Log::error('error al obtener datos: ' . $e->getTrace() . ' ' . $e->getMessage());
        }
    }
    if ($request->id_material == 2) {
        try {
            $descripcion = $request->desc_material;
            $aletas_xpulgada = 10;
            $cantidad_aletas = $request->dataSend['long'] * $aletas_xpulgada;
            $pulgadax_plancha = 1.22 * 39.38;
            $piezasx_plancha = round($pulgadax_plancha / 2.5);
            $total_laminas = $cantidad_aletas / $piezasx_plancha;
            $total_pulgadas = round($total_laminas * $request->dataSend['width']);
            $metros_lamina = round($total_pulgadas / 39.38);

            $data['material'][0] = $request->id_material;
            $data['material'][1] = $descripcion;
            $data['material'][2] = $cantidad_aletas;
            $data['material'][3] = $piezasx_plancha;
            $data['material'][4] = $total_pulgadas;
            $data['material'][5] = $metros_lamina;
        } catch (Exception $e) {
            Log::error('error al obtener datos: ' . $e->getTrace() . ' ' . $e->getMessage());
        }
    }

    return response()->json(['success' => $data, 'status' => 200]);          
}

Luego en JQuery solo tienes que mirar si tiene datos y ya lo pintas en el orden que quieras.

$.ajax({
    method:'POST',
    data:{dataSend: dataSend, id_material: id_material, desc_material: desc_material},
    url:'/productos/material',
    statusCode:{
        422: function (response) {
            console.log(response);
        },
        200: function(response){
            // Ya estas en el caso del código 200 no tienes que volver a ver si es 200
            if(response['tubo'].lenght){ // Si tubo tiene datos los pintas sino, pasamos a materiales                                                   
                let newRow = tableBody.insertRow(-1);
                let count = tableBody.rows.length;
                newRow.innerHTML = '<th scope="row">' + count + '</th><input type="hidden" class="material_id" name="material_id" value="' + response['tubo'][0] + '"><td class="fw-bold">' + response['tubo'][1] + '</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold quantity" id="cantidadTubos" name="cantidad" readonly value=' + response['tubo'][2] + '> tubos</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold parts" name="piezas" readonly value=' + response['tubo'][3] + '> x rollo</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold inches" name="pulgadas" readonly value=' + response['tubo'][4] + '> tuberia</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold total_material" name="total-material" readonly value=' + response['tubo'][5] + '> rollos</td><td><input type="text" class="form-control form-control-sm text-center bg-light fw-bold sale_price" name="precio" placeholder="Ingresar precio">dolares</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold" id="total_cost_tube" name="costo-total" readonly placeholder="$0.00"></td><td><button class="btn btn-success" onclick="cost_material(this)"><i class="fas fa-check text-white"></i></button></td><td><button class="btn btn-danger" onclick="delete_row_material(this)"><i class="fas fa-trash-alt"></i></button></td>';
            }     
            if(response['material'].lenght){ // Pintamos ahora los materiales
                let newRow = tableBody.insertRow(-1);
                let count = tableBody.rows.length;
                newRow.innerHTML = '<th scope="row">' + count + '</th><input type="hidden" class="material_id" name="material_id" value="' + response['material'][0] + '"><td class="fw-bold">' + response['material'][1] + '</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold quantity" id="cantidadLaminas" name="cantidad" readonly value=' + response['material'][2] + '> láminas</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold parts" name="piezas" readonly value=' + response['material'][3] + '> x plancha</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold inches" name="pulgadas" readonly value=' + response['material'][4] + '> láminas</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold total_material" name="total-material" readonly value=' + response['material'][5] + '> metros</td><td><input type="text" class="form-control form-control-sm text-center bg-light fw-bold sale_price" name="precio" placeholder="Ingresar precio">dolares</td><td><input type="text" class="form-control form-control-sm form-control-plaintext text-center bg-light fw-bold" id="total_cost_lamina" name="costo-total" readonly placeholder="$0.00"></td><td><button class="btn btn-success" onclick="cost_material(this)"><i class="fas fa-check text-white"></i></button></td><td><button class="btn btn-danger" onclick="delete_row_material(this)"><i class="fas fa-trash-alt"></i></button></td>';
            }    
                       
        },
        500: function(){
            console.log('error');
        }                
    }               
});  

Hay más formas de optimizar este código pero me he centrado en indicarte como seguir.

4
  • Voxxii, acabo de editar mi pregunta con una imagen, ya hice los cambios al codigo que indicaste formatie el arreglo para los materiales; pero lo curioso esque en mi select primero esta el material con valor 1 - tubos y valor 2 - laminas y cuando doy en crear las filas lo hace sin tomar la primera opcion a pesar de que en los if del controller indico que si el id_material = 1 deberia en la primera iteacion la fila correspondiente a ese y toma la siguiente. si puedas ayudarme porfs Commented el 11 abr. 2023 a las 20:31
  • En el código indicas que sea la opción 1 u 2. Siempre mandas uno de los dos ids (pero nunca los dos). Por eso o pintas tubos o pintas materiales, si quieres oder mandar los dos tienes que cambiar el input de material por otro o hacerlo de selección múltiple y luego controlar eso en el controller
    – Voxxii
    Commented el 12 abr. 2023 a las 6:44
  • Así es en el código indico que para la primera iteración del for si es 1 entre al AJAX y en mi controller tome solo ese valor 1 enviado y ahí recién cree la fila, en la siguiente iteración que envié el 2 y cree la fila, pero por alguna razón aveces inicia envía 1 o inicia envíando el 2 , podrías darme un ejemplo de código o editar lo que me ayudaste porfs Commented el 12 abr. 2023 a las 16:07
  • Ya pude solucionar el problema quite el ajax del bucle y en el for cree un objeto con los datos que trae el select y pudo traerme la data como es al inicio. Gracias me ayudo mucho tu ejemplo Commented el 13 abr. 2023 a las 3:15

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.