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>