actualizar DOM luego de usar AJAX

[andresbetancourt]

Buenos días,

Espero que todos se encuentren bien y que me puedan brindar su valiosa colaboración. Tengo la siguiente inquietud y necesidad:

¿cómo actualizo el DOM, luego de hacer un cargue de un formulario dentro de un DIV con AJAX?, lo anterior lo necesito porque luego de cargar el formulario, requiero validar sus campos, pero resulta que los ID de los diferentes campos de dicho formulario, no existen en el DOM entonces cuando aplico las validaciones no sucede nada.


gracias por su ayuda.

[caricatos]

Hola:

Debes replantear la pregunta ya que el DOM se actualiza en cada cambio que se realiza.

Cuando se insertan nuevos nodos se actualiza el DOM... Lo que debes saber es qué elementos se insertan y modificar tu sistema de validación.

Saludos

[andresbetancourt]

primero que todo muchas gracias por responder.

he estado leyendo y al parecer no hay una forma de actualizar el DOM, lo que se debe hacer es asignar los eventos algo asi lei.


pero no se como hacerlo, mira lo que sucede es lo siguente:

yo no entiendo porque es tan complicado que me comprendan, tengo un formulario que cargo con ajax puro en una pagina hmtl dentro de un DIV y necesito validar los campos pero cuando busco los elementos del formulario por ID, me dice que no existen, entonces como hago para que existan y asi poderlos validar.


gracias

[caricatos]

Hola:

Iniciado por andresbetancourt

...y al parecer no hay una forma de actualizar el DOM...

Erre que erre... ya te he comentado que el DOM siempre está actualizado, lo que haces insertando elementos a través de Ajax es modificando el aspecto y con Ajax también puedes envíar información de los id's que asignas... no sólo existe responseText e innerHTML... Si quieres esa información, también puedes valerte del DOM. Recorrer el DOM tampoco es tan difícil (puedes buscar en la web. Yo puse un destripador que es bastante didáctico).

Saludos

[andresbetancourt]

caricatos, muchas gracias por tu ayuda.

me gustaría para entender mejor el problema, ¿por qué es que no me funciona si el DOM esta siempre actualizado y el formulario que inserto ya tiene los ids en los diferentes componentes que lo conforman?

¿es necesario recorrer todo el DOM para llegar al componente que requiero?, ¿no se puede hacer simplemente referencia a él con su ID correspondiente?, porque hasta el momento eso es lo que hago pero no me funciona.


gracias

[caricatos]

Hola:

La verdad es que sin ver ningún código, se hace difícil responder... las opciones pueden ser infinitas... usar un id ya existente sin eliminarlo, o tal vez otra cosa que no sean los ids, ya que lo que hay que revisar es si existe algún error (tal vez tonto... o muy tonto) que aborten todo.

Una buena práctica es revisar la consola de errores del navegador (si son varios o todos los navegadores, mejor)

Personalmente me suele llevar al menos media jornada en algunos errores, y con paciencia voy poniendo alertas con valores intermedios para detectar valores incorrectos... No es fácil.

Saludos

[andresbetancourt]

gracias por tu ayuda, te voy a poner el código y te voy a describir sucesos que me pasan para darte indicios de los que tal vez pueda ser, según tu conocimiento y experiencia.


las siguientes funciones las tengo en la etiqueta SCRIPT dentro de la página HTML maestra

Código:

function mostrar_modif_prod(url, id_contenedor){

	var pagina_requerida = false
	if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
		pagina_requerida = new XMLHttpRequest()
	} 
	else if (window.ActiveXObject){ // pero si es IE
		try {
		pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){ // en caso que sea una versión antigua
		try{
		pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
		}
		catch (e){}
		}
	}
	else
	return false
	
	pagina_requerida.onreadystatechange=function(){ // función de respuesta
		cargarpagina(pagina_requerida, id_contenedor)
	}
	pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
	pagina_requerida.send(null)
}




// todo es correcto y ha llegado el momento de poner la información requerida
	// en su sitio en la pagina xhtml
	function cargarpagina(pagina_requerida, id_contenedor){
	if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
		document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
		
			
	}

la anterior función es llamada desde un enlace html en el cual se le envían los parámetros necesarios para cargar el formulario:

Código HTML:

<a href=\"#\" onclick=\"mostrar_modif_prod('http://".$_SERVER["SERVER_NAME"].":8081/ventas/v/logica/modificarproducto.php?nom=".$fila['nombre']."&precioc=".$fila['preciocosto']."&preciov=".$fila['precioventa']."&categoria=".$fila['categoria']."&descrip=".$fila['descripcion']."&id=".$fila['identificador']."&foto1=".$fila['foto1']."&foto2=".$fila['foto2']."&foto3=".$fila['foto3']."&miniatura=".$fila['fotominiatura']."','destino1')\">Modificar</a>

a continuación el formulario que cargo en la pagina principal por medio de las funciones js antes indicadas

Código HTML:

<div class="contenedor_modificarproducto">

<!-- aca va el logo -->
			<div id="logo2_modificarproducto">
					<h2>Modificar producto</h2>
			</div>
			
	<div id="datos-producto_modificarproducto">

	<br />
	
	<form action="http://localhost:8081/ventas/c/producto.php" enctype="multipart/form-data" method="POST" onSubmit="return confirm('¿Está seguro que desea ejecutar la acción seleccionada?')">
				
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="nombre">Nombre: </label>
			<input type="text" id="b1" name="nombre" value="{nombre}" maxlength="100" />
					
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="preciocosto">Precio costo: </label>
			<input type="text" name="pcosto" id="" value="{precio_costo}" maxlength="15" />
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="nombre">Precio venta: </label>
			<input type="text" id="b2" name="pventa" value="{precio_venta}" maxlength="15" />
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="categoria">Categoria: </label>
			<select id="b3" name="categoria">	
			<!-- se usa para hacer una especie de marca en la plantilla de la vista, 
			con el fin de que la logica de la vista pueda identificar en que lugar debe poner codigo html, 
			en conclusion esta marca sera reemplazada por codigo html y ese reemplazo lo hace la logica de la vista 
			osea ventas\v\logica\crearproducto.php --> 
			{lista_categorias}			
			</select>
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="descripcion">Descripción producto: </label>
			<input type="text" name="descripcion" value="{descripcion}" maxlength="500" />
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="foto1">Foto 1: </label>
			<input type="file" id="b4" name="foto1" />
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="foto2">Foto 2: </label>
			<input type="file" name="foto2" />
		</div>	
		<br />					
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="foto3">Foto 3: </label>
			<input type="file" name="foto3" />
		</div>		
		<br />
		

		<input class="boton_modificarproducto" type="submit" name="modificar"  value="Modificar" />
	</form>

	</div>				
</div> 

cosas que he hecho para verificar:

1. en el código javascript he tratado de detectar los ID de los campos del formulario para ver si existen (con getElementById) y si es true (osea si existen) pues muestro un mensaje con alert y sino pues muestro otro mensaje. Siempre retorna false el método getElementById, a pesar de que el formulario ya ha sido cargado con AJAX

2. también he puesto las validaciones sobre los campos luego de la sentencia
document.getElementById(id_contenedor).innerHTML=p agina_requerida.responseText
y funciona la validación pero para el primer campo no más, el resto de campos, no los valida.

esas son las dos cosas que he realizado, tal vez te den algun indicio de lo que sucede.

quedo a la espera, gracias.

[GatorV]

Pues al menos en el código que expones, no se ve como es que validas ni donde están tus funciones para validar...

Ahora ten en cuenta que si estas enviando javascript en tu respuesta AJAX, tienes que evaluar el contenido JS, esto no se hace de forma automágica.

[marlanga]

La mejor forma de validar no es la que quieres conseguir, ni la que utiliza mucha gente.

La forma elegante de validar es meter en cada <INPUT:TEXT> o <TEXTAREA> un atributo nuevo, por ejemplo "regexpvalidator" que sea el patrón regular con el que validar ese elemento HTML. Cuando sobre un formulario en envía, se dispara su evento onsubmit, que se utilizará par recorrer todos los elementos HTML que tenga dentro. Para cada elemento, si tiene el atributo "regexpvalidator", se le saca y se aplica al VALUE de ese elemento. Si coincide, es que está bien validado, y se pasa al siguiente elemento.

Para mostrar mensajes de error, se utiliza la misma técnica; añadirle a cada elemento del FORM otro atributo con el mensaje de error a mostrar.

Siguiendo estas prácticas, haciendo código genérico, independiente y funcional, consigues crear una buena librería de validación local de formularios que podrás utilizarla en todas tus páginas.

Ésto es solo una idea dedicada a quien sabe programar javascript, y quiere ir un poco mas allá.

[andresbetancourt]

Iniciado por GatorV

Pues al menos en el código que expones, no se ve como es que validas ni donde están tus funciones para validar...

Ahora ten en cuenta que si estas enviando javascript en tu respuesta AJAX, tienes que evaluar el contenido JS, esto no se hace de forma automágica.

muchas gracias por tu respuesta,

la validación la hago con un plugin que se llama LIVEVALIDATION (http://livevalidation.com/examples), y en cuanto a que si el contenido que cargo con AJAX tiene javascript, la respuesta es si.

el código javascript que contiene es el necesario para validar cada campo, y es algo como lo siguiente para cada uno de los campos:

<input id="f1" type="text" />
<script>
var f1 = new LiveValidation('f1'); //código necesario para la validación
f1.add( Validate.Presence ); //código necesario para la validación
</script>

¿cómo valido el JS que viaja en el formulario que muestro con AJAX?


de antemano muchas gracias

Iniciado por marlanga

La mejor forma de validar no es la que quieres conseguir, ni la que utiliza mucha gente.

La forma elegante de validar es meter en cada <INPUT:TEXT> o <TEXTAREA> un atributo nuevo, por ejemplo "regexpvalidator" que sea el patrón regular con el que validar ese elemento HTML. Cuando sobre un formulario en envía, se dispara su evento onsubmit, que se utilizará par recorrer todos los elementos HTML que tenga dentro. Para cada elemento, si tiene el atributo "regexpvalidator", se le saca y se aplica al VALUE de ese elemento. Si coincide, es que está bien validado, y se pasa al siguiente elemento.

Para mostrar mensajes de error, se utiliza la misma técnica; añadirle a cada elemento del FORM otro atributo con el mensaje de error a mostrar.

Siguiendo estas prácticas, haciendo código genérico, independiente y funcional, consigues crear una buena librería de validación local de formularios que podrás utilizarla en todas tus páginas.

Ésto es solo una idea dedicada a quien sabe programar javascript, y quiere ir un poco mas allá.

muchas gracias por tu respuesta,

la idea tuya es algo como:

<input type="text" regexpvalidator = "expresión regular" mensaje="mensaje de error" />

y con PHP (o el lenguaje que se use) aplicar la expresión regular que hay en regexpvalidator y mostrar o no el mensaje que hay en mensaje ???

gracias por tu ayuda también, me gustaria entender mejor esta tecnica seria util para mi y para otros usuarios del foro, no se si tengas un blog o algun lugar donde la expliques mejor.

[marlanga]

La validación es para hacerla con javascript antes de enviar el formulario al servidor.
De forma muy simple éste es el esqueleto y la forma de usarla:
http://jsfiddle.net/3WWgW/2/

Librería:

Código Javascript:

function JsValidator(form){
    this.form=form;
    this.validar=function(){
        var n=this.form.elements.length;
        for (var i=0;i<n;i++)
        {
            var elemento=this.form.elements[i];
            if (elemento.hasAttribute("regexp"))
            {
                var regExp = new RegExp(elemento.getAttribute("regexp"));
                var txtError=(elemento.hasAttribute("error"))?elemento.getAttribute("error"):"";
                if (!regExp.test(elemento.value))
                {
                    return { valido:false, texto: txtError };
                }
            }
        }
        return { valido:true };
    }
}
 

Código HTML:

<form id="form1" method="get" action="http://www.marca.com">
    Email: <input type="text" name="email" regexp="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" error="El email no es correcto." /><br/>
    Nick: <input type="text" name="nick" regexp="^.+$" error="El nick es obligatorio" /><br/>
    Pais: <input type="text" name="pais" /><br/>
    <input type="submit" valure="enviar" />
</form>
 

Javascript para la página donde está el form:

Código Javascript:

window.onload=function(){
    var form=document.getElementById("form1");
    var validador=new JsValidator(form);
    form.onsubmit=function(){
        var respuesta=validador.validar();
        if (!respuesta.valido)
        {
            alert(respuesta.texto);
            return false;
        }
        return true;
    };
    
};
 

Este ejemplo está hecho en penas 10 minutos. Se puede mejorar la librería mucho, por ejemplo haciendo que el error aparezca en un div flotante encima del elemento que ha provocado el error. También es posible crear una colección de patrones regulares genéricos, como el patrón de EMAIL, el de cadena no vacía, el de campo numérico, el de formato de fechas válido, etc. Y en vez de usar el atributo regexp, crear otro atributo nuevo, que sirva para usar patrones regulares que ya están por defecto en esa colección de la librería de validación. Etc.

[andresbetancourt]

muchas gracias por tu explicación marlanga,

por ahora voy a ver si funciona mi libreria de validación pero esta vez voy a cargar el formulario con el metodo load de jquery.

esto lo hare el fin de semana porque me encuentro trabajando de lunes a viernes :), ya les estare contando.

[neptuno2k]

Andres a mi me pasa lo mismo con mi codigo. tenemos el mismo problema. Pero aun no logre ver como hacer que el texto html del formulario cargado en la pagina principal mediante ajax con responseText sea interpretado en el DOM y reconozca los ID asignados. Seguramente hay que crear los nodos corespondientes y cargarlos comando a comando. Ya que de la forma que trabajamos solo estamos pegando texto que el navegador resuelve e interpreta pero no asi su codigo JS.

[andresbetancourt]

Iniciado por neptuno2k

Andres a mi me pasa lo mismo con mi codigo. tenemos el mismo problema. Pero aun no logre ver como hacer que el texto html del formulario cargado en la pagina principal mediante ajax con responseText sea interpretado en el DOM y reconozca los ID asignados. Seguramente hay que crear los nodos corespondientes y cargarlos comando a comando. Ya que de la forma que trabajamos solo estamos pegando texto que el navegador resuelve e interpreta pero no asi su codigo JS.

la verdad hasta el momento estoy confundido con el tema, porque:

algunos dicen que si se actualiza el DOM, pero al tratar de obtener un elemento con el ID, me retorna false, como comento en mensajes anteriores, entonces eso me da a entender de que no se está actualizando.

la otra es que si pongo la validacion debajo del reponsetext, funciona para validar el primer campo, entonces quiere decir que si esta reconociendo el ID del primer campo.

lo que haré es lo que menciono en el último mensaje, pero el fin de semana y ya les estare contando.

y si me funciona, te puedo ayudar explicandote como lo hice, con jquery

[caricatos]

Hola:

Erre que erre del erre que erre... ... El DOM no se actualiza porque no es algo "actualizable"... se trata del documento.

Tal vez sea el momento que revises la consola de erroes de tu navegador... hay distintas opciones... ides repes, errores javascripts...

Saludos

[andresbetancourt]

buenas noches, les cuento que he realizado el experimento con jquery y no me funciona totalmente, pues sólo valida el primer campo, cuando hago uso de la pagina desde el localhost, pero cuando le doy al formulario, guardar como, y luego lo abro con el navegador web, si me funciona la validacion full en todos los campos del formulario.

a continuación explico lo que hice esta vez:


en la pagina principal donde cargo el formulario dentro de un DIV, he puesto el siguiente metodo o función JS que en su interior tiene la funcion LOAD de JQUERY para cargar el formulario en el DIV indicado

function mostrar_modif_prod(url_con_variables_get){
$("#destino1").load(url_con_variables_get);
}

esta funcion es llamada cuando el usuario hace clic en un enlace que le pasa a dicha funcion una URL con variables.

El argumento url_con_variables_get contiene la URL para llamado a una pagina PHP que se encarga de leer las variables pasadas en dicha URL por metodo get, y luego enviar como respueta el formulario con los valores pasados por URL cargados dentro de los campos del formulario.

el argumento url_con_variables_get recibe una URL como la siguiente:

http://".$_SERVER["SERVER_NAME"].":8081/modificarproducto.php?variable1=""&variable2=""...



y el formulario se carga perfectamente con los dato pasados por URL dentro de sus campos. Pero al hacer submit, sólo se realiza la validación al primer campo como les comento.

<form id="formulario_mod_prod" action="http://localhost:8081/producto.php" enctype="multipart/form-data" method="POST" onSubmit="return confirm('¿Está seguro que desea ejecutar la acción seleccionada?')">

<div class="index1-campos_modificarproducto">
<label class="label_modificarproducto" for="nombre">Nombre: </label>
<input type="text" id="b1" name="nombre" value="{nombre}" maxlength="100" />
<!-- codigo usado para validar el campo, usando el plugin livevalidation -->
<script type="text/javascript">
var b1 = new LiveValidation('b1', {onlyOnSubmit: true }); //b1 es el id del campo en la vista modificarproducto.html
b1.add( Validate.Presence );
</script>
</div>
<br />
<div class="index1-campos_modificarproducto">
<label class="label_modificarproducto" for="preciocosto">Precio costo: </label>
<input type="text" name="pcosto" id="" value="{precio_costo}" maxlength="15" />
<!-- codigo usado para validar el campo, usando el plugin livevalidation -->
<script type="text/javascript">
var pcosto = new LiveValidation('pcosto', {onlyOnSubmit: true }); //pcosto es el id del campo en la vista modificarproducto.html
pcosto.add( Validate.Numericality );
</script>
</div>
<br />

...

y asi como esos dos campos hay mas campos

...

que sera lo que sucede?

gracias

[andresbetancourt]

muchachos he avanzado un poco, ya me funciona de la siguiente manera:

hago log in en la aplicación, voy y cargo el formulario inmediatamente entro, y me funciona la validación, pero cuando vuelvo a cargar el formulario por segunda vez, para ingresar los datos y ver si funciona la validacion, pues resulta que ya no funciona.

¿qué sucederá?

[andresbetancourt]

que pena por repetir el mensaje, fue sin querer.

les cuento que he descubierto algo y quisiera que me explicaran porque sucede lo siguiente:

ya he puesto a funcionar la validación, al parecer tenia creado mal un ID de un campo del formulario y lo otro, es que como el formulario es para modificar un registro de la base de datos, entonces, cargar el formulario en la interfaz gráfica, los campos de éste aparecen con datos, para que el usuario pueda saber que es lo que desea modificar especificamente, y habian datos que venian con espacios entonces use la función urlencode de php para que las variables pasadas por URL fueran codificadas.

ya habiendo solucionado esto, resulta que me está pasando lo que a continuación explico:


para que la validación de los campos del formulario funcione, debe pasar una de las dos cosas siguientes:

1. ingreso a la aplicación, me dirijo al formulario

2. si ya he cargado el formulario una vez, debo refrescar la página web con f5 y luego si acceder de nuevo al formulario para que la validación sobre él, funcione perfectamente, ya que si no refresco, la validación sobre los campos no funciona.


¿a que se debe esto? y ¿que puedo hacer?, ya que el formulario es cargado con jquery (ajax) y por tal motivo la página web no se recarga, no entiendo porque sólo me pasa con este formulario, ya que mi aplicación esta compuesta por otros formularios y con ellos todo va bien, no tengo que estar recargando la página para que la validación funcione, será porque son formularios de creación osea que sus campos aparecen vacíos y no diligenciados como mi formulario de modificación con el que tengo problemas???

gracias

[andresbetancourt]

nadie se anima a continuar ayudandome?