Comunidad de diseño web y desarrollo en internet online

Aplicar Javascript a array de input text

Citar            
MensajeEscrito el 06 May 2013 11:09 am
Buenas!

Utilizo Jquery para, con AJAX, ir añadiendo filas a una tabla. Dichas filas cuentan con input text donde escribir y luego enviar toda la información con un form...

Bueno, pues uno de esos campos utiliza la misma librería Jquery para hacer autocomplete, e ir filtrando resultados conforme se escribe en él. Tengo el problema de que al añadir una nueva fila los campos de texto tienen name="EJEMPLO[$contador]" es decir, el nombre de cada campo en una posición de una array que se va incrementando conforme se añaden filas.

¿Cómo puedo hacer que mi función autocomplete afecte a todos ellos?

Ahora hago

$( "#cliente" ).autocomplete({
source: availableTags
});

Pero el campo "cliente" es solo uno, quiero que afecte a todos.

Gracias de antemano!

Por superx335

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 May 2013 01:21 pm
en vez de usar un ID que es único, usas una clase que por el contrario puedes tener tantas como quieras.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 08 May 2013 03:14 pm
Buenas,

podrías explicarme un poco más? parece que es lo que me comentas pero no sé cómo va.

Te lo agradecería mucho... gracias!

Por superx335

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 May 2013 04:58 pm

Código HTML :

<input type="text" name="nombre[]" class="textnombres" />
<input type="text" name="nombre[]" class="textnombres" />
<input type="text" name="nombre[]" class="textnombres" />


Código Javascript :

$( ".textnombres" ).autocomplete({ // El selector JQuery es la clase
 source: availableTags
 });

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 09 May 2013 10:56 am
Joder tío eres un genio! justo lo que necesitaba, aunque las noticias no son buenas.

Efectivamente aplicando el atributo class="CLASE", y luego seleccionando con .CLASE se aplica a los campos que sean, justo como quería.

El problema es que los campos que creo por defecto funcionan, pero los que se añaden mediante el botón javascript, que básicamente hace (#add").click(function()), luego se añaden a una variable todas las líneas que quiera, que son <td> y por último $("#tablatareas").append(variable).

Una de las líneas que agrego es:

tds += '<td align="center" valign="middle"><input type="text" name="empresatar[]" class="autocompleteContactos" /></td>';

Con lo que, teóricamente, debería tener autocomplete, pero no es así. Es como si no funcionase porque el campo ha aparecido después de que se cargara la función, ¿habría manera de indicar que recarge ese código al agregar cada línea o algo?.

Por favor estoy terminando el proyecto final de carrera y no sabes el favor que me harías si solucionamos esto...

Gracias!

Por superx335

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 09 May 2013 12:13 pm
Se debe a que JQuery aplica el evento a todos los elementos que existen al momento de ejecutarse. JQuery no puede adivinar que más tarde se van a crear otros elementos, esos otros elementos no tendrán aplicado el evento.

Lo que debes hacer es aplicar el evento a cada elemento creado dinámicamente inmediatamente después de crearlo.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 09 May 2013 01:28 pm
tagsEso sospechaba... Podrias decirme como se podria aplicar el evento despues de crearlos? He tratado de hacer lo de class.autocomplete{source: avaibletags} dentro de la funcion de click que añade la tabla, pero o no es eso o algo hago mal...

Muchas gracias por tu paciencia

Por superx335

13 de clabLevel



 

safari
Citar            
MensajeEscrito el 09 May 2013 06:15 pm
Para poder ayudarte en eso, necesitaría ver el código relevante.

Si pudieras pasarnos la URL del sitio donde estás haciendo esto, sería genial.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 10 May 2013 09:12 am
Pues es que es una aplicación para una empresa privada, y es necesario loguear para ver el contenido, así que si quieres te pego por aquí mismo código relevane a ver si pudiera ser suficiente, vale?.

Verás, esta es mi función click:

$("#add").click(function(){

var n = $('tr:last td', $("#tablatareas")).length;

var tds = '<tr>';

tds +='<td><select name="sentido[]"><option value="E" selected="selected">Entrega</option><option value="R">Recogida</option></select></td>';

tds +='<td><input type="checkbox" name="DireccionCliente[]" /></td>';

tds += '<td><input type="text" name="empresatar[]" class="autocompleteContactos" /></td>';

tds += '</tr>';

$("#tablatareas").append(tds);
})

Es mucho más largo pero así se ve la idea, tengo una variable "tds" y voy añadiendo campos <td> con el contenido. El que necesito que tenga autocomplete es el campo de "empresatar[]", así que he tratado lo siguiente:

tds += $('<td><input type="text" name="empresatar[]" class="autocompleteContactos" /></td>').autocomplete({source: availableTags});

Siguiendo tu consejo de actualizar, pero así no funciona...

Ojalá en breve pueda solucionarse porque todo apunta a que sí!!

No sabes cuánto me estás ayudando, gracias

Por superx335

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 May 2013 12:35 pm
Después de esta línea;

Código Javascript :

$("#tablatareas").append(tds);

Haces;

Código Javascript :

$("#tablatareas").append(tds);
$("input.autocompleteContactos" ).last().autocomplete({  source: availableTags });

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 13 May 2013 09:09 am
Buenas!

No funciona, pero debo decirte que utilizo Dreamweaver 6 y cuando escribo $("input.

me aparece una lista desplegable, escribo autocompleteContactos (o lo selecciono), luego queda
$("input.autocompleteContactos" ). y vuelve a aparecer la lista... escogo last() y al poner el punto '.' aparece una lista, pero escribiendo autocomplete no aparece, ¿pudiera ser indicio de algo? es como que esa función no la tuviese para "last()".

No sé, tal vez el orden de script o algo dentro del documento.

Este script de añadir fila lo tengo al principio, y detrás otro <script></script> para el autocomplete, aunque al poner "input." como digo sí aparece "autocompleteContactos".

¿Alguna idea? siento ser tan pesado pero no veo salida.

Muchas gracias, como siempre!

Por superx335

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 May 2013 12:24 pm
No tengo idea de lo que estás diciendo, yo no uso DW.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 13 May 2013 12:29 pm
Me refiero a las sugerencies que hace DW, dettodas formas he comprobado que ese no es el problema, pero no se cual es porque no funciona, se agregan filas pero el autocomplete no lo realiza en las nuevas...

Que podria hacer? Gracias!

Por superx335

13 de clabLevel



 

safari
Citar            
MensajeEscrito el 13 May 2013 12:35 pm
Repito, yo no uso DW y no sé de qué estás hablando. No te cuesta nada escribir el código a mano.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 13 May 2013 12:40 pm
Perdona que no me haya expresado bien. Utilizo Dreamweaver para el diseño, y la verdad es que me gusta porque tamien colorea el codigo, pero generalmente he venido utilizando el notepad++. Lo que quiero decir es que puedes olvidar lo que he comentado del Dreamweaver por he comprobado que no era problema, y aun escribiendo el codigo a mano, al probarlo no gunciona el autocomplete en las nuevas filas insertadas, aun haciendo lo que me has comentado...

Gracias

Por superx335

13 de clabLevel



 

safari
Citar            
MensajeEscrito el 13 May 2013 01:18 pm
Sube lo que tienes hecho a algún servidor remoto y pásanos la URL para poder depurarlo. Seguramente algo más está interfiriendo por ahí...

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 18 May 2013 03:00 pm
Finalmente el gran DriverOP ha logrado solucionar el problema, fue un cúmulo de casualidades que cuando me dijo que probara con esta sentencia:

$("#tablatareas").append(tds);
$("input.autocompleteContactos" ).last().autocomplete({ source: availableTags });

yo había añadido un campo a la tabla, desplazándolo y haciendo las pruebas, sin querer, en un campo al que no afectaba el autocomplete.
Cuando caí en esto y lo arreglé había movido la conexión a la base de datos a un documento a parte, al que envío las consultas, pues me pareció más adecuado, con lo que el poner "source: availableTags" ya no tenía sentido, pues esta variable no existía, y no reparé en ello.

Al hacer

$("#tablatareas").append(tds);
$("input.autocompleteContactos" ).last().autocomplete({ source: 'DOCUMENTO.php' });

Funcionó de maravilla, y tras muchos gritos de alegría me he puesto a continuar con el proyecto.

Gracias de verdad, espero algún día ser tan útil como lo ha sido este foro y DriverOP para mí.

Por superx335

13 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.