[SOLUCIONADO] Paso Variables con Jquery a Java

[robg]

Buenos días

Estoy desarrollando una Aplicación con HTML5, en el front, y Java, en el back.

Quiero pasar varables al back, como el idioma, la cual, no está en un formulario, y lo tengo con un select.

Para pasarlo del front al back, lo cargo en una variable para que lo envíe.
El código de javascripta que tiene la página es:

$(document).ready(function(){

//Cargo el valor del Select al cargar la página.
var lang = $("#idioma").val();

//Cambio el valor del #idioma cuando cambio su valor.
$("idioma").change(function() {

var lang = $("#idioma").val(); });

});


Para pasar el valor en el HTML, utilizo: <script>document.write(lang)</script>

<li><a href="ListaEquipos?codcategoria=C001&idioma=<scrip t>document.write(lang);</script>">Equipo1</a></li>

Y no me está pasando el valor. Me podéis indicar que estoy haciendo mal.

Debería indicarle: window.document.write(lang);

Gracias por vuestra ayuda.

Un saludo.

Roberto

[Alexis88]

Lo que intentas hacer es una ofensa a las buenas costumbres de la programación.

Cambia el valor de la query string en la misma función:

Código Javascript:

var lang = $("#idioma").val(),
    url = "ListaEquipos?codcategoria=C001&idioma=" + lang;
 
$("#id del enlace").prop("href", url);
 

Asígnale un id al enlace para que puedas trabajar más fácilmente.

Saludos

[robg]

Alexis

Gracias por la respuesta.

A lo mejo no me he expresado bien.

Tú me indicas una solución puntual.
¿Y si tengo 20 enlaces?
¿No puedo crear una variable para que me pase el nuevo valor seleccionado por el usuario?

Gracias por la ayuda.

Rob

[Alexis88]

Si tienes 20, 50 o 500 enlaces, supongo que todos no apuntarán hacia la misma dirección, por lo que tendrás que usar un bucle para recorrer tanto al grupo de elementos de los cuales obtendrás los valores como al grupo de enlaces que en lugar de tener un id (a menos de que sea secuencial, es decir: id1, id2, id3, ...), deberían de tener una clase y en cada iteración realizarías la asignación de valores.

Un pequeño ejemplo:

Código HTML:

<!-- LAS CAJAS DE TEXTO DE LAS CUALES OBTENDRÉ LOS VALORES -->
<input type = "text" class = "cajas" value = "123" />
<input type = "text" class = "cajas" value = "456" />
<input type = "text" class = "cajas" value = "789" />
<input type = "text" class = "cajas" value = "012" />
 
<!-- LOS ENLACES A LOS CUALES MODIFICARÉ EL VALOR DE SU ATRIBUTO HREF -->
<a href = "ListaEquipos?codcategoria=C001&idioma=" class = "enlaces">Enlace 1</a>
<a href = "ListaEquipos?codcategoria=C001&idioma=" class = "enlaces">Enlace 2</a>
<a href = "ListaEquipos?codcategoria=C001&idioma=" class = "enlaces">Enlace 3</a>
<a href = "ListaEquipos?codcategoria=C001&idioma=" class = "enlaces">Enlace 4</a>
 

Código Javascript:

var inputs = document.querySelectorAll(".cajas"), //Las cajas de texto
    total = inputs.length, //El total de cajas de texto
    enlaces = document.querySelectorAll(".enlaces"); //Los enlaces
 
for (var i = 0; i < total; i++){
    enlaces[i].href += inputs[i].value; //Concateno el valor del atributo 'href' del enlace con el valor de la caja de texto
}
 

El resultado será el siguiente:

Código HTML:

<a href = "ListaEquipos?codcategoria=C001&idioma=123" class = "enlaces">Enlace 1</a>
<a href = "ListaEquipos?codcategoria=C001&idioma=456" class = "enlaces">Enlace 2</a>
<a href = "ListaEquipos?codcategoria=C001&idioma=789" class = "enlaces">Enlace 3</a>
<a href = "ListaEquipos?codcategoria=C001&idioma=012" class = "enlaces">Enlace 4</a>
 

Saludos

[robg]

Buenas Alexis

Te agradezco tu explicación, para los que no somos expertos, es de gran utilidad.

He cambiado el link por la solución que me pasaste, pero no veo la parte de cambio del valor del lenguaje. Me pasa el lenguaje con el que se carga la página.

He utilizado la solución que yo tenía y tampoco me funciona, en la url no se pasa el nuevo idioma.

Mi solución era:

//Cambio el valor del #idioma cuando cambio su valor.
$("idioma").change(function() {

var lang = $("#idioma").val(); });

Me puedes indicar si estoy haciendo algo mal.

Gracias de antemano.

Un saludo.

Roberto

[Alexis88]

Bueno, si lo tienes así: $("idioma"), es normal que no funcione porque de esa manera no tomas a ningún elemento. Si 'idioma' es el id, debe de ser así: $("#idioma"), pero si es la clase, debe de ser así: $(".idioma").

Saludos

[robg]

Buenas, Alexis

Ese error es mio al escribir el comentario.
En el código está correcto.

//Cargo el valor del Select al cargar la página.

var lang = $("#idioma").val();

//Cambio el valor del #idioma cuando cambio su valor.
$("#idioma").change(function() {

var lang = $("#idioma").val(); });

Como ves, paso el valor cuando cargo la página y luego, cuando cambio el idioma en el SELECT.

Por alguna razón, no me coge el cambio y me envía el idioma con el que carga la página.

Si veis algo mal, agradezco la ayuda.

Un saludo.

RG

[Alexis88]

No vuelvas a declarar a lang dentro de la función pues limitas su alcance. Solo declárala una vez al inicio y luego úsala directamente.

Saludos

[robg]

Alexis

Corregí el tema de la variable y me sigue sin actualizar el valor al cambiar el idioma.

Te envío el SELECT por si hubiera algún error.

<select id="idioma" name="idioma" size="1">
<option value="ESP">ESP</option>
<option value="ENG">ENG</option>
</select>

Gracias por la ayuda.

Un saludo.

Roberto

[Alexis88]

Prueba esto:

Código Javascript:

var lang = $("#idioma").val();
 
$("#idioma").on("change", function(){
    lang = $(this).val();
    alert(lang);
});
 

Es prácticamente lo mismo que tienes, con la diferencia de que dentro de la función, hago referencia al combo mediante la palabra reservada this.

Saludos

[robg]

Alexis

He cambiado la función con el evento delegado (on()) que propusiste y veo por el Alert, que cambia el idioma.

Pero la función Prop, no me cogía el cambio.
He creado un evento delegado al pulsar el enlace (on()) que lance la función Prop y ahora sí que cambia el idioma.

Muchas gracias por la ayuda.

Un saludo.

Roberto