Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Aplicar Javascript a array de input text

Estas en el tema de Aplicar Javascript a array de input text en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/05/2013, 09:21
 
Fecha de Ingreso: marzo-2011
Mensajes: 23
Antigüedad: 13 años, 8 meses
Puntos: 0
Exclamación Aplicar Javascript a array de input text

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!
  #2 (permalink)  
Antiguo 08/05/2013, 15:54
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: Aplicar Javascript a array de input text

En los input que quieres autocompletar ponles una clase común:

Código HTML:
Ver original
  1. <input type="text" class="autocompleteCliente" />

Y luego selecciona por esto:

Código Javascript:
Ver original
  1. $(".autocompleteCliente").autocomplete({
  2. source: availableTags
  3. });

También puedes utilizar selectores más avanzados, pero también pueden ser más costosos en rendimiento.

Código Javascript:
Ver original
  1. $('input[name^="EJEMPLO"]').autocomplete({
  2.       source: availableTags
  3.     });
  #3 (permalink)  
Antiguo 09/05/2013, 04:19
 
Fecha de Ingreso: marzo-2011
Mensajes: 23
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Aplicar Javascript a array de input text

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!
  #4 (permalink)  
Antiguo 09/05/2013, 13:04
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: Aplicar Javascript a array de input text

Buenas,

Efectivamente no funciona el autocomplete con nuevos datos cargados porque cuando utilizas la funcion autocomplete se realiza únicamente sobre los datos ya existentes.

Tendrás que recargar el código en el click del botón añadir.

Fíjate en el siguiente código (es un concepto): http://jsfiddle.net/alexg88/7ehtb/

Un saludo.
  #5 (permalink)  
Antiguo 10/05/2013, 01:34
 
Fecha de Ingreso: marzo-2011
Mensajes: 23
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Aplicar Javascript a array de input text

Uf, no sabes cuánto me estás ayudando, ese ejemplo es tal cual lo que necesito, justo eso, he estado un rato probando pero no consigo pasarlo a mi caso, si no te importa te lo pongo aquí y me indicas? Es que al ser algo más complejo no logro poner la sentencia autocomplete en el lugar adecuado, o eso creo.

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});

Siguiente tu ejemplo, pero no funciona. Ojalá en breve pueda marcar como tema solucionado, me estás salvando!

Gracias de nuevo
  #6 (permalink)  
Antiguo 10/05/2013, 09:24
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: Aplicar Javascript a array de input text

Buenas,

No puedes hacerlo como lo intentas porque la variable tds está guardando el html como una cadena de texto y al usar $('...') estás creando un objeto "jquery".

La solución sería algo así:

Código Javascript:
Ver original
  1. $("#add").click(function(){
  2.  
  3. var n = $('tr:last td', $("#tablatareas")).length;
  4.  
  5. var tds = '<tr>';
  6.  
  7. tds +='<td><select name="sentido[]"><option value="E" selected="selected">Entrega</option><option value="R">Recogida</option></select></td>';
  8.  
  9. tds +='<td><input type="checkbox" name="DireccionCliente[]" /></td>';
  10.  
  11. tds += '<td><input type="text" name="empresatar[]" class="autocompleteContactos" /></td>';
  12.  
  13. tds += '</tr>';
  14.  
  15.  
  16. var $row = $(tds).find('.autoCompleteContactos')
  17.                             .autocomplete({source: availableTags})
  18.                             .end(); //Este método devuelve el objeto $(tds)
  19.  
  20. $("#tablatareas").append($row);
  21.  
  22. });
  #7 (permalink)  
Antiguo 13/05/2013, 03:24
 
Fecha de Ingreso: marzo-2011
Mensajes: 23
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Aplicar Javascript a array de input text

Buenas!

Lo que dices tiene mucho sentido, sería la desesperación, pero no tiene ningún sentido tratar de crear el objeto Jquery dentro de una variable que está almacenando texto html.

En cualquier caso al hacer lo que dices no ha funcionado, he probado quitando los $ de la variable (quizá te confundiste con php, o al menos yo no utilizo eso para crear variables javascript) pero tampoco. Hay algo extraño, y es 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!
  #8 (permalink)  
Antiguo 13/05/2013, 14:12
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: Aplicar Javascript a array de input text

Pon como tengas el código hasta el momento. Tampoco es necesario usar el método last().

No te fies tanto del autocompletado de Dreamweaver porque no tiene porque ser 100% fiable.

Un saludo.
  #9 (permalink)  
Antiguo 16/05/2013, 03:17
 
Fecha de Ingreso: marzo-2011
Mensajes: 23
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Aplicar Javascript a array de input text

Buenas!

Pues sí, tienes razón, no es muy fiable, porque en el autocomplete (de JQuery) también pasa lo mismo, aunque apliques a un solo campo Dreamweaver no te autocompleta con la función, y aun así funciona.

No creo que copiarte todo el documento salga a cuenta, ya que es bastante largo, pero voy a tratar de ponerte lo más importante, o una muestra de todo lo que hay, a ver si pudieramos solucionarlo...

Lo primero que hago es comprobar las credenciales, para corroborar que ha ingresado en la palicación web. Luego conexión a base de datos y estas cabeceras:

<script type="text/javascript" src="lib/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript">

La función que añade la fila a la tabla al pulsar:

$(document).ready(function(){

$("#add").click(function(){
GrupoRepetido = false;
var n = $('tr:last td', $("#tablatareas")).length;
var tds = '<tr>';
tds +='<td align="center" valign="middle"><select name="sentido[]"><option value="E" selected="selected">Entrega</option><option value="R">Recogida</option></select></td>';
tds +='<td align="center" valign="middle"><input type="checkbox" name="DireccionCliente[]" /></td>';
tds += '<td align="center" valign="middle"><input type="text" name="empresatar[]" class="autocompleteContactos" /></td>';
tds += '<td align="center" valign="middle"><input name="grupo[]" type="text" value="'+Grupo+'" readonly="readonly" /></td>';
tds += '</tr>';

//$(tds).find('.autocompleteContactos').autocomplete ({source: availableTags}).end();

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

NumFil = document.getElementsByTagName('tr').length; //Se cuenta el número de filas en el documento después de añadir una nueva
NumFil = NumFil - NoFilas; //Se resta el número de filas que había al cargar la página y el número de filas contabilizado actualmente
document.cookie = "NumFil =" + NumFil;local
})

$("#group").click(function(){
NoFilas++;
if(GrupoRepetido == false)
{
var n = $('tr:last td', $("#tablatareas")).length;

var tds = '<tr>';
for(i=1; i<15; i++) //Recorre los 14 campos imprimiento "Grupo i"
{
MostrarGrupo = Grupo + 1; //Para que, por defecto, el primero sea el grupo 1, pero al pulsar "Añadir nuevo grupo" se muestre grupo 2 y no grupo 1 (aunque internamente se guarde el número anterior al mostrado)
tds += '<td align="center" valign="middle"><b>Grupo '+MostrarGrupo+'</b></td>';
}
tds += '</tr>';
$("#tablatareas").append(tds);
Grupo++;
}

GrupoRepetido = true;


})

});
</script>




Después añado la función de autocomplete:

<link href="lib/jquery/css/ui-lightness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />

<script>
$(function() {

$( ".autocompleteContactos" ).autocomplete(
{
source:'sourceContactos.php',
})

});
</script>



La tabla es enorme, pero bueno, un resumen:

<form id="formTareas" action="xxx.php" method="post">
<table width="100%" border="1" id="tablatareas">
<tr>
<td height="45" colspan="15" align="center" valign="middle">
<h3>Tareas del servicio</h3></td>
</tr>
<tr>
<td align="center" valign="middle"><strong>Sentido</strong></td>
<td align="center" valign="middle"><strong>Dirección del cliente</strong></td>
<td align="center" valign="middle"><strong>Empresa</strong></td>
</tr>
<tr>
<td align="center" valign="middle"><select name="sentido[1]">
<option value="E">Entrega</option>
<option value="R" selected="selected">Recogida</option>
</select></td>
<td align="center" valign="middle"><input type="checkbox" name="DireccionCliente[1]" /></td>
<td align="center" valign="middle"><input type="text" name="empresatar[1]" class="autocompleteContactos" /></td>
</tr>
</table>
<tr><td align="center" valign="middle"><input id="guardar" name="Guardar" type="button" value="Guardar" onclick="formTareas.submit()" /></td></tr>

El botón para pulsar cuando queremos añadir una fila:

<input type="button" value="Añadir tarea" id="add">

Este es para añadir un grupo pero no viene al caso

<input type="button" value="Añadir nuevo grupo" id="group">

<script type="text/javascript">
var NoFilas = document.getElementsByTagName('tr').length; //Almacenamos el número de filas que existen en el documento una vez cargado por primera vez
</script>


Básicamente por defecto se crea una tabla con unos campos, y si te fijas sus nombres son, por ejemplo, empresatar[1], luego al añadir filas cuento el total de filas y resto las que ya existian al principio, y le da el nombre empresatar[] con la posición que toque. Esto lo hago solo para poder recorrer tantos campos del formulario como filas haya, porque serán las posiciones del array "empresatar[]".

Si está demasiado liado o necesitas más información dímelo por favor, es que necesito tu ayuda porque por más vueltas que le doy, nada...

Gracias!!!
  #10 (permalink)  
Antiguo 16/05/2013, 13:10
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: Aplicar Javascript a array de input text

Buenas,

Es muy complicado ver el error así. Te recomiendo que uses firefox y un complemento llamado Firebug (a lo mejor ya lo conoces) y te fijes que si produce algún error de javascript o depures el código para ir viendo por donde puede venir el problema.

En el código que has puesto (que te recomiendo que uses el Highlight para mostrar el código, facilita la lectura) está comentada la parte

//$(tds).find('.autocompleteContactos').autocomplete ({source: availableTags}).end();

Supongo que habrás probado haciéndolo como te indiqué.

Ah, sobre el $ en el nombre de una variable, no es ningún error, puedes llamar así a una variable (es un letra permitida, pero no significa nada). Lo hago para indicar que es un objeto devuelto por una función de jquery, pero no es necesario.

Un saludo.
  #11 (permalink)  
Antiguo 22/05/2013, 02:30
 
Fecha de Ingreso: marzo-2011
Mensajes: 23
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Aplicar Javascript a array de input text

Finalmente el gran alexg88 ha logrado solucionar el problema, fue un cúmulo de casualidades que no funcionara, y cuando me dijo que probara con Firebug me salió directamente una variable no declarada, "avaibleTags" jaja:

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.

Utilicé finalmente esta sentencia:


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

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 alexg88 para mí.

Etiquetas: ajax, campos, input, javascript, text
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:55.