autocompletar en campos dinamicos

JeMaGa · #1 (**permalink**) 03/10/2012, 08:42

Hola Bueno tengo una pequeña pregunta, he buscado pero no se por que no funciona yo quiero crear un autocomplemento en campos dinamicos pero no me funciona, pero se que esta bien la funcion por que si funciona valga la rebundancia pero con campos fijos

Ejemplo:

Aqui creo los campos dinamicos a los que quiero que se queden como autocomplemento

Código Javascript:

Ver original<script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */
 
    /* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */
 
    var posicionCampo=1;
 
    /* Declaramos la función agregarUsuario( ) */
 
    function agregarUsuario(){
 
/* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
 
    nuevaFila = document.getElementById("tabla").insertRow(-1);
 
    /* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
    nuevaFila.id=posicionCampo;
 
    nuevaCelda=nuevaFila.insertCell(-1);
 
    nuevaCelda.innerHTML="<td><input type='text' id='Especifica'  name='Especificas["+posicionCampo+"]' value=''></td>";
 
    nuevaCelda=nuevaFila.insertCell(-1);
 
    nuevaCelda.innerHTML="<td> <input type='text' size='15'  name='Resultado["+posicionCampo+"]' ></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
 
 
 
    nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
    /*----------------------------------------------------------------------*/
 
    
    /* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
 
    posicionCampo++;
 
    }
 
    /* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
 
    function eliminarUsuario(obj){
 
    var oTr = obj;
 
    while(oTr.nodeName.toLowerCase()!='tr'){
 
    oTr=oTr.parentNode;
 
    }
 
    var root = oTr.parentNode;
 
    root.removeChild(oTr);
 
    }
 
    /* Cerramos el código Javascript */
 
    </script>

Esta es la parte de la consulta y la lista desplegable en el campo fijo si funciona pero en el dinamico no

Código PHP:

Ver original<?php
require('Conexion.php');
 
$con = "select distinct `resuktado` from `mediosexternos`";
$query = mysql_query($con);
?>
 
<script>
    $(function() {
    
    <?php
 
    while($row = mysql_fetch_array($query)) {
 
    $cliente[]= '"'.$row['resuktado'].'"';
    }
    
 
    $arreglo1= implode(", ", $cliente);
 
    ?>
    
    var availableTags1 = new Array(<?php echo $arreglo1; ?>);
 
 
    $( "#Especifica" ).autocomplete({
    source: availableTags1
    });
    
    $( "#Resultado["+posicionCampo+"]" ).autocomplete({
    source: availableTags1
    });
    
/*------------------------------------------------------------*/    
    });
 </script>

este es el resto del formulario aqui es donde incluyo el campo fijo al cual si le funciona la lista desplegable

Código PHP:

Ver original<body>
 
<center>
<input name="Agregar" type="button" value="Agregar" onClick="agregarUsuario()">
</center>
 
<table width="60%" border="1" id="tabla">
  <tr>
    <th scope="row">Especificacion</th>
    <th scope="row">Resultado <input type="text" name="Especifica" id="Especifica"></th>
  </tr>
</table>

agradesco toda la ayuda brindada :)

Dradi7 · #2 (**permalink**) 03/10/2012, 10:18

Primero por definición debes comprender que solo debe existir un id por cada elemento del formulario y no como lo estas haciendo.

Mira como deberia quedar tu codigo para que funcione

Código Javascript:

Ver originalfunction agregarUsuario(){
 
/* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
 
    nuevaFila = document.getElementById("tabla").insertRow(-1);
 
    /* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
    nuevaFila.id=posicionCampo;
 
    nuevaCelda=nuevaFila.insertCell(-1);
 
    nuevaCelda.innerHTML="<td><input type='text' id='Especifica"+posicionCampo+"'  name='Especificas["+posicionCampo+"]' value=''></td>";
 
    nuevaCelda=nuevaFila.insertCell(-1);
 
    nuevaCelda.innerHTML="<td> <input type='text' size='15'  name='Resultado["+posicionCampo+"]' ></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
 
 
 
    nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
    /*----------------------------------------------------------------------*/
    
    $( "#Especifica" + posicionCampo).autocomplete({
    source: availableTags1
    });
     
    /* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
   
    posicionCampo++;
    
    }

JeMaGa · #3 (**permalink**) 03/10/2012, 10:44

no la verdad no entiendo reviso el codigo y veo el id en un campo dinamico, y otro id en el campo fijo son elementos diferentes dentro del formulario.

y le arregle lo que me puciste pero no funciona $( "#Especifica" + posicionCampo) y no funciona en el campo dinamico
solo coje en el fijo

Dradi7 · #4 (**permalink**) 03/10/2012, 10:53

pero has agregado esto que esta al final

$( "#Especifica" + posicionCampo).autocomplete({
source: availableTags1
});

JeMaGa · #5 (**permalink**) 03/10/2012, 11:04

no funciona, Especifica es el id de mi campo fijo, y hay si funciona bein el auto complemento, en el campo dinamico con el id Resultado["+posicionCampo+"] es el que no me funciona!! Muestro codigo :)

Dradi7 · #6 (**permalink**) 03/10/2012, 11:38

Me parece raro porque aca ya estas agregando los input

nuevaCelda.innerHTML="<td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas["+posicionCampo+"]' value=''></td>";

y por lo tanto deberia funcionar correctamente esto

$( "#Especifica" + posicionCampo).autocomplete({
source: availableTags1
});

En todo caso trata de ver que te sale usando el firebug o inspector de google chrome

JeMaGa · #7 (**permalink**) 03/10/2012, 14:10

no funciona!!! ya lo revise!!

Dradi7 · #8 (**permalink**) 03/10/2012, 14:58

Mira este ejemplo que hice y funciona perfectamente como te habia comentado antes

http://jsfiddle.net/ldiego/fMDqf/1/

JeMaGa · #9 (**permalink**) 04/10/2012, 08:14

Hay no funciona!! ya lo he cambiado lo he areglado lo he puesto como tu lo tienes y nada!!! ayuda!!

Dradi7 · #10 (**permalink**) 04/10/2012, 08:20

Pero puedes poner el codigo de como lo estas haciendo, segun las modificaciones que hize y por favor poner Hay no funciona!! o no funciona!!! ya lo revise!! deja que pensar que quieres que te resolvamos tus problemas te inmediato se paciente y respeta la ayuda que se te brinda en los foros

Saludos

JeMaGa · #11 (**permalink**) 04/10/2012, 08:36

Si doy gracias por toda ayuda, y tambien la respeto, se que tengo que tener paciencia. por eso busco ayuda de foros, toda la ayuda que me brindan a los problemas es buena, y funciona, siento no haber respetado la ayuda en algun momento.

Código PHP:

Ver original<script language="javascript" type="text/javascript">
 
<?php
require('Conexion.php');
 
$con = "select distinct `resuktado` from `mediosexternos`";
$query = mysql_query($con);
 
?>
 
var posicionCampo=1;
 
function agregarUsuario(){
 
nuevaFila = document.getElementById("tabla").insertRow(-1);
    
nuevaFila.id=posicionCampo;
 
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td><td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas[]' value=''></td>";
 
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='15'  id='Resultado["+posicionCampo+"]' name='Resultado["+posicionCampo+"]' ></td>";
    
nuevaCelda=nuevaFila.insertCell(-1);
    
$( "#Especifica" + posicionCampo).autocomplete({
source: availableTags1
}); ------------------------------>// No muestra la lista desplegable en el campo dinamico
 
nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
    
posicionCampo++;
 
}
 
    function eliminarUsuario(obj){
 
    var oTr = obj;
 
    while(oTr.nodeName.toLowerCase()!='tr'){
 
    oTr=oTr.parentNode;
 
    }
 
    var root = oTr.parentNode;
 
    root.removeChild(oTr);
 
    }
 
    $(function() {
    
    <?php
 
    while($row = mysql_fetch_array($query)) {
 
    $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
    }
    
    $arreglo1= implode(", ", $cliente);
 
    ?>
    
    var availableTags1 = new Array(<?php echo $arreglo1; ?>);
 
    $( "#Especificaciones").autocomplete({
    source: availableTags1
    });
 
    });
</script>

Gracias por la ayuda y pido disculpas

Dradi7 · #12 (**permalink**) 04/10/2012, 08:51

Revisemos tu codigo paso a paso

Código PHP:

Ver original<?php
require('Conexion.php');
$con = "select distinct `resuktado` from `mediosexternos`";
$query = mysql_query($con);
?>

- No creo que aca tengas problemas porque si te devuelva la consulta correctamente

Código Javascript:

Ver originalfunction agregarUsuario(){
    nuevaFila = document.getElementById("tabla").insertRow(-1);
    nuevaFila.id=posicionCampo;
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas[]' value=''></td>";
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td> <input type='text' size='15'  id='Resultado["+posicionCampo+"]' name='Resultado["+posicionCampo+"]' ></td>";
    nuevaCelda=nuevaFila.insertCell(-1); 
    $( "#Especifica" + posicionCampo).autocomplete({
        source: availableTags1
    });
    nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
    posicionCampo++;
}

En esta parte de tu codigo tienes dos problemas:
- No manejes los names de los input de esta manera Resultado["+posicionCampo+"] si van a hacer un arreglo solamente basta que esten asi Resultado[]
- Segundo si ves bien en la parte que generas el autocompletar no existe la variable availableTags1 ya que no es publica y se encuentra dentro de una función por ende no va a mostrar una lista, debes ponerlo esto como una variable publica tal como lo haces con var posicionCampo=1;

Código PHP:

Ver original$(function() {
    
    <?php
    while($row = mysql_fetch_array($query)) {
        $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
    }
    $arreglo1= implode(", ", $cliente);
    ?>
    
    var availableTags1 = new Array(<?php echo $arreglo1; ?>);
 
    $( "#Especificaciones").autocomplete({
        source: availableTags1
    });
 
});

En esta parte de tu codigo como te mencione saca todo este codigo para que este como una variable global

Código PHP:

Ver original<?php
    while($row = mysql_fetch_array($query)) {
        $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
    }
    $arreglo1= implode(", ", $cliente);
    ?>
    
    var availableTags1 = new Array(<?php echo $arreglo1; ?>);

Al final tu codigo debe quedar de esta manera

Código PHP:

Ver original<script language="javascript" type="text/javascript">
<?php
    require('Conexion.php');
    $con = "select distinct `resuktado` from `mediosexternos`";
    $query = mysql_query($con);
    while($row = mysql_fetch_array($query)) {
        $cliente[]= '"'.$row['resuktado'].'"';//Muestra Especificacion
    }
    $arreglo1= implode(", ", $cliente);
?>
    
var availableTags1 = new Array(<?php echo $arreglo1; ?>);
var posicionCampo=1;
 
function agregarUsuario(){
    nuevaFila = document.getElementById("tabla").insertRow(-1);
    nuevaFila.id=posicionCampo;
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><td><input type='text' id='Especifica"+posicionCampo+"' name='Especificas[]' value=''></td>";
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td> <input type='text' size='15'  id='Resultado["+posicionCampo+"]' name='Resultado["+posicionCampo+"]' ></td>";
    nuevaCelda=nuevaFila.insertCell(-1); 
    $( "#Especifica" + posicionCampo).autocomplete({
        source: availableTags1
    });
    nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>";
    posicionCampo++;
}
 
function eliminarUsuario(obj){
 
    var oTr = obj;
    while(oTr.nodeName.toLowerCase()!='tr'){
        oTr=oTr.parentNode;
    }
    var root = oTr.parentNode;
    root.removeChild(oTr);
}
 
$(function() {
 
    $( "#Especificaciones").autocomplete({
        source: availableTags1
    });
 
});
</script>

JeMaGa · #13 (**permalink**) 04/10/2012, 10:13

Listo dale muchas gracias!! por la ayuda me sirvio ya ese era el problema gracias!!