0

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>

introducir la descripción de la imagen aquí

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"

3
  • Pero vaya que te has complicado demasiado. Se complica seguirle la lógica al código. Pero creo que tu problema está en que no llamas al método select2() después de agregar. Aquí tienes fiddle con un ejemplo. Commented el 12 ene. 2022 a las 23:11
  • Hola Jonatan, agradezco la ayuda, estuve acomodando mi código, ya agregue ediciones. Estuve probando tu ejemplo pero no funciono para lo que quiero lograr, ocupo 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. Commented el 13 ene. 2022 a las 1:48
  • 1
    Mi ejemplo fue sólo algo básico. Lo que tienes que hacer es agregar tu llamado a 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étodo select() para que se apliquen los estilos y demás. Commented el 13 ene. 2022 a las 2:26

1 respuesta 1

0

Aquí la respuesta agregando las sugerencias recibidas, aclarando, primero investigue y en este sitio había preguntas relacionadas con el error que yo estaba recibiendo en consola les dejo el link:

https://stackoverflow.com/questions/58269585/select2-is-not-a-function

El error que yo tenia es que estaba sobrescribiendo la librería de jQuery, en mi proyecto utilizo "laravel auth" que por defecto crea el archivo "app.js" en la carpeta "public/js/app.js", el cual ya contiene jQuery, yo volvía a mandar llamar a jQuery en la carpeta "resources/layouts/app.blade.php" a traves de cdn, tambien acomode mis librerias ya que "app.js" la tenia hasta el fooder y se debe tener en el header porque por orden primero va jQuery y luego select2:

<head>
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
</head>

También les muestro como quedó mi llamado a select2 en mi formulario

create.blade.php

<div class="table-responsive" style="width: 100%;">
  <table class="table table-bordered" id="dataTable" style="margin-top: 3%;">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Fecha</th>
        <th scope="col">Producto </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>
      </tr>
    </tbody>
  </table>
  <br>
  <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>
  <br>
</div>

JavaScript

$(document).ready(function() {

  var i = 1;
  var con2 = 0;
  var con5 = 0;

  $('#add').click(function() {
    i++;
    con2++;
    con5++;
    $('#dataTable').append('<tr id="row' + i + '"><th scope="row"><input type="date" name="fecha[]" id="fecha' + con2 + '"></th><td><select class="form-control js-example-basic-multiple" name="producto_id[]" id="producto' + con5 + '"></select></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

    // Inicializando el select2, como nota le agregue "js-example-basic-multiple"
    // como nombre a clase del select, pueden ponerle el nombre que sea y 
    // funciona igual yo lo tome de la documentación que leí y así lo deje

    var selected = $('.js-example-basic-multiple').attr('data-selected');

    $('.js-example-basic-multiple').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.codigo,
                id: item.id
              }
            })
          };
        },
        cache: true,
      }

    });

  });

  $(document).on('click', '.btn_remove', function() {

    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

});

Ruta

Route::get('/autocomplete-search-producto', [RegisterOSController::class, 'getProducto']);

Controlador

public function getProducto(Request $request) {

if ($request - > ajax()) {

$productos = inventario::join('producto', 'producto.id', '=', 'inventario.producto_id') -
  > join('os', 'os.id', '=', 'inventario.OS_id') -
  > select('codigo', 'producto.id AS productoID') -
  > where('os.id', $request - > idOrden) - > get();

foreach($productos as $p) {
  $t[$p - > productoID] = $p - > codigo;
}

return response() - > json($t);

}

}

También les recomiendo revisar la documentación de select2, aqui les dejo el link donde explica como hacer busquedas:

https://select2.org/searching

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.