I have a popup where I have a series of articles; In turn, I have a select (if the item is associated with more than one warehouse) to select the warehouse from which it is required to order and a function so that when selecting it, it shows you the available quantity of that item.
The problem is that if I place myself on another page of the table other than the first, the select does not perform any action on me, if I select to show me all the articles on a page it does so without problems, but being in another no longer works, what am I doing wrong?
Here is my table:
<table class="table table-striped mt-0.5 table-bordered shadow-lg mt-4" 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" name="almacen_id" id="almacen_id" lang="es" index={{ $loop->index }} data-articulo-id={{ $articulo->id }}>
<option value="" data-icon="fas fa-box" disabled selected>Buscar almacén</option>
@foreach ($detallearticulos as $detallearticulo)
@if ($detallearticulo->articulo_id == $articulo->id)
<option value="{{ $detallearticulo->almacen_id }}">{{ $detallearticulo->almacen_id }} - {{ $detallearticulo->almacen->nom_alm }}</option>
@endif
@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 ($detallearticulos as $detallearticulo)
@if ($detallearticulo->articulo_id == $articulo->id)
<input type="text" class="form-control js-almacen-nombre" name="almacen_id" id="almacen_id" readonly value="{{$detallearticulo->almacen->nom_alm}}">
<input type="hidden" class="form-control js-almacen-id" name="almacen_id" id="almacen_id" readonly value="{{$detallearticulo->almacen_id}}">
@endif
@endforeach
</td>
<td>
@foreach ($detallearticulos as $detallearticulo)
@if ($detallearticulo->articulo_id == $articulo->id)
<input type="text" value="{{ $detallearticulo->disponible }}" name="stock" id="stock" class="form-control js-stock" disabled>
@endif
@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>
and my find function:
$('.table').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) {
const index = $(event.target).attr('index');
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);
}
});
});
The warehouse area gives you almacen_id
what it is looking for in the database, the quantity of the item available, and then writes it to you in the 'available' part
I think the problem is that I have a loop->index
in the table and $('.js-almacen-id').eq(index).val(data.almacen_id);
he is writing the stock to me in that 'position' in the table, how can I make the index take it as the row in which it is placed?
The problem is probably due to the fact that you have made the bind directly on
$('.js-almacen-id')
it, but those elements are dynamic, not static. That is, when changing the page, the current ones are deleted and new ones appear. Those new ones don't have the bind done and that's why they don't work.You would have to do something similar to what you have done at the end of your code with the
keyup
. jQuery .on() :I choose
.table
because I assume that element doesn't redraw on page change, but if it did, you might have to usedocument
or some parent element.the problem was that I was using a
$loop->index
inside my table, so I was taking that number as the row I had to write the available stock to, and since DataTables has pagination, obviously the row wasn't there; i solved it with.closest("tr)"