Como implementar función Ajax - Autocomplete

[Jarcx9]

Buenas parcero

Estoy realziando un proyecto en MCV + ORACLE y estoy en un dilema y no puedo hacer lo mas sencillo creo...

La idea es la siguiente, traigo varios valores de una consulta dinamica  id, producto, cantidad, etc.

En la columna productos deseo escribir el id del productos y este me debe mostrar al frente el nombre por medio de una funcion ajax.  funciona para la primera columna pero de hay para adelante si escribo en el siguiente ya no funciona pues como todos los input que se generan dinamicamente tienen el mismo name e id pues solo me va a mostrar en el primero.

Pues ya hize alguna pruebas secillas para cambiar el nombre e id del input en +1 pero quiero que cuando llege al ajax este haga lo mismo

Espero haber explicado bn

Aqui les dejo una captura






CONTROLADOR

Código (php) [Seleccionar] Expandir

public function listarProductosAjax()
    {
        $aux = $_POST['q'];
       // $aux1 = $_GET['id'];
       

        $m = new Model(Config::$mvc_bd_usuario,
                    Config::$mvc_bd_clave, Config::$mvc_bd_hostname);

        $productoajax = $m->verProductoAjax($aux);

        $paramsVerAjax = $productoajax;

       

       return $paramsVerAjax;
    }


MODELO

Código (php) [Seleccionar] Expandir


    public function verProductoAjax($id)
       {
        $id = htmlspecialchars($id);
        $id1=1;

        $sql="select PRO_NOMBRE from PRODUCTOS where PRO_ID LIKE '".$id."%'";


        $result = oci_parse($this->conexion,$sql);
        oci_execute($result, OCI_DEFAULT);
        //$devolucion = array();

        $row = oci_fetch_array($result);
       echo $row['PRO_NOMBRE'];
       // $row = $result;
       // return $row;
       }

VISTAS

Código (php) [Seleccionar] Expandir


<div class="table-responsive">
<table align="center" class="table table-condensed table-hover">
    <tr>
        <th>#</th>
        <th>Producto</th>
        <th>...</th>
        <th>Cantidad</th>
        <th>Reserva</th>        
        <th>Producto</th>
        <th>Cantidad</th>
       
        <th>Tipo Reserva</th>
       

    </tr>

<?php 


?>
 <?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
<?php 


$nameb="bus";
$sum++;
//$sumando=$sum+1;
$bus=$nameb.$sum;
echo $bus;
?>

    <tr>
        <td><?php echo $paramsPD1['PD_ID'] ?></td>
        <td>        

           
[B]          Buscar <input type="text" id="<?php echo $bus ?>"
name="<?php echo $bus ?>" onkeyup="loadXMLDoc()" required /></td>

<td><div id="myDiv"> </div></td>
[/B]
     
        <td><input type="number" name="cantidad" min="1" required placeholder="Cantidad de Productos" class="form-control" id="" size="" value="<?php echo $paramsPD1['PD_CANTIDAD']?>"/></td>
         


.....

       
    </tr>
    <?php endforeach; ?>




AJAX

Código (javascript) [Seleccionar] Expandir


function loadXMLDoc()
{
var xmlhttp;

var n=document.getElementById('bus1').value;

if(n==''){
document.getElementById("myDiv").innerHTML="";
return;
}

if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
 }
xmlhttp.open("POST","index.php?ctl=buscarajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}


[Mod]: Temas de PHP van al subforo de PHP.

[MinusFour]

Primero que nada tienes ahi algo raro con el $sum. Me imagino que debe ser declarada como valor entero antes de hacerle el post incremento (lo digo por el error que se ve ahí).

Para tu problema del ID puedes simplemente pasarlo a la función:

Código (php) [Seleccionar] Expandir


name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>

Tambien necesitas agregarlo al myDiv:

Código (php) [Seleccionar] Expandir


<td><div id="myDiv<?php echo $sum ?>"> </div></td>

y en tu javascript tambien actualizarlo:

Código (javascript) [Seleccionar] Expandir


function loadXMLDoc(id)

Código (javascript) [Seleccionar] Expandir


var n=document.getElementById('bus' + id).value;


Código (javascript) [Seleccionar] Expandir


document.getElementById("myDiv" + id).innerHTML="";

Código (javascript) [Seleccionar] Expandir


document.getElementById("myDiv" + id).innerHTML=xmlhttp.responseText;
    }else{ document.getElementById("myDiv" + id).innerHTML='<img src="load.gif" width="50" height="50" />'; }

[Jarcx9]

Buenas parcero muchas gracias por la colaboracion

estuve probando tu codigo pero no di con la solucion -_-!

con respecto a esta parte de codigo esto algo q puse pero no le pongas cuidado, yo queria implementar para que cada varible bus fuera bus1,bus2..etc. para poder cogerlas en AJAX con un for o algo asi donde coja toda los bus q se crean

$nameb="bus";
$sum++;
//$sumando=$sum+1;
$bus=$nameb.$sum;
echo $bus;

El código original servia  así

Código (php) [Seleccionar] Expandir

       Buscar <input type="text" id="bus"
name="bus" onkeyup="loadXMLDoc()" required /></td>

pero como te decía se hace una consulta a oracle que me trae los datos dinamicamente y yo implemente el auto complete pero obviamente solo me sirve para el primer campo que es bus porque esa es la variable que llega a AJAX pero como de hay para abajo me crea dinamicamente varias  campos con oracle con la misma varible bus pues solo funciona la primera.

osea segundo campo = bus
tercer campo = bus
pero solo funciona la primera

[MinusFour]

Si eso lo pones en un for te va a generar mutiples etiquetas con la misma id y eso está mal.

¿Que fue exactamente lo que no funciono, de la correción que hice?

[Jarcx9]

no me muestra el resultado, como irían las variables?

$sum=0;
$sum++;
$bus=0;

Código (php) [Seleccionar] Expandir

name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>

estoy probando otras vez diferentes formas haber

gracias

[Jarcx9]

ASi tengo el codigo y no me hace nada -_-!

Código (php) [Seleccionar] Expandir

<?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
<?php 

$bus=0;
$nameb="bus";
$sum=0;
$sum++;
//$sumando=$sum+1;
//$bus=$nameb.$sum;
//echo $bus;
?>

     <tr>
         <td><?php echo $paramsPD1['PD_ID'] ?></td>
         <td>       

           
<!--Buscar <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()" required />-->
Buscar <input type="text" id="bus" name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>
          </td>
<td>
          <div id="myDiv<?php echo $sum ?>"> </div></td>
       



         
         <td><input type="number" name="cantidad" min="1" required placeholder="Cantidad de Productos" class="form-control" id="" size="" value="<?php echo $paramsPD1['PD_CANTIDAD']?>"/></td>
         
         <td><button class="btn btn-success " data-toggle="modal" data-target="#myModal2">
  Add <span class="glyphicon glyphicon-plus"></span> </button></td>
  <td><input type="text" name="" size="7" /></td>
  <td><input type="number" name="cantidad" min="1" required placeholder="Cantidad de Productos" class="form-control" id="" size="" value="<?php  ?>"/></td>
 
  <td><input type="text" name="" size="7" /></td>

       
     </tr>
     <?php endforeach; ?>

Código (javascript) [Seleccionar] Expandir


function loadXMLDoc(id)
{
var xmlhttp;

//var n=document.getElementById('bus1').value;
var n=document.getElementById('bus' + id).value;

if(n==''){
document.getElementById("myDiv" + id).innerHTML="";
//document.getElementById("myDiv").innerHTML="";
return;
}

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
   
    document.getElementById("myDiv" + id).innerHTML=xmlhttp.responseText;
    }else{ document.getElementById("myDiv" + id).innerHTML='<img src="load.gif" width="50" height="50" />'; }
   // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    //}else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
  }
xmlhttp.open("POST","index.php?ctl=buscarajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}



esta variable xmlhttp.send("q="+n); la envio a mi controller que la envia a mi modelo y la devuelve

[MinusFour]

$sum nunca va a ser diferente de 1 de esa forma. Necesitas declarar las variables fuera del for o agregarles la palabra static.

Código (php) [Seleccionar] Expandir



static $bus = 0;
static $sum = 0;



[Jarcx9]

Muchas gracias por la colaboraicon pero no me muestra nada

asi tengo el código

Código (php) [Seleccionar] Expandir

<?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
<?php 

//$bus;
//$nameb="bus";
//$sum=0;
//$sum++;
//$sumando=$sum+1;
//$bus=$nameb.$sum;
//echo $bus;

static $bus = 0;
static $sum = 0;
?>

     <tr>
         <td><?php echo $paramsPD1['PD_ID'] ?></td>
         <td>       

           
<!--Buscar <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()" required />-->
Buscar <input type="text" id="<?php echo $bus ?>" name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required />
</td>
         

           <td><div id="myDiv<?php echo $sum ?>"> </div></td>

Código (javascript) [Seleccionar] Expandir


function loadXMLDoc(id)
{
var xmlhttp;

//var n=document.getElementById('bus1').value;
var n=document.getElementById('bus' + id).value;

if(n==''){
document.getElementById("myDiv" + id).innerHTML="";
//document.getElementById("myDiv").innerHTML="";
return;
}

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
   
    document.getElementById("myDiv" + id).innerHTML=xmlhttp.responseText;
    }else{ document.getElementById("myDiv" + id).innerHTML='<img src="load.gif" width="50" height="50" />'; }
   // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    //}else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
  }
xmlhttp.open("POST","index.php?ctl=buscarajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}


tambien me aparecen estos dos mensajes

la q es la variable que llega al controller por POST
Notice: Undefined index: q in C:\xampp\htdocs\DesarrolloWeb\Desarrollo_CCL\MVC\mvc_ccl\app\Controller.php on line 189

y este es el echo que puse en el modelo
producto1

[MinusFour]

No entiendo que estas haciendo con las variables $bus y $sum. ¿Si las tienes para ser incrementadas porque comentas eso?

Código (php) [Seleccionar] Expandir


static $sum = 0;
$sum++;
$bus = 'bus';
$bus .= $sum;

[Jarcx9]

jajaja tienes razon parce no c en que estaba pensando

Ya me funciono,



Muchisimas gracias!!!