espero puedan ayudar
Tengo una tabla dinámica en laravel con boton para agregar mas filas debajo, estas filas las creo con javascript:
<table class="table table-bordered" id="dataTable">
<thead class="thead-dark">
<tr>
<th scope="col">Fecha</th>
<th scope="col">Cantidad</th>
<th scope="col">Producto </th>
<th scope="col">Descripción</th>
<th scope="col">Evidencia Fotográfica</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="date" name="fecha" id="fecha"></th>
<td><input type="text" name="cantidad" id="cantidad"></td>
<td>
<select class="form-control" name="producto_id" id="producto_id"></select>
</td>
<td><input type="text" name="descripcion" id="descripcion"></td>
<td>
<input type="file" name="file" id="file" accept="image/*">
<br> @error('file')
<small class="text-danger">{{ $message }}</small> @enderror
</td>
</tr>
</tbody>
</table>
<div class="row" style="margin-left: 10px;">
<td><button type="button" name="add" id="add" class="btn btn-success">Agregar Más</button></td>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
var con2 = 0;
var con3 = 0;
var con4 = 0;
var con5 = 0;
var con6 = 0;
var con7 = 0;
$('#add').click(function(){
i++;
con2++;
con3++;
con4++;
con5++;
con6++;
con7++;
$('#dataTable').append('<tr id="row'+i+'"><th scope="row"><input type="date" name="fecha" id="fecha'+con2+'"></th><td><input type="text" name="cantidad" id="cantidad'+con4+'"></td><td><select class="form-control select2" name="producto_id" id="producto_id'+con5+'"></select></td><td><input type="text" name="descripcion" id="descripcion'+con6+'"></td><td><input type="file" name="file" id="file'+con7+'" accept="image/*"><br></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
$('#producto_id').select2({width: '100%'});
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
Lo que quiero lograr es que cuando agregue la fila, se haga una petición ajax para obtener el listado de productos, tal como lo hago con la primera fila:
<td>
<select class="form-control" name="producto_id" id="producto_id"></select>
</td>
script con libreria select2 de jquery que realiza la busqueda:
<script type="text/javascript">
$('#producto_id').select2({
width: '100%',
placeholder: 'Buscar producto',
ajax: {
url: '/autocomplete-search-producto',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.descripcionProd,
id: item.id
}
})
};
},
cache: true
}
});
</script>
Pero lo que obtengo es un error "select2 is not a function"
select2()
después de agregar. Aquí tienes fiddle con un ejemplo.select2()
que hace el ajax justo después de cuando llamas al método agregar. Cada vez que creas un<select>
debes llamar al métodoselect()
para que se apliquen los estilos y demás.