Duda con uso de .next(), en con campos generados dinámicamente con autocomplete

1 view
Skip to first unread message

guillhermosoftrejo

unread,
May 26, 2011, 11:49:28 AM5/26/11
to Jquery en español
Cordial Saludo

Actualmente tengo un formulario con un campo de autocompletado el cual
se puede generar y/ó quitar n cantidad de veces dinámicamente del
formulario, eso si, siempre debe quedar como mínimo una sola vez (con
lo cual no tengo problema, solo lo menciono a manera de detalle), el
campo se me genera sin problema, así mismo el campo oculto (hidden),
que uso para poder enviar el id (llave primaria) del registro
autocompletado en el campo, he usado el plugin livejquery y he logrado
que el autocomplete funcione sin problema en los campos generados
dinámicamente, más el punto es que no he logrado que al hacer la
selección del autocomplete en cada uno de los diferentes campos
generados, se asigne como value de su respectivo campo oculto (que en
mi HTML actual lo tengo como text, para poder visualizarlo sin
problema) el id (llave primaria) del registro seleccionado, sin que
este valor se asigne a todos los demás campos ocultos, me explico si
tengo 5 campos de autocompletado y estoy diligenciando el 3ro, al
seleccionar un registro, todos los campos ocultos de los otros 4
campos de automcompletado quedan con el mismo value, más esto no
sucede con el texto de los campos de autocompletado, ya que estos si
quedan con su respectivo valor, el siguiente es mi HTML:



<span class="auxiliar">
<input class="campos" type="text" name="auxiliar[]" value="<?php echo
$registroRemitenteCliente['auxiliar'] ?>" size="18" />
<img src="../../../images/autocompletar.jpg" align="top" width="9%" />
<input class="campos" type="text" name="idAuxiliar[]" value="<?php
echo $registroRemitenteCliente['auxiliar'] ?>" />
</span>
<span id="auxiliarAgregar"></span>
<input type="button" name="agregar" id="agregar" value="Agregar" /
><input type="button" name="quitar" id="quitar" value="Quitar" />



El siguiente es el código JS en JQuery del botón agregar (con lo cual
no tengo problema, solo lo coloco aquí a manera de detalle)

//Agregar campo para relacionar un (tercero) auxiliar al plan de
cargue
$(document).ready(function(){
$("#agregar").click(function() {
$(".auxiliar").last().clone().appendTo("#auxiliarA gregar");//Clona el
contenido de la última "zona" con la clase auxiliar y lo inserta al
final de la "zona" con id auxiliarAgregar
$("input[name='auxiliar[]']").last().attr('value','');//Vacia el valor
del campo agregado de automcomplete, para que no quede con el value
del anterior
$("input[name='idAuxiliar[]']").last().attr('value','');//Vacia el
valor del campo (oculto) agregado, para que no quede con el value del
anterior
});
});



El siguiente es el código JS en JQuery del botón quitar (con lo cual
no tengo problema, solo lo coloco aquí a manera de detalle)

//Quitar campo para relacionar un (tercero) auxiliar al plan de cargue
$(document).ready(function(){
$("#quitar").click(function() {
if((($(".auxiliar")).length) > 1)
{
$(".auxiliar").last().remove();//Elimina la última "zona" con la clase
auxiliar siempre y cuando haya más de una
}
});
});



//Autocompletar auxiliar
$(document).ready(function() {
$("input[name='auxiliar[]']").livequery(function () { //Uso del método
livequery del plugin de mismo nombre, ya que los campos se generan de
manera dinámica (a futuro)
$("input[name='auxiliar[]']").autocomplete({
source: '?controlador=PlanCargue&accion=autocompletarAuxil iares', //
URL a la cual hace la petición
minLength: 1, //Número de veces a oprimar las teclas para iniciar el
autocomplete y hacer la petición
select: function(event, ui){
$("input[name='idAuxiliar[]']").val(ui.item.id); //Línea de código que
asigna el valor del id (llave primaria) al campo oculto, más lo asigna
a TODOS (lo cual es muy lógico por el selector que estoy usando, más
no encuentro la manera de especificarlo, solo se me ocurre
usando .next, ver siguiente línea, más no funciona) no solo al
correspondiente, aquí es donde radica el verdadero problema y mi duda
puntual
//$
("input[name='auxiliar[]']").next("input[name='idAuxiliar[]']").val(ui.item.id); //
En "TEORÍA" (de acuerdo a mis conocimiento) esta línea debería de
asignar el respectivo valor del id (llave primaria) SOLAMENTE al campo
correspondiente (es decir el siguiente, por eso uso .next), más no
hace nada, tampoco imprime errores
}
});
})
});



En la parte donde escribo:

$
("input[name='auxiliar[]']").next("input[name='idAuxiliar[]']").val(ui.item.id);

Había pensado que quizás no funcionaria ya que estos campos se genran
de forma dinámica y se crean a futuro, por lo cual debería de usar
un .live, más aún probando con el primer campo (el cual no se genera
dinámicamente pues siempre está ahí, ni se puede quitar) no funciona.

Por lo cual si alguno de ustedes sabe alguna manera con la cual
pudiera solucionar mi problema, se lo agradecería mucho, ya que le he
dado muchas "vueltas" a este tema más aún no le encuentro solución.

De antemano muchas gracias por su ayuda y atención.
Reply all
Reply to author
Forward
0 new messages