actualizar DOM luego de usar AJAX

[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.