Llamar a una 'function' desde otra 'function'

lfc · #1 (**permalink**) 01/02/2008, 04:43

Hola a tod@s,

Estoy intentando crear un formulario dinámico y tengo problemas con los eventos.

El formulario, resumidamente, está formado por un textfield en el que el usuario entra un numero y se añaden tantos 'divs' como indique este numero, y cada div tiene, a su vez, otros elementos típicos de un formulario (divs, textfields, comboboxes, datetimepicker...). A su vez, cada uno de estos divs nuevos generados también pueden contener otro textfield que al inserir un numero se añaden más divs... y así sucesivamente.

El problema que tengo es que a un textfield generado dinámicamente (con una function resultado del evento del primer textfield) no le puedo añadir un evento 'onkeyup' y asociarle una function definida en el mismo archivo... solo me funciona si defino la neva 'function' dentro de la primera 'function'...

--> Alguien me podría decir como llamar a una function dentro de otra function???

Estoy desesperada!!! Necesito ayuda!!!

MUCHAS GRACIAS!!!

ZiTAL · #2 (**permalink**) 01/02/2008, 05:08

Código:

function uno()
 {
   dos()
 }
function dos()
 {
 }

lfc · #3 (**permalink**) 01/02/2008, 05:48

Muchas gracias por responder tan rápido!

Pero el problema creo que no es tan fácil de resolver...

Te pongo un trozo del código del formulario (una parte del formulario) a ver si ves donde puede estar mi error... supongo que el hecho que use struts2 no tendrá nada que ve, no?

Código:

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

	<head>
		<title>ARS - Is Available Form</title>
		<s:head theme = "ajax"/>
		<link href="<s:url value="/css/mainstyle.css"/>" rel="stylesheet" type="text/css"/>
		
		<script language="javascript" type="text/javascript">
			
			function addtordiv(obj)
			{
				alert("checkbox pressed");
			}
			
			// onkeyup -> create a DIV for each service
			function addDivsServices(event)
			{
				numS = parseInt(document.formreservation.numservices.value);
					
				divservices = document.createElement('div');
				divservices.id = 'divservices';
				divservices.style.border = "solid #00bfff 3px";
				divservices.style.padding = "5px";
				(document.getElementById('formreservation')).appendChild(divservices);
					
				for(i = 0; i < numS; i++) 
				{							
					//THE DIV OF THE SERVICE -> name: 'divservice' + i
					divservice = document.createElement('div');
					divservice.id = 'divservice' + i;
					divservice.style.border = "solid #00cd00 3px";
					divservice.style.padding = "5px";
					divservice.appendChild(document.createElement('br'));
					
					//SERVICE ID
					txt = document.createTextNode('Service ID: ');
					serviceid = document.createElement('input');
				        serviceid.name = 'serviceid' + i;
    				        divservice.appendChild(txt);
				        divservice.appendChild(serviceid);
				    
				        //SPACE
				        space = document.createTextNode("\u00a0");
				        divservice.appendChild(space);
					
					//COMBOBOX TYPE OF RESERVATION
					txt = document.createTextNode('Type of Reservation: ');
					cbx = document.createElement('select');
					cbx.name = 'tor' + i;
					
					opt = document.createElement('option');
					opt.value = 'type1';
					opt.text =  'type1';
					cbx.appendChild(opt);
					
					opt = document.createElement('option');                     
					opt.value = 'type2';
					opt.text =  'type2';
					cbx.appendChild(opt);
					
					opt = document.createElement('option');                     
					opt.value = 'type3';
					opt.text =  'type3';
					cbx.appendChild(opt);
					cbx.onchange = 'addDivTor()';
									
					divservice.appendChild(txt);
					divservice.appendChild(cbx);
					
					//NEW LINE
					divservice.appendChild(document.createElement('br'));
					divservice.appendChild(document.createElement('br'));
					
					//DIV ToR
					divtor = document.createElement('div');
					divtor.id = 'divtor' + i;
					divtor.style.border = "solid #ff83fa 3px";
					divtor.style.padding = "5px";
					divservice.appendChild(divtor);
					divservice.appendChild(document.createElement('br'));
					
				        divservices.appendChild(divservice);
				}
					
			}
		</script>
		
	</head>
	
	<body>
		<h1> Is Available </h1>
		<br>
		<s:form name = "formreservation" id = "formreservation">
			<s:textfield name = "numservices" label = "Number of services" onkeyup = "addDivsServices(event)"/><br>
		</s:form>
	</body>
</html>

La función 'addtordiv' es llamada des del combobox cuando se selecciona alguna opción. Pero no funciona, al seleccionar algun elemento del combobox tendría que salir el 'alert' pero no sale.

Muchas gracias!!!

lsobpla · #4 (**permalink**) 01/02/2008, 06:42

Hola!

Yo sólo veo que una vez creados todos los option del select, le incluyes el evento onchange al select con la función 'addDivTor()', y no la addtordiv que tienes definida al principio.... no sé si será ese el error....

Saludos!

lfc · #5 (**permalink**) 01/02/2008, 07:01

Si, tienes razón, perdona, ya me he dado cuenta de eso y ya lo he cambiado, pero sigue sin funcionar. He probado de poner la declaración de la function 'addDivTor' antes de la de 'addDivsServices' y también después, pero nada, no hay manera.

El problema debe estar en la manera de declarar el evento... pero es que no hay manera de que encuentre en ningún sitio como hacerlo, todos los ejemplos de eventos que he visto están declarados en el código html, no en el javascript... :(

kepawe · #6 (**permalink**) 01/02/2008, 07:59

Hola lfc y compañía.

Prueba a ver si así te funciona:

Código:

cbx.onchange = addtordiv;

Salu2

lfc · #7 (**permalink**) 01/02/2008, 08:21

SIII!!!! Esto ha funcionado!!!

Pero ahora me viene otra duda... obviamente no quiero hacer un solo alert dentro la función, sinó que quiero insertar elementos de formulario dentro del div 'divtor'. En concreto, me gustaría poner el siguiente codigo dentro de la función 'addDivTor':

Código:

function addtordiv(obj)
{				
	divdest = obj.nextSibling.nextSibling.nextSibling;
	iaux = parseInt((divdest.id).substring(6));
				
	//If there was something inside the div, delete it
	if (divdest.hasChildNodes())
	{
		while (divdest.hasChildNodes())
		{
			divdest.removeChild(divdest.firstChild);
		}
	}
				
	val = obj.options[obj.options.selectedIndex].value;
		
	txt = document.createTextNode('Start Time: ');
	divdest.appendChild(txt);
	st = document.createElement('input');
	st.name = 'text_field';
	st.value = '';
	divdest.appendChild(st);
	divdest.appendChild(document.createTextNode("\u00a0"));
	myImg = document.createElement('img');
	myImg.src = 'date-icon.gif';
	myImg.width = 18;
	myImg.height = 18;
	myImg.border = 0;
	myImg.alt = 'Pick a date';
	divdest.appendChild(myImg);
}

donde obj es el elemento que ha provocado el event (en este caso el combobox), pero resulta que claro, me dice que obj no está definido... Como puedo acceder al objeto que lanza el evento???

muchas gracias!

kepawe · #8 (**permalink**) 01/02/2008, 09:26

Me alegro

.

El primer argumento que se envía a addtordiv es el objeto Event, menos en IE, y el objeto que lanza el evento es asignado a this.

Código:

function addtordiv(event){

        var event = event || window.event;	
	var object = this;	

}

Espero que te sirva, tengo por ahí un enlace que ahora mismo no encuentro que explica muy bien como trabajar con eventos en JavaScript, cuando pueda te lo envió.
Salu2

lfc · #9 (**permalink**) 04/02/2008, 02:05

Si que me ha servido!!! Muchas gracias!!!