Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Evento onchange en Servlet y JSP con javascript

JavaScript - Evento onchange en Servlet y JSP con javascript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Evento onchange en Servlet y JSP con javascript

Publicado por Wasp (24 intervenciones) el 05/08/2016 10:08:57
Buenas a todos/as.

Llevo unos días dándoles vueltas a un tema y a ver si alguien me puede guiar un poco.

Actualmente trabajando mediante un Servet quiero hacer una función en javascript.
Dentro de un método propio para separar partes de código, me creo esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
public static String pintarJsFuncionalidadFiltroDerechaNumerico(){
 
	String html ;
 
	/** Aqui tenemos el segundo filtro con Numerico */
	html = "function obtenerFiltroParametrosNumericos(valor){";
 
	html = html + "var saltoLinea = document.createElement('br');";
	html = html + "document.getElementById('divIzquierda').appendChild(saltoLinea);";
 
	//creamos el type checkbox

	html = html + "var checkbox = document.createElement('input');";
	html = html + "checkbox.setAttribute('type', 'checkbox');";
	html = html + "checkbox.setAttribute('id', 'checkbox'+valor.value);";
	html = html + "checkbox.setAttribute('name', 'checkbox'+valor.value);";
	html = html + "checkbox.setAttribute('checked', 'checked');";
	html = html + "document.getElementById('divIzquierda').appendChild(checkbox);";
 
	//creamos la palabra RecursoGlobal que ira a la derecha del checkbox

	html = html + "var nombre = document.createTextNode(valor.value+' ');";
	html = html + "document.getElementById('divIzquierda').appendChild(nombre);";
 
	//creamos el select

	html = html + "var array = ['=', '>=', '<=', '><'];";
	html = html + "var contador, option;";
	html = html + "var select = document.createElement('select');";
	html = html + "select.setAttribute('id', 'select'+valor.value+'ID');";
	html = html + "select.setAttribute('name', 'select'+valor.value+'ID');";
 
	//hay que tener cuidado con la concatenacion del crearNuevoText

	html = html + "select.setAttribute('onchange', 'crearNuevoText(valor.value)', 'select'+valor.value+'ID');";
	html = html + "for(contador = 0; contador < array.length; contador++){";
	html = html + "option = document.createElement('option');";
	html = html + "option.value = array[contador];";
	html = html + "option.text = array[contador];";
	html = html + "select.appendChild(option);";
	html = html + "}";
	html = html + "document.getElementById('divIzquierda').appendChild(select);";
 
	//creamos el type text

	html = html + "var text = document.createElement('input');";
	html = html + "text.setAttribute('type', 'text');";
	html = html + "text.setAttribute('id', 'texto'+valor.value);";
	html = html + "text.setAttribute('name', 'texto'+valor.value);";
	html = html + "text.setAttribute('size', '4');";
	html = html + "document.getElementById('divIzquierda').appendChild(text);";
 
	html = html + "}";
 
	return html;
}

Lo que hago es que cuando creo el evento onchange, lo que le paso a la funcion crearNuevoText eso no me trae el objeto que creo, por ejemplo, debería de pasar un String que ponga: "Frecuencia" o "Tolerancia".
en el siguiente método le paso a crearNuevoText ese valor que tiene que coger el onchange, pero no se pasa un valor sino una cadena que es valor y por tanto en el debugger de Chrome me da fallo.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public static String pintarJsFuncionalidadNuevoTextFiltrosNumericos(){
 
	String html;
 
	html = "function crearNuevoText(valor){";
 
	html = html + "alert(valor);";
	html = html + "var seleccionado = document.getElementById('select'+valor+'ID');";
	html = html + "var unaVez = document.getElementById('valor');";
	html = html + "if((seleccionado.options[seleccionado.selectedIndex].text === '><') && (unaVez.value == 1)){";
	html = html + "	var text = document.createElement('input');";
	html = html + "	text.setAttribute('type', 'text');";
	html = html + "	text.setAttribute('id', 'texto'+valor+'2');";
	html = html + "	text.setAttribute('name', 'texto'+valor+'2');";
	html = html + "	text.setAttribute('size', '4');";
	html = html + "	document.getElementById('divIzquierda').appendChild(text);";
	html = html + "	unaVez.value = 0;";
	html = html + "}";
 
	//creamos el salto de linea

	html = html + "var saltoLinea = document.createElement('br');";
	html = html + "document.getElementById('divIzquierda').appendChild(saltoLinea);";
 
	html = html + "}";
 
	return html;
}

Esto mismo cuando lo hago por jsp y javascript me funciona bien, pero al usar Servlet no hay manera de hacerlo.

¿Alguien me podría decir como pasar ese valor al evento onchange en el árbol DOM?

Si no me he explicado bien, comentármelo y lo haré mas explicativo.

Muchas Gracias!!!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Evento onchange en Servlet y JSP con javascript

Publicado por Vainas (258 intervenciones) el 05/08/2016 20:30:03
Buenas:

Creo que el problema esta aqui:

1
select.setAttribute('onchange', 'crearNuevoText(\''+valor.value+'\')', 'select'+valor.value+'ID');

Mira como he tenido que fijar las comillas para que acepte el valor y encima este el mismo dentro de comillas por que sino la function no lo reconocera como tal.

Como te has dado cuenta no es un buen modo de hacer esto la verdad, por mucho que te hayas esforzado en crear las funciones javascript en una funcion aparte en tu servlet....

Te recomiendo que saques fuera en un js tu codigo y lo metes al principio de tu html con un

1
<script src="myscripts.js"></script>


Luego te las puedes arreglar de alguna forma para al final antes de cerrar body crear otro script en donde metas las llamadas que necesitas hacer. es decir yo haria algo asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Document</title>
	<script src="myscripts.js"></script>
</head>
<body>
<div id="divIzquierda"></div>
<button onclick="myclick('Frecuencia')">Frecuencia</button>
<button onclick="myclick('Tolerancia')">Tolerancia</button>
 
	<script>
	//Aqui puede ir tu codigo en el que inicializas valor

	function myclick(name){
		if(name == 'Frecuencia'){
		var valor = {value: 'Frecuencia', id: 1};
		}else{
		var valor = {value: 'Tolerancia', id: 2};
		}
	obtenerFiltroParametrosNumericos(valor);
	}
	</script>
</body>
</html>

Y en otro lado tu myscripts.js

1
2
3
4
5
6
7
function obtenerFiltroParametrosNumericos(valor){
	...
}
 
function crearNuevoText(valor){
	...
}

He puesto tu codigo en un js aqui: https://jsfiddle.net/y02sLwy6/ para probar por que no funcionaba

Espero que te sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Evento onchange en Servlet y JSP con javascript

Publicado por Wasp (24 intervenciones) el 08/08/2016 09:43:12
Buenas Vainas.

Antes de todo muchas gracias por pararte a responder y encima a subir código para poder verlo mejor.

He aprendido mucho de tu respuesta, al final, he decidido que lo mejor sera crear un archivo .js para meter todos estos códigos y no hacerlo de la manera que lo estaba haciendo ya que, siempre me anda dando problemas las comillas simples y dobles y la concatenación de String.

Acabo de hacerlo como me lo has dicho y ahora tengo mejor el código y mas legible, y sobre todo, funciona!

Así que muchas gracias por tu consejo y tu ayuda!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar