0

Compañeros, esta vez necesito ayuda, debido a que tengo 2 problemas:

  1. AJAX no me toma el texto escrito en el input con id='bus1'.
  2. AJAX no me envía ningún dato, por lo que me aparece el error de índices indefinidos al lamar pedir.php.

A continuación, dejo el código que uso. En el comentario, está el código real para que tengan visión clara, pero se ejecutará un HTML de ejemplo.

function obtener_datos(){
    $.ajax({                        
        type:"POST",                 
        url:"pedir.php",
        success: function(data)             
        {
            $('#categorias').html(data);               
        }
    });
}
$(document).on("keyup", "#bus1", function(){
  event.preventDefault();
        var data=$(this).text(); 
        var ficha=$(this).data("bus1");
        alert(data);
        alert(ficha);
        $.ajax({                        
        type:"POST",                 
        url:"pedir.php",
        data:{id:ficha},
        success: function(data)             
        {
            obtener_datos();               
        }
    });
})
      #muestreo{
  position:absolute;
  top:1%;
  width:81%;
  left:19%;
  margin:center;
  z-index:100;
}
.titulos{
  width:6%;
  height:20%;
  background-color:#238276;
  color:#ffffff;
}
.generalidades{
  width:15%;
  text-align:center;
  max-width:1000px;
}
.immg{
  width:0.1%;
}
#producto{
  width:100%;
  height:55px;
}
.imagen{
  position:relative;
  left:0%;
}
.tabla{
  position:relative;
  top: 1%;
  left:8%;
  width:90%;
  height:90%;
  word-wrap:break-word;
    word-break:normal;
    display:block;
    text-align:center;
}
#referencia{
  margin:auto;
  width:50%;
  height:50%;
  cursor:pointer;
}
summary{
  cursor:pointer;
  padding:1em;
}
details{
  background-color:#DCDAD8;
  padding:2px;
}
.programa{
  position:relative;
  width:98%;
  margin:top;
  background-color:#C1BCB7;
  opacity:0.9;
  text-align:center;
  border: 1px solid #959391;
}
.hijo{
  position:relative;
  width:96%;
  margin:top;
  background-color:#CDCBC9;
  opacity:0.9;
  text-align:center;
  border: 1px solid #959391;
  margin:auto;
  padding:1em;
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <!-- SCRIPTS JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <form method="POST" action="pedir.php" id="formulario">
      <!--<?php
      $programas=mysqli_query($mysqli, "SELECT * FROM programas");
      /*while ($prog=mysqli_fetch_array($programas)) {
        echo "<details class='programa'>";
        echo "<summary>";
        echo $prog['nombre_prog'];
        echo "</summary>";
        echo "<input type='text' id='bus1' data-bus1='" . $prog['id_prog'] . "'>";
        echo "<section id='categorias'></section>";
        echo "</details>";
      }*/
      ?>-->
      <input type='text' id='bus1' data-bus1='1'>
    </form>
  </body>
</html>

No puedo usar var data=$(form).serialize(); debido a que necesito que también me envíe el id del programa a pedir.php; por favor, si alguien me puede ayudar, se lo agradecería.

Por si acaso, aquí está pedir.php:

<?php
include('conexion.php');
header('Content-Type: text/html; charset=ISO-8859-1');
$categorias=$_POST['categoria'];
$id=$_POST['id'];
if (isset($_POST['categoria'])) {
    $productos=mysqli_query($mysqli, "SELECT * FROM productos WHERE sub_categoria_prod LIKE '$categorias' GROUP BY sub_categoria_prod");
        while($prod=mysqli_fetch_array($productos)){
            echo "<details class='hijo'>";
            echo "<summary>";
            echo $prod['sub_categoria_prod'];
            echo "</summary>";
            $sub_categoria=$prod['sub_categoria_prod'];
            $id=$prog['id_prog'];
            $informacion=mysqli_query($mysqli, "SELECT * FROM productos WHERE sub_categoria_prod='$sub_categoria' AND id_prog='$id' AND(nombre_prod LIKE '%$buscar%' OR sibol_prod LIKE '%$buscar%')");
            while ($i=mysqli_fetch_array($informacion)) {
                echo "<table border='1'class='tabla'>";
                echo "<tr>";
                echo "<th class='titulos'>Nombre del producto (SIBOL).</th>";
                echo "<td class='generalidades'><strong>" . $i['sibol_prod'] . "</strong></td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Nombre comercial del producto.</th>";
                echo "<td class='generalidades'>" . $i['nombre_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Calidad.</th>";
                echo "<td class='generalidades'>" . $i['calidad_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Generalidades.</th>";
                echo "<td class='generalidades'>" . $i['generalidades_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Requisitos generales.</th>";
                echo "<td class='generalidades'>" . $i['re_generales_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Requisitos espec&iacute;ficos.</th>";
                echo "<td class='generalidades'>" . $i['re_espe_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Empaque y rotulado.</th>";
                echo "<td class='generalidades'>" . $i['empaque_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Presentaci&oacute;n.</th>";
                echo "<td class='generalidades'>" . $i['presentacion_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Imagen de referencia.</th>";
                echo "<td class='generalidades'><img src='" . $i['imagen_prod'] . "' id='referencia'></td>";
                echo "</tr>";
                echo "</table>";
            }
            echo "</details>";
        }
    }else{
        $productos=mysqli_query($mysqli, "SELECT * FROM productos GROUP BY sub_categoria_prod WHERE id_prog='$id'");
        while($prod=mysqli_fetch_array($productos)){
            echo "<details class='hijo'>";
            echo "<summary>";
            echo $prod['sub_categoria_prod'];
            echo "</summary>";
            $categoria=$prod['sub_categoria_prod'];
            $id=$prog['id_prog'];
            $informacion=mysqli_query($mysqli, "SELECT * FROM productos WHERE sub_categoria_prod='$categoria' AND id_prog='$id'");
            while ($i=mysqli_fetch_array($informacion)) {
                echo "<table border='1'class='tabla'>";
                echo "<tr>";
                echo "<th class='titulos'>Nombre del producto (SIBOL).</th>";
                echo "<td class='generalidades'><strong>" . $i['sibol_prod'] . "</strong></td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Nombre comercial del producto.</th>";
                echo "<td class='generalidades'>" . $i['nombre_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Calidad.</th>";
                echo "<td class='generalidades'>" . $i['calidad_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Generalidades.</th>";
                echo "<td class='generalidades'>" . $i['generalidades_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Requisitos generales.</th>";
                echo "<td class='generalidades'>" . $i['re_generales_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Requisitos espec&iacute;ficos.</th>";
                echo "<td class='generalidades'>" . $i['re_espe_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Empaque y rotulado.</th>";
                echo "<td class='generalidades'>" . $i['empaque_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Presentaci&oacute;n.</th>";
                echo "<td class='generalidades'>" . $i['presentacion_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Imagen de referencia.</th>";
                echo "<td class='generalidades'><img src='" . $i['imagen_prod'] . "' id='referencia'></td>";
                echo "</tr>";
                echo "</table>";
            }
            echo "</details>";
        }
        echo "</details>";
    }
    ?>
6
  • 1
    Porque tienes 2 llamadas ajax?
    – alanfcm
    Commented el 1 mar. 2019 a las 15:52
  • ¿Te sale algún error en la consola? Tienes un event.preventDefault(); que no debería ir ahí me parece. Commented el 1 mar. 2019 a las 15:53
  • La primera llamada AJAX, es para que traiga la información consultada sólo cuando el keyup se cumpla; y no me sale error. Así como en ele ejemplo, no me sale nada, no me toma el texto ingresado en el input.
    – Saco04
    Commented el 1 mar. 2019 a las 15:55
  • que quieres hacer con esos dos ajax? , en realidad no le veo mucho sentido. Commented el 1 mar. 2019 a las 15:55
  • Lo que quiero, es que al ingresar un texto en el input, me llame vaya llamando los registros. Quiero hacer una búsqueda de datos en tiempo real.
    – Saco04
    Commented el 1 mar. 2019 a las 15:59

1 respuesta 1

0

Mira te recomiendo que intentes de está manera:

$("#bus1").on("keyup", function(e) {
    e.preventDefault();
    var el=$("#bus1");
    var data=el.text();
    var ficha=el.data("bus1"); // en caso de que sea el atributo data-bus1
    $.ajax({
        type:"POST",
        dataType:"JSON",
        data: {id:ficha}, //solo te envia el parametro ID
        success: function(data) {
            obtener_datos();
        }
   });
3
  • ¿Para qué es la e en esta parte: function(e)?
    – Saco04
    Commented el 1 mar. 2019 a las 16:10
  • Ya lo intenté, pero no me hace nada. Intenté con un alert(ficha) para saber si lo toma, pero no aparece.
    – Saco04
    Commented el 1 mar. 2019 a las 16:10
  • Puedes seguir este fiddle jsfiddle.net/mytxbkgo donde se ve que esta enviando el id aunque no siempre responderá el valor Commented el 1 mar. 2019 a las 16:52

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.