3

Estoy trabajando en un sistema con PHP. En el cual tengo una tabla en un formulario. Lo que tengo hasta el momento, es en la primera fila de la tabla ingresar un numero de una solicitud en el input "buscaSolicitud" para buscar su respectiva información mediante una función en JS. Cuando selecciono el numero que buscaba, la información se carga automáticamente en el resto de los input de esa fila, esto funciona bien.

Mi problema es cuando agrego una nueva fila, ya que el input "buscaSolicitud" no muestra los números de las solicitudes en las filas nuevas, solo lo hace en la primera fila.

FUNCION PARA BUSCAR DATOS DE ID

 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
 <script src="js/jquery-1.9.1.js"></script>
 <script src="js/jquery-ui.js"></script>

 <script type="text/javascript">
 $(function() {
    $("#buscaSolicitud").autocomplete({
        source: "busca.php",
        minLength: 1,
        select: function(event, ui) {
        event.preventDefault();
        $('#establecimiento').val(ui.item.establecimiento);
        $('#carrera').val(ui.item.carrera);
        $("#buscaSolicitud").focus();               
        }    
     });
 });
 </script>

TABLA

 <table id="dataTable">
   <thead>
    <tr>
        <th style="text-align:left;">ID</th>
        <th style="text-align:left;">N° Solicitud</th>
        <th style="text-align:left;">Establecimiento</th>
        <th style="text-align:left;">Carrera</th>
    </tr>
   </thead>
   <tbody>
        <tr>
            <td>1</td>
            <td><input autofocus class="form-control" value="" autocomplete="off" id="buscaSolicitud" name="buscaSolicitud[]" type="text"></td>
            <td><input type="readOnly" id="establecimiento" name="establecimiento[]"></td>
            <td><input type="readOnly" id="carrera" name="carrera[]"></td>      
        </tr>
    </tbody>
 </table>

 <input type="button" value="Add Row" onclick="addRow('dataTable')" />
 <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 <input type="submit" value="ENVIAR">

FUNCION PARA AGREGAR Y ELIMINAR FILAS

<script type="text/javascript">
var myTable = document.querySelector("table"); 
function addRow(){ 
var row = myTable.insertRow(myTable.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = '';;
cell2.innerHTML = '<input autofocus class="form-control" value="" autocomplete="off" id="buscaSolicitudd" name="buscaSolicitudd[]" type="text">';;
cell3.innerHTML = '<input type="readOnly" id="establecimiento" name="establecimiento[]">';;
cell4.innerHTML = '<input type="readOnly" id="carrera" name="carrera[]">;;
}

function deleteRow(){
var rowCount = myTable.rows.length;
if(rowCount <= 2) 
{
    alert('No es posible eliminar primera fila');
} 
else 
{
    myTable.deleteRow(rowCount -1);
}
}
</script>

BUSCA.PHP

if (isset($_GET['term']))
{
   include('./dbcontroller.php');
   $db_handle = new DBController();

   $return_arr = array();

 $sql = "SELECT id, establecimiento, carrera
         FROM solicitudes 
         WHERE id LIKE '%".$_GET['term']."%' LIMIT 5";

 $faq = $db_handle->runQuery($sql);

foreach($faq as $k=>$v) 
{
    $row_array['value'] = $faq[$k]['id'];
    $row_array['establecimiento']=$faq[$k]['establecimiento'];
    $row_array['carrera']=$faq[$k]['carrera'];

    array_push($return_arr,$row_array);
}
echo json_encode($return_arr);

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

5
  • 2
    Muy probablemente es otro caso de los id deben ser únicos en el DOM...
    – padaleiana
    Commented el 28 ago. a las 19:51
  • 1
    pero el html que agregas en las celdas no esta correcto.. o es mi impresion?
    – gbianchi
    Commented el 28 ago. a las 19:53
  • Al agregar la fila lo hace correctamente, es decir, crea cada input sin problemas. No se si te refieres a eso.
    – SBK22
    Commented el 28 ago. a las 19:54
  • Listo, agregado.
    – SBK22
    Commented el 28 ago. a las 20:22
  • 1
    Incluso suponiendo el caso de que sí funcionara el mismo evento para todos los input (que no será así porque, repito, los id deben ser únicos en el DOM): uno es buscaSolicitud, y el otro es buscaSolicitudd.
    – padaleiana
    Commented el 28 ago. a las 20:28

1 respuesta 1

5

Por un lado (y muy importante) lo que te comento @padaleiana:

...los id deben ser únicos en el DOM

Pero! en tu caso, ese no es el único problema.

Otro problema es que solo creas el autocomplete cuando se carga la página, y en ese momento en el DOM solo existe el <input> de la primer fila.

Luego, dinámicamente creas otro <input>, pero no volves a invocar el crear autocomplete sobre el nuevo elemento del DOM.

Solución:

Podrías evitar utilizar el atributo id para identificar los elementos y en su lugar podrías usar una class. Por ejemplo: class="buscaSolicitud"

Además, es necesario crear el autocomplete cada vez que se agrega la fila.

Ejemplo:

var myTable = document.querySelector("table");

function addRow() {
  let qty = myTable.rows.length,
    row = myTable.insertRow(qty);
  
  // Agregamos el contenido a la fila
  row.innerHTML = `<td>${qty}</td>
      <td><input type="text" autofocus class="form-control buscaSolicitud" value="" autocomplete="off" name="buscaSolicitud[]" type="text"></td>
      <td><input type="text" readonly class="establecimiento" name="establecimiento[]"></td>
      <td><input type="text" readonly class="carrera" name="carrera[]"></td>`;

  // Creamos el autocomplete para el input de la fila creada
  $(row).find('input.buscaSolicitud').autocomplete({
    source: "busca.php",
    minLength: 1,
    select: function(event, ui) {
      // Buscamos la fila desde donde se disparo el evento
      let $row = $(event.target).closest('tr');
      event.preventDefault();

      $row.find('input.establecimiento').val(ui.item.establecimiento);
      $row.find('input.carrera').val(ui.item.carrera);
      $row.find('input.buscaSolicitud').focus();
    }
  });
}

function deleteRow() {
  var rowCount = myTable.rows.length;
  if (rowCount <= 2) {
    alert('No es posible eliminar primera fila');
  } else {
    myTable.deleteRow(rowCount - 1);
  }
}


// Creamos la primer fila
addRow()
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>

<table id="dataTable">
  <thead>
    <tr>
      <th style="text-align:left;">ID</th>
      <th style="text-align:left;">N° Solicitud</th>
      <th style="text-align:left;">Establecimiento</th>
      <th style="text-align:left;">Carrera</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<input type="submit" value="ENVIAR">


PD: Tu código original tenía varios errores, como el error de no cerrar comillas en cell4, o el typo en el name="buscaSolicitudd[]", etc.

4
  • Me funcionó.... Muy agradecido Marcos por tu ayuda y darte el tiempo para revolver mi problema.
    – SBK22
    Commented el 28 ago. a las 20:42
  • Estaba validando la información, y observo que cuando agrego una nueva fila y busco el numero de solicitud y lo selecciono, NO carga la información en los otros Input. Estoy revisando que puede faltar, pero habrá algún error en alguna parte del código??
    – SBK22
    Commented el 28 ago. a las 20:52
  • 1
    @SBK22, puede ser que el problema este en la función del evento select. Ahora me fijo
    – Marcos
    Commented el 28 ago. a las 20:54
  • 1
    Estaba todo bien, encontré el error que tenia y lo solucioné, nuevamente muchas gracias @Marcos.
    – SBK22
    Commented el 28 ago. a las 20:57

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.