Mostrar y ocultar capas con Javascript Estoy creando un formulario por pasos (lo típico de las compras: datos personales, pago.. etc) y lo que he hecho es hacer todas las capas en una misma página y al inciar las oculto todas con Javascript, excepto la primera. De esta manera voy mostrando cuando me interesa cada capa y me comunico con el servidor mediante Ajax para ir guardando los datos.
Funciona de maravilla en cualquier versión reciente de Firefox y Opera, pero no funciona en NINGUNA versión de IE. He intentado cambiar mil y una cosas, pero sigue sin ejecutar absolutamente ni una sóla linea de código, ¡ni una!
Antes de tirar el código a la basura, he pensado en preguntar a ver si a alguien se le ocurre qué puede pasar:
Código:
Los botones siguiente y anterior llaman a la función go_paso(..), y carga() se ejecuta al iniciar la página. A partir de ahí ya se puede ir viendo todo como evoluciona. function nuevoAjax()
{ var xmlHttp;
try { xmlHttp=new XMLHttpRequest();return xmlHttp; }
catch (e) { try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");return xmlHttp; }
catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");return xmlHttp; }
catch (e) { alert("¡Tu navegador no soporta AJAX!");return false; }
}}}
function carga(){
for(i=1;i<6;i++){
content = 'ipaso'+i;
document.getElementById(content).style.height = 0 + 'px';
xDisplay(content, "none");
}
xDisplay('loading', 'none');
xDisplay('ipaso0', 'block');
}
var t;
var i;
var pactual;
var puede;
var type;
function oculta(divid){
var infodiv = document.getElementById(divid);
infodiv.style.height = infodiv.offsetHeight + 'px';// establesco la altura por que js no la lee a menos que haya sido establecida antes.
i=setInterval(function(){ redimenciona(0, divid); }, 100);
}
function muestra(divid, height){
var infodiv = document.getElementById(divid);
infodiv.style.height = infodiv.offsetHeight + 'px';// establesco la altura por que js no la lee a menos que haya sido establecida antes.
i=setInterval(function(){ redimenciona(height, divid); }, 100);
}
function redimenciona(limite, divid){
var infodiv = document.getElementById(divid);
inicial = parseInt(infodiv.style.height);
actual = Math.ceil((limite - inicial)/4);
inicial += actual;
infodiv.style.height = inicial + 'px';
if(parseInt(infodiv.style.height) >= (limite - 5) && parseInt(infodiv.style.height) <= (limite + 5)){
clearInterval(i);
infodiv.style.height = limite + 'px';
}
}
function go_paso(paso, height){
clearTimeout(t);
switch(paso){
case 1:
if(document.getElementById('infobase').checked !== true){
puede = false;
alert("Debes leer la información y las bases del sorteo y ser mayor de dieciséis años para continuar con el proceso de inscripción. Si cumples todo esto, marca la casilla que encontrarás en el cuadro amarillo.");
}else{
puede = true;
}
break;
case 2:
element = document.getElementById('type');
type = element.options[element.selectedIndex].value;
puede=true;
break;
case 3:
puede=true;
break;
case 4:
puede=true;
break;
case 5:
puede=true;
break;
}
if(puede == true){
clearTimeout(t);
if(pactual == 4){
content = 'ipaso4';
}else{
if(paso<pactual){
content = 'ipaso' + (paso+1);
}else{
content = 'ipaso' + (paso-1);
}
}
oculta(content);
t=setTimeout(function(){ espera(paso, height); },2500);
puede=false;
}
}
function espera(paso, height){
xDisplay('loading', 'block');
clearTimeout(t);
if((paso !== 4) && (paso !== 3)){
guarda_datos(paso, height);
}else{
t=setTimeout(function(){ ir_a_paso(paso, height); },3500);
}
}
function get_height(paso){
if(paso == 1){
return 750;
}else if(paso == 2){
return 1300;
}else if(paso == 3){
return 450;
}else if(paso == 0){
return 450;
}
}
function guarda_datos(paso, height){
var ajax = new newAjax();
ajax.open("POST", "http://beta.blogosferaxl.com/sorteo/ajax.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
switch(paso){
case 1:
ajax.send("paso="+paso+"&infobase="+document.getElementById('infobase').value);
break;
case 2:
mensaje = "paso="+paso+"&nombre="+document.getElementById('nombre').value+"&email="+document.getElementById('email').value+"&type="+document.getElementById('type').options[document.getElementById('type').selectedIndex].value+"&title="+document.getElementById('title').value+"&url="+document.getElementById('url').value;
alert(mensaje);
ajax.send("paso="+paso+"&nombre="+document.getElementById('nombre').value+"&email="+document.getElementById('email').value+"&type="+document.getElementById('type').options[document.getElementById('type').selectedIndex].value+"&title="+document.getElementById('title').value+"&url="+document.getElementById('url').value);
break;
case 5:
ajax.send("paso=4");
break;
}
ajax.onreadystatechange=function(){
if (ajax.readyState==4){
var respuesta = ajax.responseText;
if(respuesta == "continue"){
t=setTimeout(function(){ ir_a_paso(paso, height); },3500);
}else{
t=setTimeout(function(){ ir_a_paso(pactual, get_height(pactual)); },3500);
}
}
ajax.onreadystatechange=null;
}
}
function ir_a_paso(paso, height){
pactual = paso;
content = 'ipaso' + paso;
xDisplay('loading', 'none');
xDisplay(content, 'block');
muestra(content, height);
clearTimeout(t);
if(paso == 3){
t=setTimeout(function(){ comprobar_url(); },3500);
}
}
function comprobar_url(){
var ajax= new newAjax();
ajax.open("POST", "http://beta.blogosferaxl.com/sorteo/ajax.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("paso=3&links="+document.getElementById('links').value);
ajax.onreadystatechange=function(){
if (ajax.readyState==4){
var respuesta = ajax.responseText;
if(respuesta == "continue"){
t=setTimeout(function(){ go_paso(4, 850); },3500);
}else{
t=setTimeout(function(){ go_paso(2, 1300); },3500);
}
ajax.onreadystatechange=null;
}
}
}
Por los errores de IE, las líneas que fallan son las que cambian el estilo de los elementos (overflow, display, height, etc), pero no se me ocurre otra manera de hacerlo. El código tiene que estar correcto, si no no funcionaría en el resto de navegadores, ¿no?
Gracias por leer hasta aquí. A ver si a alguien se le enciende la bombilla más que a mi.
Saludos
