En uno de los html, tengo un formulario de contacto con funciones Ajax, el cual al visualizarlo individualmente, Las funciones cargan perfecto, Pero al visualizarlo dentro del div "iframe" las funciones Ajax no corren.
Les dejo el codigo a ver si me dicen en que estoy fallando.
Este es el index
Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META NAME="Title" CONTENT="Gps Consultores">
<META NAME="Author" CONTENT="Ronald Morrison">
<META NAME="Subject" CONTENT="GPS Consultores">
<META NAME="Description" CONTENT="GPS Consultores es una empresa constituida en el mes de mayo del año 2009 por dos profesionales del área de la Ingeniería Industrial, con expe-riencia de 20 años en el desarrollo de proyectos de modernización en el Servicio de Impuestos Internos y en empre-sas del sector privado. Nuestra empresa cuenta con un equipo de profesionales de sólida formación y amplia experiencia en gestión de procesos, sistemas y desarrollo de recursos humanos. Además, contamos con una red de consultoras asociadas para potenciar las soluciones a las necesidades de nuestros clientes.">
<META NAME="Keywords" CONTENT="GPS, Consultores, Consultora, gps consultores,">
<META NAME="Generator" CONTENT="html, ajax, flash">
<META NAME="Language" CONTENT="Spanish">
<META NAME="Revisit" CONTENT="30 days">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Robots" CONTENT="All">
<title>Gps Consultores</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link href="gps.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="js/codigo.js"></script>
</head>
<body>
<div id="todo">
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="123" align="top" id="FlashID">
<param name="movie" value="intro.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="7.0.70.0" />
<!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
<!--[if !IE]>-->
<object data="intro.swf" type="application/x-shockwave-flash" width="800" height="123" align="top">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="7.0.70.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="menu">
<div id="menucenter">
<ul>
<li><a href="javascript:llamarasincrono('1.html', 'iframe');">Quienes Somos</a></li>
<li><a href="javascript:llamarasincrono('4.html', 'iframe');">Que hacemos</a></li>
<li><a href="javascript:llamarasincrono('under', 'iframe');">Descripción de modelos</a></li>
<li><a href="javascript:llamarasincrono('7.html', 'iframe');">Contacto</a></li>
</ul>
</div></div>
<div id="contenido">
<div id="iframe"></div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</body>
</html>
Esta es la pagina que contiene el formulario:
Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <link href="gps.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="js/codigo.js"></script> </head> <body> <div id="todo7"> <div id="texto7"> <p>Dirección: Huérfanos 1160, oficina 609, Santiago,<br />Chile <br />Fono: (56-2) 3611041 <br />Correo Electrónico: [email protected] <br /><div id="formContenedor"> <form id="formulario"> <div id="transparencia"> <div id="transparenciaMensaje">aaaaaaaaaaaa</div> </div> <table> <tbody> <tr> <td class="label">Nombre:</td> <td class="campo"><input class="inputNormal" type="text" id="inputNombre"></td> <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Nombre')"></td> </tr> <tr> <td class="label">Empresa:</td> <td class="campo"><input class="inputNormal" type="text" id="inputEmpresa"></td> <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Empresa')"></td> </tr> <tr> <td class="label">Teléfono:</td> <td class="campo"><input class="inputNormal" type="text" id="inputTelefono"></td> <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Telefono')"></td> </tr> <tr> <td class="label">Mail:</td> <td class="campo"><input class="inputNormal" type="text" id="inputCorreo"></td> <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Correo')"></td> </tr> <tr> <td class="label">Comentarios:</td> <td class="campo"><textarea class="inputNormal" id="inputComentario"></textarea></td> <td class="ayuda"><img src="ayuda.gif" alt="Ayuda" onmouseover="muestraAyuda(event, 'Comentario')"></td> </tr> </tbody> </table> <br> <div> <button id="botonEnviar" onClick="validaForm()" type="button">Enviar</button> <button type="reset">Borrar</button> </div> </form> </div> <!-- Capa para mostrar los mensajes de ayuda al presionar los iconos correspondientes --> <div id="mensajesAyuda"> <div id="ayudaTitulo"></div> <div id="ayudaTexto"></div> </div> </div> </div> </body> </html>
Este es el codigo Javascript que utilizo para ambas paginas:
Código Javascript :
// Documento JavaScript
// Esta función cargará las paginas
function llamarasincrono(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
}
onload=function()
{
cAyuda=document.getElementById("mensajesAyuda");
cNombre=document.getElementById("ayudaTitulo");
cTex=document.getElementById("ayudaTexto");
divTransparente=document.getElementById("transparencia");
divMensaje=document.getElementById("transparenciaMensaje");
form=document.getElementById("formulario");
urlDestino="mail.php";
claseNormal="input";
claseError="inputError";
ayuda=new Array();
ayuda["Nombre"]="Ingresa tu nombre. De 4 a 50 caracteres. OBLIGATORIO";
ayuda["Empresa"]="Ingresa el nombre de tu Empresa. De 4 a 50 caracteres.";
ayuda["Telefono"]="Ingresa un teléfono de contacto.";
ayuda["Correo"]="Ingresa un e-mail válido. OBLIGATORIO";
ayuda["Comentario"]="Ingresa tus comentarios. De 5 a 500 caracteres. OBLIGATORIO";
preCarga("ok.gif", "loading.gif", "error.gif");
}
function preCarga()
{
imagenes=new Array();
for(i=0; i<arguments.length; i++)
{
imagenes[i]=document.createElement("img");
imagenes[i].src=arguments[i];
}
}
function nuevoAjax()
{
var xmlhttp=false;
try
{
// No IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}
function limpiaForm()
{
for(i=0; i<=4; i++)
{
form.elements[i].className=claseNormal;
}
document.getElementById("inputComentario").className=claseNormal;
}
function campoError(campo)
{
campo.className=claseError;
error=1;
}
function ocultaMensaje()
{
divTransparente.style.display="none";
}
function muestraMensaje(mensaje)
{
divMensaje.innerHTML=mensaje;
divTransparente.style.display="block";
}
function eliminaEspacios(cadena)
{
// Funcion para eliminar espacios delante y detras de cada cadena
while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
return cadena;
}
function validaLongitud(valor, permiteVacio, minimo, maximo)
{
var cantCar=valor.length;
if(valor=="")
{
if(permiteVacio) return true;
else return false;
}
else
{
if(cantCar>=minimo && cantCar<=maximo) return true;
else return false;
}
}
function validaCorreo(valor)
{
var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
if(reg.test(valor)) return true;
else return false;
}
function validaForm()
{
limpiaForm();
error=0;
var nombre=eliminaEspacios(form.inputNombre.value);
var empresa=eliminaEspacios(form.inputEmpresa.value);
var telefono=eliminaEspacios(form.inputTelefono.value);
var correo=eliminaEspacios(form.inputCorreo.value);
var comentarios=eliminaEspacios(form.inputComentario.value);
if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);
if(!validaLongitud(empresa, 1, 4, 50)) campoError(form.inputEmpresa);
if(!validaLongitud(telefono, 1, 4, 50)) campoError(form.inputTelefono);
if(!validaCorreo(correo)) campoError(form.inputCorreo);
if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
if(error==1)
{
var texto="<img src='error.gif' alt='Error'><br><br>Error: revise los campos en rojo.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
muestraMensaje(texto);
}
else
{
var texto="<img src='loading.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
muestraMensaje(texto);
var ajax=nuevoAjax();
ajax.open("POST", urlDestino, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("nombre="+nombre+"&empresa="+empresa+"&telefono="+telefono+"&correo="+correo+"&comentarios="+comentarios);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
var respuesta=ajax.responseText;
if(respuesta=="OK")
{
var texto="<img src='ok.gif' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
}
else var texto="<img src='error.gif'><br><br>Error: intente más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
muestraMensaje(texto);
}
}
}
}
// Mensajes de ayuda
if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
else navegador=1;
function colocaAyuda(event)
{
if(navegador==0)
{
var corX=window.event.clientX+document.documentElement.scrollLeft;
var corY=window.event.clientY+document.documentElement.scrollTop;
}
else
{
var corX=event.clientX+window.scrollX;
var corY=event.clientY+window.scrollY;
}
cAyuda.style.top=corY+20+"px";
cAyuda.style.left=corX+15+"px";
}
function ocultaAyuda()
{
cAyuda.style.display="none";
if(navegador==0)
{
document.detachEvent("onmousemove", colocaAyuda);
document.detachEvent("onmouseout", ocultaAyuda);
}
else
{
document.removeEventListener("mousemove", colocaAyuda, true);
document.removeEventListener("mouseout", ocultaAyuda, true);
}
}
function muestraAyuda(event, campo)
{
colocaAyuda(event);
if(navegador==0)
{
document.attachEvent("onmousemove", colocaAyuda);
document.attachEvent("onmouseout", ocultaAyuda);
}
else
{
document.addEventListener("mousemove", colocaAyuda, true);
document.addEventListener("mouseout", ocultaAyuda, true);
}
cNombre.innerHTML=campo;
cTex.innerHTML=ayuda[campo];
cAyuda.style.display="block";
}
Espero que alguien acá me pueda orientar al respecto.
Gracias!
