Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » Como implementar función Ajax - Autocomplete

AJAX - Como implementar función Ajax - Autocomplete

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Como implementar función Ajax - Autocomplete

Publicado por javier (1 intervención) el 29/09/2014 23:33:02
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
thump_9093850autocometa





CONTROLADOR
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>        
 
            
          Buscar <input type="text" id="<?php echo $bus ?>"
name="<?php echo $bus ?>" onkeyup="loadXMLDoc()" required /></td>
 
 <td><div id="myDiv"> </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>
          
 
 
.....
 
        
     </tr>
     <?php endforeach; ?>





AJAX


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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);
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

					
sin imagen de perfil
Val: 4
Ha disminuido 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX
Como implementar función Ajax - Autocomplete
Publicado por Ismael (3 intervenciones) el 21/12/2014 16:37:34
Hola,

 te recomendaría que donde llamas a la función AJAX  onkeyup="loadXMLDoc()" también le pases como parámetro el id o el secuencial  onkeyup="loadXMLDoc(<?php echo $sum ?>)", yo le pasaría el secuencial, así cuando llama al onkeyup puedes recoger que número de campo está haciendo referencia y así cuando recojas las respuesta del script php y vayas a mostrarlo ya sabe que campo es al que referencia.



 Por otro lado si estas usando los campos "dinamicos", en la funcion loadXMLDoc() no te vale tener:




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





ya que bus1 siempre cogerá el campo de bus1, entonces lo suyo sería esto: 




1
2
3
4
function loadXMLDoc(nSecuencial){
 var n=document.getElementById('bus'+nSecuencial).value;
....
}



y con esta idea es como sería....



Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar