elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  Como implementar función Ajax - Autocomplete
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como implementar función Ajax - Autocomplete  (Leído 3,641 veces)
Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Como implementar función Ajax - Autocomplete
« en: 29 Septiembre 2014, 23:21 pm »

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
  1. public function listarProductosAjax()
  2.     {
  3.         $aux = $_POST['q'];
  4.        // $aux1 = $_GET['id'];
  5.  
  6.  
  7.         $m = new Model(Config::$mvc_bd_usuario,
  8.                     Config::$mvc_bd_clave, Config::$mvc_bd_hostname);
  9.  
  10.         $productoajax = $m->verProductoAjax($aux);
  11.  
  12.         $paramsVerAjax = $productoajax;
  13.  
  14.  
  15.  
  16.        return $paramsVerAjax;
  17.     }


MODELO
Código
  1.     public function verProductoAjax($id)
  2.        {
  3.         $id = htmlspecialchars($id);
  4.         $id1=1;
  5.  
  6.         $sql="select PRO_NOMBRE from PRODUCTOS where PRO_ID LIKE '".$id."%'";
  7.  
  8.  
  9.         $result = oci_parse($this->conexion,$sql);
  10.         oci_execute($result, OCI_DEFAULT);
  11.         //$devolucion = array();
  12.  
  13.         $row = oci_fetch_array($result);
  14.        echo $row['PRO_NOMBRE'];
  15.        // $row = $result;
  16.        // return $row;
  17.        }

VISTAS
Código
  1. <div class="table-responsive">
  2. <table align="center" class="table table-condensed table-hover">
  3.     <tr>
  4.         <th>#</th>
  5.         <th>Producto</th>
  6.         <th>...</th>
  7.         <th>Cantidad</th>
  8.         <th>Reserva</th>        
  9.         <th>Producto</th>
  10.         <th>Cantidad</th>
  11.  
  12.         <th>Tipo Reserva</th>
  13.  
  14.  
  15.     </tr>
  16.  
  17. <?php
  18.  
  19.  
  20. ?>
  21.  <?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
  22. <?php
  23.  
  24.  
  25. $nameb="bus";
  26. $sum++;
  27. //$sumando=$sum+1;
  28. $bus=$nameb.$sum;
  29. echo $bus;
  30. ?>
  31.  
  32.     <tr>
  33.         <td><?php echo $paramsPD1['PD_ID'] ?></td>
  34.         <td>        
  35.  
  36.  
  37. [B]          Buscar <input type="text" id="<?php echo $bus ?>"
  38. name="<?php echo $bus ?>" onkeyup="loadXMLDoc()" required /></td>
  39.  
  40. <td><div id="myDiv"> </div></td>
  41. [/B]
  42.  
  43.         <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>
  44.  
  45.  
  46.  
  47. .....
  48.  
  49.  
  50.     </tr>
  51.     <?php endforeach; ?>
  52.  
  53.  


AJAX
Código
  1. function loadXMLDoc()
  2. {
  3. var xmlhttp;
  4.  
  5. var n=document.getElementById('bus1').value;
  6.  
  7. if(n==''){
  8. document.getElementById("myDiv").innerHTML="";
  9. return;
  10. }
  11.  
  12. if (window.XMLHttpRequest)
  13.  {// code for IE7+, Firefox, Chrome, Opera, Safari
  14.  xmlhttp=new XMLHttpRequest();
  15.  }
  16. else
  17.  {// code for IE6, IE5
  18.  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  19.  }
  20. xmlhttp.onreadystatechange=function()
  21.  {
  22.  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  23.    {
  24.    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  25.    }else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
  26.  }
  27. xmlhttp.open("POST","index.php?ctl=buscarajax",true);
  28. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  29. xmlhttp.send("q="+n);
  30. }
  31.  

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


« Última modificación: 8 Octubre 2014, 00:25 am por #!drvy » En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Como implementar función Ajax - Autocomplete
« Respuesta #1 en: 30 Septiembre 2014, 01:04 am »

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
  1. name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>

Tambien necesitas agregarlo al myDiv:

Código
  1. <td><div id="myDiv<?php echo $sum ?>"> </div></td>

y en tu javascript tambien actualizarlo:

Código
  1. function loadXMLDoc(id)

Código
  1. var n=document.getElementById('bus' + id).value;
  2.  

Código
  1. document.getElementById("myDiv" + id).innerHTML="";

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


En línea

Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: Como implementar función Ajax - Autocomplete
« Respuesta #2 en: 30 Septiembre 2014, 15:46 pm »

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
  1.        Buscar <input type="text" id="bus"
  2. 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
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Como implementar función Ajax - Autocomplete
« Respuesta #3 en: 30 Septiembre 2014, 15:57 pm »

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?
En línea

Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: Como implementar función Ajax - Autocomplete
« Respuesta #4 en: 30 Septiembre 2014, 16:10 pm »

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

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


Código
  1. name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>

estoy probando otras vez diferentes formas haber

gracias
En línea

Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: Como implementar función Ajax - Autocomplete
« Respuesta #5 en: 30 Septiembre 2014, 16:14 pm »

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


Código
  1. <?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
  2. <?php
  3.  
  4. $bus=0;
  5. $nameb="bus";
  6. $sum=0;
  7. $sum++;
  8. //$sumando=$sum+1;
  9. //$bus=$nameb.$sum;
  10. //echo $bus;
  11. ?>
  12.  
  13.     <tr>
  14.         <td><?php echo $paramsPD1['PD_ID'] ?></td>
  15.         <td>        
  16.  
  17.  
  18. <!--Buscar <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()" required />-->
  19. Buscar <input type="text" id="bus" name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>
  20.          </td>
  21. <td>
  22.          <div id="myDiv<?php echo $sum ?>"> </div></td>
  23.  
  24.  
  25.  
  26.  
  27.  
  28.         <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>
  29.  
  30.         <td><button class="btn btn-success " data-toggle="modal" data-target="#myModal2">
  31.  Add <span class="glyphicon glyphicon-plus"></span> </button></td>
  32.  <td><input type="text" name="" size="7" /></td>
  33.  <td><input type="number" name="cantidad" min="1" required placeholder="Cantidad de Productos" class="form-control" id="" size="" value="<?php  ?>"/></td>
  34.  
  35.  <td><input type="text" name="" size="7" /></td>
  36.  
  37.  
  38.     </tr>
  39.     <?php endforeach; ?>



Código
  1. function loadXMLDoc(id)
  2. {
  3. var xmlhttp;
  4.  
  5. //var n=document.getElementById('bus1').value;
  6. var n=document.getElementById('bus' + id).value;
  7.  
  8. if(n==''){
  9. document.getElementById("myDiv" + id).innerHTML="";
  10. //document.getElementById("myDiv").innerHTML="";
  11. return;
  12. }
  13.  
  14. if (window.XMLHttpRequest)
  15.  {// code for IE7+, Firefox, Chrome, Opera, Safari
  16.  xmlhttp=new XMLHttpRequest();
  17.  }
  18. else
  19.  {// code for IE6, IE5
  20.  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  21.  }
  22. xmlhttp.onreadystatechange=function()
  23.  {
  24.  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  25.    {
  26.  
  27.    document.getElementById("myDiv" + id).innerHTML=xmlhttp.responseText;
  28.    }else{ document.getElementById("myDiv" + id).innerHTML='<img src="load.gif" width="50" height="50" />'; }
  29.   // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  30.    //}else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
  31.  }
  32. xmlhttp.open("POST","index.php?ctl=buscarajax",true);
  33. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  34. xmlhttp.send("q="+n);
  35. }
  36.  


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

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Como implementar función Ajax - Autocomplete
« Respuesta #6 en: 30 Septiembre 2014, 16:20 pm »

$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
  1.  
  2. static $bus = 0;
  3. static $sum = 0;
  4.  
  5.  
En línea

Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: Como implementar función Ajax - Autocomplete
« Respuesta #7 en: 30 Septiembre 2014, 16:29 pm »

Muchas gracias por la colaboraicon pero no me muestra nada

asi tengo el código

Código
  1. <?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
  2. <?php
  3.  
  4. //$bus;
  5. //$nameb="bus";
  6. //$sum=0;
  7. //$sum++;
  8. //$sumando=$sum+1;
  9. //$bus=$nameb.$sum;
  10. //echo $bus;
  11.  
  12. static $bus = 0;
  13. static $sum = 0;
  14. ?>
  15.  
  16.     <tr>
  17.         <td><?php echo $paramsPD1['PD_ID'] ?></td>
  18.         <td>        
  19.  
  20.  
  21. <!--Buscar <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()" required />-->
  22. Buscar <input type="text" id="<?php echo $bus ?>" name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required />
  23. </td>
  24.  
  25.  
  26.           <td><div id="myDiv<?php echo $sum ?>"> </div></td>



Código
  1. function loadXMLDoc(id)
  2. {
  3. var xmlhttp;
  4.  
  5. //var n=document.getElementById('bus1').value;
  6. var n=document.getElementById('bus' + id).value;
  7.  
  8. if(n==''){
  9. document.getElementById("myDiv" + id).innerHTML="";
  10. //document.getElementById("myDiv").innerHTML="";
  11. return;
  12. }
  13.  
  14. if (window.XMLHttpRequest)
  15.  {// code for IE7+, Firefox, Chrome, Opera, Safari
  16.  xmlhttp=new XMLHttpRequest();
  17.  }
  18. else
  19.  {// code for IE6, IE5
  20.  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  21.  }
  22. xmlhttp.onreadystatechange=function()
  23.  {
  24.  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  25.    {
  26.  
  27.    document.getElementById("myDiv" + id).innerHTML=xmlhttp.responseText;
  28.    }else{ document.getElementById("myDiv" + id).innerHTML='<img src="load.gif" width="50" height="50" />'; }
  29.   // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  30.    //}else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
  31.  }
  32. xmlhttp.open("POST","index.php?ctl=buscarajax",true);
  33. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  34. xmlhttp.send("q="+n);
  35. }


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



En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Como implementar función Ajax - Autocomplete
« Respuesta #8 en: 30 Septiembre 2014, 16:57 pm »

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

Código
  1. static $sum = 0;
  2. $sum++;
  3. $bus = 'bus';
  4. $bus .= $sum;
En línea

Jarcx9

Desconectado Desconectado

Mensajes: 10


Ver Perfil
Re: Como implementar función Ajax - Autocomplete
« Respuesta #9 en: 30 Septiembre 2014, 17:04 pm »

jajaja tienes razon parce no c en que estaba pensando

Ya me funciono,



Muchisimas gracias!!!  ::)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines