Como implementar función Ajax

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]

Autor

Tema: Como implementar función Ajax - Autocomplete (Leído 3,357 veces)

Jarcx9

Desconectado

Mensajes: 10

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

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

     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

<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

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.


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

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

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

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

Tambien necesitas agregarlo al myDiv:

Código

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

y en tu javascript tambien actualizarlo:

Código

function loadXMLDoc(id)

Código

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

Código

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

Código

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


	En línea

Jarcx9

Desconectado

Mensajes: 10

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

        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


	En línea

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

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

Mensajes: 10

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

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

estoy probando otras vez diferentes formas haber

gracias


	En línea

Jarcx9

Desconectado

Mensajes: 10

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

<?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

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


	En línea

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

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

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


	En línea

Jarcx9

Desconectado

Mensajes: 10

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

<?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

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


	En línea

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

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

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


	En línea

Jarcx9

Desconectado

Mensajes: 10

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 a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	[PHP POO] Implementar código AJAX en la vista PHP	jperezmonge	5	4,727	28 Abril 2012, 20:43 pm por jhonatanAsm
	Ayuda: Autocomplete que inserte tres valores AJAX, JAVA y PHP. PHP	astaklat	0	1,823	13 Mayo 2015, 15:35 pm por astaklat
	¿Como puedo implementar una funcion recursiva en una expresion lambda de Java? Java	4dr14n31t0r	0	1,610	8 Diciembre 2015, 01:00 am por 4dr14n31t0r
	duda acerca de como implementar un función en este codigo. Programación C/C++	tayzuke	1	1,736	5 Julio 2016, 16:48 pm por AlbertoBSD
	Como implementar una función que haga esto? « 1 2 3 » Programación General	@XSStringManolo	23	9,826	29 Noviembre 2019, 01:56 am por engel lex