I have a table that uses DataTables, and my issue is that on each product I have a 'select' to choose the warehouse it's located at, and when you do pick one it'll show you the stock available in that warehouse. Now, this works on the first page, but not on the rest nor looking for the product on the search bar. what am I doing wrong?
$(".js-agregar").on("click", function(){
fila = $(this).closest("tr");
agregar(fila);
});
var cont = 0;
total = 0;
fila = $(this).closest("tr");
$("#guardar").hide();
$('.js-table-art').parents(fila).on('change', '.js-almacen-id', mostrarValores);
function mostrarValores() {
datosProducto = document.getElementById('almacen_id').value.split('_');
$(".js-stock").fila.val(datosProducto[1]);
};
var almacen_id = $('.js-almacen-id');
almacen_id.change(function(event) {
//Recuperas el atributo index añadido a tu select
const index = $(event.target).attr('index')
//recuperas el atributo data-articulo-id añadido a tu select
const articulo_id = $(event.target).attr('data-articulo-id')
$.ajax({
url: "{{ route('get_products_by_id') }}",
method: 'GET',
data: {
almacen_id: event.target.value,
//Añades tu el id de tu articulo a tu solicitud HTTP
articulo_id: articulo_id
},
success: function(data) {
$(".js-stock").eq(index).val(data.disponible);
$(".js-almacen-id").eq(index).val(data.almacen_id);
$(".js-articulo-id").eq(index).val(data.articulo_id);
}
});
});
and here's my table:
<table class="table table-striped mt-0.5 table-bordered shadow-lg mt-4 js-table-art" id="articulo">
<thead class="bg-primary text-white">
<tr>
<th scope="col" width='60px'>Código</th>
<th scope="col">Imagen</th>
<th scope="col">Nombre</th>
<th scope="col">Categoría</th>
<th scope="col">Almacén</th>
<th scope="col">Disponible</th>
<th scope="col">Cantidad</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
@foreach ($articulos as $articulo)
<tr>
<td>{{ $articulo->codigo }}
</td>
@if (isset($articulo->imagen))
<td class="text-center">
<img src="/imagen/{{$articulo->imagen}}" style="height: 50px; width: 50px; border-radius: 20%;">
</td>
@else
<td class="text-center"><img src="/imagen/caja.png"
alt="" width="70" height="70"></td>
@endif
<td>{{ Str::ucfirst($articulo->nombre) }}
</td>
<td>{{ Str::ucfirst($articulo->categoria->nombre) }}</td>
@if ($articulo->detallearticulos()->count() > 1)
<td>
<select class="form-control js-almacen-id" lang="es" id="almacen_id" name="almacen_id" index={{$loop->index}} data-articulo-id={{$articulo->id}}>
<option value="" data-icon="fas fa-box" disabled selected>Buscar almacén</option>
@foreach ($articulo->detallearticulos as $detallearticulo)
<option value="{{ $detallearticulo->almacen_id }}">{{ $detallearticulo->almacen_id }} - {{ $detallearticulo->almacen->nom_alm }}</option>
@endforeach
</select>
</td>
<td style="width: 50px;">
<input type="text" name="stock" id="stock" class="form-control js-stock" disabled>
</td>
@elseif($articulo->detallearticulos()->count() == 1)
<td>
@foreach ($articulo->detallearticulos as $detallearticulo)
<input type="text" class="form-control js-almacen-nombre" readonly value="{{$detallearticulo->almacen->nom_alm}}">
<input type="hidden" class="form-control js-almacen-id" readonly value="{{$detallearticulo->almacen_id}}">
@endforeach
</td>
<td>
@foreach ($articulo->detallearticulos as $detallearticulo)
<input type="text" value="{{$detallearticulo->disponible}}" class="form-control js-stock" disabled>
@endforeach
</td>
@endif
<td>
<input type="number" class="form-control js-cantidad" min="0" max="1000" name="cantidad" step="1"
oninput="validity.valid||(value='')">
@if ($errors->has('cantidad'))
<div class="alert alert-danger">
<span class="error text-danger">{{ $errors->first('cantidad') }}</span>
</div>
@endif
</td>
<td class="text-right">
<input type="hidden" class="form-control js-articulo-id" name="articulo_id" value="{{$articulo->id}}">
<input type="hidden" class="form-control js-articulo-nombre" name="articulo_nombre" value="{{$articulo->nombre}}">
<div class="form-group">
<button type="button" class="btn btn-info float-right mt-1 js-agregar"><i class="fas fa-check"></i>Agregar</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
My DataTable:
$(document).ready(function() {
$('#articulo').DataTable({
responsive: true,
autoWidth: false,
"lengthMenu": [
[5, 10, 50, -1],
[5, 10, 50, "All"]
]
});
});
So it's kind of like this:
So, the issue was that I was using a loop->index for it to know where it'd write the stock available; and as datatables had pagination going on, the index was signaling to a row that wasn't there. I fixed it by using the .closest("tr")
almacen_id.change(function(event) {
fila = $(this).closest("tr");
$.ajax({
url: "{{ route('get_products_by_id') }}",
method: 'GET',
data: {
almacen_id: event.target.value,
articulo_id: articulo_id
},
success: function(data) {
fila.find(".js-stock").val(data.disponible);
fila.find(".js-almacen-id").val(data.almacen_id);
fila.find(".js-articulo-id").val(data.articulo_id);
}
});