Refrescar DOM

[salbatore]

Hola, foreros:

Espero que me podais ayudar... pues rezo.. pero no encuentro respuesta... jeje. Mirar tengo un div con un formulario. Un formulario que tiene los eventos en onload, el formulario funciona perfectamente nada mas cargar la web. Pero si refreso exclusivamente el div del formulario para enviar los datos, y luego mostrar de nuevo el formulario, el formulario ha dejado de reproducir las funciones de los eventos del onload.

¿Por que ocurre?

[David]

Los formularios no tienen evento onload, además, ¿a qué te refieres con "refrescar exclusivamente el div del formulario"?.

[salbatore]

Hola, jeje

Tal vez no me explique bien... Tengo un formulario dentro de un div. El formulario tiene las funciones de los eventos escritos en window.onload = function(){}.

Cuando se ejecuta el formulario el div donde se encuentra se refresca... enviando los datos. Pero tambien muestra de nuevo el formulario para volver a rellenarlo si se desea. El problema es que una vez refrescado el formulario no hace ningun caso a los eventos declarados en window.onload.

¿Que puedo hacer?

[David]

¿Puedo ver el código del formulario?. ¿Cómo lo estás enviando?.

[salbatore]

Hola, jeje... te lo muestro debajo, aunque es un poco tocho, jeje:

1º Esta la accion del evento al clicar en el boton de enviar:

Código PHP:

  window.onload = function()
        {
            //boton del formulario
                if (document.getElementById('comment_form_submit') )
                    {
                        comment_form_submit_id = document.getElementById('comment_form_submit');
                        comment_form_submit_id.onclick = function() 
                            {
                                comment_form_send();
                            }  
                            
                    }
        }  
   

2º Esta el formulario dentro del div:

Código HTML:

<div id="comment_div"  >
		<form name="comment_form" onSubmit="return false">
			<input id="comment_form_nick" type="text" />
			<input id="comment_form_text" type="text"/>
			<input id="comment_form_submit" type="submit" value="enviar" />	
		</form>
	</div> 

3º Esta la funcion que envia los datos del formulario y refresca el div trayendo de nuevo el mismo formulario:

Código PHP:

  var request = false;
    if (window.XMLHttpRequest){request = new XMLHttpRequest();}
    function comment_form_send() 
        {
            if (window.ActiveXObject) 
                {
                    try{request = new ActiveXObject("Msxml2.XMLHTTP");} 
                    catch(e) 
                        {
                            try{request = new ActiveXObject("Microsoft.XMLHTTP");} 
                            catch(e){request = false;}
                         }
                }
            if (request) 
                {
                    //nick
                        if (document.getElementById('comment_form_nick') )
                            {
                                comment_form_nick_validation = document.getElementById('comment_form_nick');
                                comment_nick_value=comment_form_nick_validation.value;
                            }
                        else{comment_nick_value='';}
                    //text
                        if (document.getElementById('comment_form_text') )
                            {
                                comment_form_text_validation = document.getElementById('comment_form_text');
                                comment_text_value=comment_form_text_validation.value;
                            }
                        else{comment_text_value='';}
                    //envio de los datos
                        comment_div_id = document.getElementById('comment_div');
                        request.onreadystatechange = comment_form_receibe;
                        request.open("POST", "/comment_process.php");
                        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
                        request.send
                            ("url="+encodeURIComponent(self.location.href)
                            +"&nick="+encodeURIComponent(comment_nick_value)
                            +"&text="+encodeURIComponent(comment_text_value)
                            );
                }
        }
    function comment_form_receibe() 
        {
            comment_div_id = document.getElementById('comment_div');
            if (request.readyState == 4) 
                {
                    if (request.status == 200) 
                        {
                            comment_came = request.responseText;
                            comment_div_id.innerHTML = comment_came;
                        }
                } 
            else 
                {
                    comment_div_id.innerHTML = "← Validando";
                }
        }  
   

Todo funciona perfectamente... lo unico que falla es que al traer de nuevo el mismo formulario el evento de onclick del boton de enviar no funciona. ¿Sabes la razon?... llevo un tiempo haciendo formulario con estas funciones y funcionan perfectamente. Solo me ha dado este problema... que es algo grave.

[David]

Es que el evento onload de la página solo se ejecuta si se recarga la página, lo que no sucede en este caso ya que estás usando AJAX para realizar el proceso. Lo que puedes hacer es en el evento onreadystatechange en el estado 4, volver a ejecutar el código de asignación de eventos que también ejecutas en el onload (puedes colocarlo en una función y referenciarlo tanto en el onload como al recibir los datos).

[JavierB]

Mensaje movido al foro de AJAX desde Javascript.

Saludos,

[salbatore]

Hola de nuevo...

Soy feliz, jeje... ya lo consegui como me dijiste David el Grande... jeje. Lo coloque donde dijiste... y cuando llega el momento de cargar recarga las funciones de los eventos... jeje.

Muchas gracias!

PD: al principio no parecia ajax... jeje... ya lo siento... jeje.