problema con "firstChild.nextSibling" en IE

af1 · #1 (**permalink**) 22/05/2012, 09:32

Hola. Como va?

Les cuento mi priblema. El siguiente código me funciona perfecto en FF, pero no ocurre lo mismo en IE.

Lo que hace este código, que lo expongo simplificado, es preguntar si desea modificar el cuadro tarifario, y si el usuario acepta, el mismo javascript habilita todos los input text, removiendoles el atributo "readonly".

El problema que tengo, es que no puedo hacer funcionar en IE las funciones firstChild.nextSibling. O sea, que el problema es de posicionamiento de nodos en el DOM.

Código HTML:

Ver original<html>
<head>
<script>
function edicionTarifa(){
    if(confirm("Atención: Este cuadro tarifario es referenciado por todas las facturas que utilizan la tarifa y rango de potencia indicado. ¿Desea realizar la edición?")){
 
        var lista=document.getElementById('ul');
        var lis=lista.getElementsByTagName("li");
        
        for (var i in lis){
            if(i!=0){               
                lis[i].firstChild.nextSibling.removeAttribute('readonly');
            }
        }
    }
}   
</script>
</head>
<body onload='edicionTarifa();'>
 
<ul id='ul'>
<li>Periodo:<input type='text' id='t_periodo1111' name='t_periodo1111' value='1111'  readonly='readonly' /></li>
<li>Cargo fijo:<input type='text' id='t_cargo_fijo1111' name='t_cargo_fijo1111' readonly='readonly'/></li>
<li>Pp:<input type='text' id='t_pp1111' name='t_pp1111' readonly='readonly'/></li>
<li>Pfp:<input type='text' id='t_pfp1111' name='t_pfp1111'  readonly='readonly'/></li>
<li>Ep:<input type='text' id='t_ep1111' name='t_ep1111'  readonly='readonly'/></li>
<li>Er:<input type='text' id='t_er1111' name='t_er1111' readonly='readonly'/></li>
<li>Ev:<input type='text' id='t_ev1111' name='t_ev1111'  readonly='readonly'/></li>
<li>eps:<input type='text' id='t_eps1111' name='t_eps1111' readonly='readonly'/></li>
<li>ers:<input type='text' id='t_ers1111' name='t_ers1111' readonly='readonly'/></li>
<li>evs:<input type='text' id='t_evs1111' name='t_evs1111'  readonly='readonly'/></li>
<li>foninvemem:<input type='text' id='t_foninvemem1111' name='t_foninvemem1111'  readonly='readonly'/></li></ul><br/>
 
</body>
</head>

Como se posicionarian en los inputs que se encuentran dentro de los "li"?? Vuelvo a aclarar que este código simplificado (y el original que es en PHP) funcionan con mozilla FF..

Espero haber expresado bien el problema.

Saludos y gracias.

caricatos · #2 (**permalink**) 22/05/2012, 09:54

Hola:

Tanto firstChild como nextSibling (y evidentemente las combinaciones) son correctos en todas las versiones de explorer que recuerdo... lo que podría fallar es lo de remover el atributo readonly... tal vez con la "O" mayúscula, pero mejor podrías ser: readOnly = false...

Saludos

af1 · #3 (**permalink**) 22/05/2012, 10:11

Gracias por la respuesta. Pero no me funcionó lo de ponerle la "O" mayuscula.

Subo una imagen con el error que me "canta" el IE, después de abrir la página.

Q decis??

af1 · #4 (**permalink**) 23/05/2012, 05:13

No se ve bien la imagen. Lo que dice es "firstChild.nextSibling es nulo o no es un objeto"...

Y sigo sin poder posicionarme en los input con el IE...

af1 · #5 (**permalink**) 28/09/2012, 08:03

Retomamos este tema en el trabajo, para poderle dar solución para todos los navegadores.. Alguna idea de como hacerlo funcionar en el IE?? Alguien tuvo algún problema similar??

Gracias!

Perr0 · #6 (**permalink**) 28/09/2012, 09:15

prueba a hacer esta modificación en tu script:

Código Javascript:

Ver originalfor (var i in lis){
  if(i!=0){               
    lis[i].firstChild.nextSibling.removeAttribute('readonly');
  }
}

por

Código Javascript:

Ver originalfor (var i in lis){
  o = lis[i].firstChild;
  if(o) o.nextSibling.readOnly=false;
}

* primer punto: cuando lees el conjunto array de <li> en mozilla, te arroja error también pero al final, la variable i te envía un valor length del array (no el elemento), no lo detectas por salir al final del recorrido y termina de habilitar todos los input. Al leer en explorer, lee el largo del array como primera variable, no al final como en el otro navegador, por ello te arroja el error al acto y te coarta el script.

* segundo punto: removeAttribute('readonly') es limitado a ciertos navegadores, usa readOnly=false que es estándar.

mi humilde opinión
salu2

emprear · #7 (**permalink**) 28/09/2012, 09:34

Esta sería la forma correcta

Código HTML:

Ver original<!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>
<title>zzzzzz</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function edicionTarifa(){
var i;
if(confirm("Atención: Este cuadro tarifario es referenciado por todas las facturas que utilizan la tarifa y rango de potencia indicado. ¿Desea realizar la edición?")){
var lista=document.getElementById('ul');
var lis=lista.getElementsByTagName("li");
for (i=0; i<lis.length; i++) {
if(i!=0){  
lis[i].firstChild.nextSibling.readOnly = false;
}
}
 
}
}   
//]]>
</script>
 
</head>
<body onload='edicionTarifa();'>
<ul id='ul'>
<li>Periodo:<input type='text' id='t_periodo1111' name='t_periodo1111' value='1111' readonly='readonly' /></li>
<li>Cargo fijo:<input type='text' id='t_cargo_fijo1111' name='t_cargo_fijo1111' readonly='readonly' /></li>
<li>Pp:<input type='text' id='t_pp1111' name='t_pp1111' readonly='readonly' /></li>
<li>Pfp:<input type='text' id='t_pfp1111' name='t_pfp1111' readonly='readonly' /></li>
<li>Ep:<input type='text' id='t_ep1111' name='t_ep1111' readonly='readonly' /></li>
<li>Er:<input type='text' id='t_er1111' name='t_er1111' readonly='readonly' /></li>
<li>Ev:<input type='text' id='t_ev1111' name='t_ev1111' readonly='readonly' /></li>
<li>eps:<input type='text' id='t_eps1111' name='t_eps1111' readonly='readonly' /></li>
<li>ers:<input type='text' id='t_ers1111' name='t_ers1111' readonly='readonly' /></li>
<li>evs:<input type='text' id='t_evs1111' name='t_evs1111' readonly='readonly' /></li>
<li>foninvemem:<input type='text' id='t_foninvemem1111' name='t_foninvemem1111' readonly='readonly' /></li>
</ul>
<br />
</body>
</html>

Demo
http://foros.emprear.com/javascript/next-sibling.html

Saludos

af1 · #8 (**permalink**) 05/10/2012, 09:51

Perr0 y emprear, muchas gracias.. Ahora pruebo con esos códigos y comento.