DOM Firefox, IE, Chrome, etc...

[machoman112233]

Buenas!!!

Puede que este tema sea haya tratado muchas veces, pero me puede decir alguien como usar los DOM para cada navegador o donde encontrar equivalencias para poder hacer funcionar un codigo javascript en todos los navegadores... Este estoy harto de buscar tantas cosas y todo lo que hay en la pagina de W3C solo funciona perfectamente en Firefox, los demas no dan ni una...

[David]

En realidad, la mayoría de los navegadores siguen el estándar DOM a excepción de Internet Explorer, ¿hay algún caso específico en el que tienes problemas?

[machoman112233]

Tengo por ejemplo este codigo... se supone que al cambiar una opcion del <select> me cambia el texto que hay en un <textarea>... Solo funcion con Firefox, para los demas nada... solo quiero saber, que hago mal para que solo me funcione con Firefox...

Código javascript:

<div class="box">
                <fieldset>
                    <legend><?php echo $lang['QUESTION_LEGEND_UPDATE']; ?></legend>
                    <?php
                    $sql = 'SELECT * FROM ' .$prefix. 'preguntes ORDER BY `id_pregunta` DESC;';
                    $query = $mysql_con->Consulta($sql);
                    if($mysql_con->NumFilas() == 0)
                    {
                        echo '<b>' .$lang['QUERY_ZERO']. '</b>';
                    }
                    else
                    {
                    ?>
                        <script type="text/javascript">
                            var n = new Array();
                            var s = new Array();
                            var ind = 0;
                        </script>
                        <?php
                        while($data = $mysql_con->VerDatos($query))
                        {
                        ?>
                            <script type="text/javascript">;                
                                n["<?PHP echo $data->sid_pregunta; ?>"] = "<?PHP echo str_replace("\r\n","\\n",$data->pregunta);?>";
                                s[ind] = "<?PHP echo $data->sid_pregunta; ?>";
                                ind++;
                            </script>
                        <?php 
                        }
                        ?>
                        <script type="text/javascript"><!--//--><![CDATA[//><!--
                        function show_select()
                        {
                            var i = 0;
                            var se = document.getElementById("select");
                            for(i = 0; i < s.length; i++)
                            {
                                var o = document.createElement("option");
                                var t = document.createTextNode(n[s[i]].substr(0,50)+"...");
                                        
                                o.setAttribute("onclick","(show_preg('"+s[i]+"'));");
                                o.appendChild(t);
                                se.appendChild(o);
                            }
                            show_preg(s[0]);
                        }
                        
                        function show_preg(id)
                        {
                            document.getElementById("preg_name").value = n[id];
                            document.getElementById("preg_s").value = id;
                        }               
                        //--><!]]></script>
                            
                        <form action="<?php echo $root_path. 'functions/ctrlmysql.' .$phpEx; ?>" method="get" onsubmit="return(true);">
                            <select id="select"><!--<option></option>--></select><br />
                            <textarea id="preg_name" name="new_question" rows="5" cols="50"></textarea>
                            <input type="hidden" name="preg_s" id="preg_s" value=""/><br />
                            <input type="hidden" name="table" value="<?php echo 'preguntes'; ?>" />
                            <input type="hidden" name="uri" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
                            <input type="submit" name="do" value="<?php echo $lang['UPDATE'] ?>"/>
                            <input type="submit" name="do" value="<?php echo $lang['DELETE'] ?>"/>
                        </form>
                        <?php
                    }
                    echo $mysql_con->VerError();
                    ?>
                </fieldset>
            </div>
 

[David]

No uses setAttribute para asignar funciones de captura de eventos. Mejor usa:

Código javascript:

o.onclick = function() {
    /* Código */
}
 

O, mejor:

Código javascript:

if (o.addEventListener) {
    o.addEventListener('click', function() { /* Código */ }, false);
} else {
    o.attachEvent('onclick', function() { /* Código */ });
}
 

[machoman112233]

No, ni caso... con Firefox si hago un alert me muestra undefined, y con los otros 2 nada...


Undefined para Firefox, por los otros nisiquiera muestran nada

Código javascript:

if (o.addEventListener) {
    o.addEventListener('click', function() { alert(s[i]) }, false);
} else {
    o.attachEvent('onclick', function() { alert(s[i]) });
}
 

Solo funciona Firefox...

Código javascript:

if (o.addEventListener) {
    o.addEventListener('click', function() { alert("asdasd") }, false);
} else {
    o.attachEvent('onclick', function() { alert("asdasd") });
}
 

[David]

¿Podrías poner el código completo pero de la salida HTML que te genera? Me refiero a que ejecutes la página y vayas a tu navegador en "Ver Código Fuente" y copias ese código.

Es que es más complicado leer y probar código mezclado con PHP.

[machoman112233]

Código javascript:

<!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" xml:lang="es" lang="es">
    <head>
        <title>Control de Administración</title>
        <link href="./../style/css/stylesheet.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            window.onload = function()
            {
                if(window.show_select){
                    show_select();
                }
                
                if(window.show_cat_quest){
                    show_cat_quest();
                }
            }
 
            function ajaxLoad()
            {
                var ajax = null;
 
                if(window.XMLHttpRequest)
                {
                    ajax = new XMLHttpRequest();
                }
                else if(window.ActiveXObject)
                {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else
                {
                    ajax = false;
                }
 
                return(ajax);
            }
        </script>
    </head>
    <body>
 
        <div id="container">
            <div id="menu">
                <div class="menuBar">
                    <a class="botonMenu" href="?see=main">Inicio</a>
                    <a class="botonMenu" href="?see=2">Encuesta</a>
                    <a class="botonMenu" href="?see=question">Preguntas</a>
                    <a class="botonMenu" href="?see=category">Categorias</a>
 
                    <a class="botonMenu" href="?see=correction">Correción</a>
                    <a class="botonMenu" href="?see=associate">Associación</a>
                </div>
            </div>
            
            <div class="limpiar"></div>
            
                        <div class="box">
                <fieldset>
                    <legend>Actualiza/Modifica la pregunta</legend>
 
                                            <script type="text/javascript">
                            var n = new Array();
                            var s = new Array();
                            var ind = 0;
                        </script>
                                                    <script type="text/javascript">;                
                                n["TMqRWdXC"] = "Te'n surts bé amb la llengua, és a dir, tens facilitat per expressar-te, comprens bé el que llegeixes, saps redactar amb una ortografia acceptable, etc? ";
                                s[ind] = "TMqRWdXC";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["1YzE0N2E1M"] = "Ets creatiu/iva, tens imaginació i inventiva per proposar idees originals, tens facilitat per improvisar solucions noves als problemes?";
                                s[ind] = "1YzE0N2E1M";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["xUSGnn3kd"] = "Entens amb facilitat la mecànica d´un aparell, saps ràpidament com funciona, pots arreglar amb facilitat els que s'espatllen?";
                                s[ind] = "xUSGnn3kd";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["ZWJiY2M1ZDRl"] = "Tens facilitat per alguna activitat artística? Per exemple: dibuix, pintura, escultura, dansa, teatre, fotografia, música, etc.";
                                s[ind] = "ZWJiY2M1ZDRl";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["wZDIyYzQ1YWY"] = "Consideres que tens una bona capacitat de raonament? És a dir: analitzes ordenadament els problemes abans de resoldre'ls, saps construir arguments sòlids per fonamentar les teves afirmacions, ets reflectiu i crítiquen els teus plantejaments, etc?";
                                s[ind] = "wZDIyYzQ1YWY";
                                ind++;
                            </script>
 
                                                    <script type="text/javascript">;                
                                n["MzQ0YjA0N2Yw"] = "Consideres que tens aptituds per ensenyar coses que saps als altres? És a dir: saps explicar les coses ordenadament, ets estructurat en les teves explicacions, ets clar en la teva expressió, saps transmetre l'interès per les coses que expliques?";
                                s[ind] = "MzQ0YjA0N2Yw";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["UwZDIwNWQ4YTg"] = "Te'n surts bé en les relacions humanes? És a dir: saps comprendre les persones i intentes ajudar-les amb els problemes, no et costa prendre contacte amb la gent?";
                                s[ind] = "UwZDIwNWQ4YTg";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["NDllMGQxZmM"] = "Tens facilitat per als números i el càlcul? Te'n surts bé amb les matemàtiques?";
                                s[ind] = "NDllMGQxZmM";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["IyYjFjOTZk"] = "Creus que tens capacitat d'organització (saps com organitzar-te bé) ets net i polit en els teus treballs? Saps classificar, distribuir, arxivar i localitzar informacions i documents?";
                                s[ind] = "IyYjFjOTZk";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["TU5MDY0YjM"] = "Saps intervenir en conflictes, discusions i enfrontaments amb capacitat de persuasió, i resoldre'ls?";
                                s[ind] = "TU5MDY0YjM";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["ZTQ5NDZiMmEz"] = "Tens capacitat de concentració, és a dir, et saps aïllar de les influències de l'entorn i atendre a allò que estàs fent sense distraccions?";
                                s[ind] = "ZTQ5NDZiMmEz";
                                ind++;
                            </script>
 
                                                    <script type="text/javascript">;                
                                n["YTA5ZWY3MjA"] = "Et trobes capacitat per suportar treballs de gran esforç fisic? Consideres que tens aptituds físiques?";
                                s[ind] = "YTA5ZWY3MjA";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["mE3NmIyNmM0M"] = "Saps calcular amb facilitat els volums i les distancies? Per exemple, et surt bé mesurar una superficie o un volum, calcules amb facilitat les distancies, no confons la dreta amb l'esquerra, saps girar un objecte perque encaixi en un forat, etc? ";
                                s[ind] = "mE3NmIyNmM0M";
                                ind++;
                            </script>
                                                    <script type="text/javascript">;                
                                n["ZWE0MTBmZTkw"] = "Consideres que tens aptituds manuals? Saps fer coses amb les teves mans, com per exemple: arreglar objectes, aprendre rapidament el funcionament d'aparells, etc?";
                                s[ind] = "ZWE0MTBmZTkw";
                                ind++;
                            </script>
                                                <script type="text/javascript"><!--//--><![CDATA[//><!--
                        function show_select()
                        {
                            var i = 0;
                            var se = document.getElementById("select");
                            for(i = 0; i < s.length; i++)
                            {
                                var o = document.createElement("option");
                                var t = document.createTextNode(n[s[i]].substr(0,50)+"...");
                                        
                                //o.setAttribute("onclick","(show_preg('"+s[i]+"'));");
                                //show_preg(s[i])
                                if (o.addEventListener)
                                {
                                    o.addEventListener('click', function() { show_preg(s[i]) }, false);
                                }
                                else 
                                {
                                    o.attachEvent('onclick', function() { show_preg(s[i]) });
                                }
                                
                                o.appendChild(t);
                                se.appendChild(o);
                            }
                            show_preg(s[0]);
                        }
                        
                        function show_preg(id)
                        {
                            document.getElementById("preg_name").value = n[id];
                            document.getElementById("preg_s").value = id;
                        }               
                        //--><!]]></script>
                            
                        <form action="./../functions/ctrlmysql.php" method="get" onsubmit="return(true);">
                            <select id="select"><!--<option></option>--></select><br />
                            <textarea id="preg_name" name="new_question" rows="5" cols="50"></textarea>
 
                            <input type="hidden" name="preg_s" id="preg_s" value=""/><br />
                            <input type="hidden" name="table" value="preguntes" />
                            <input type="hidden" name="uri" value="/enquesta/admcp/?see=question" />
                            <input type="submit" name="do" value="Actualizar"/>
                            <input type="submit" name="do" value="Borrar"/>
                        </form>
                                        </fieldset>
            </div>
            
            <div class="box">
 
                <fieldset>
                    <legend>Nueva pergunta</legend>
                    <form action="./../functions/ctrlmysql.php" method="get" onsubmit="return(true);">
                        <input type="text" id="new_quiestion" name="new_question" size="50" /><br />
                        <input type="hidden" name="uri" value="/enquesta/admcp/?see=question" />
                        <input type="hidden" name="table" value="preguntes" />
                        <input type="submit" name="do" value="Insertar"/> 
                    </form>
                </fieldset>
 
            </div>
            
            <div class="limpiar"></div>     </div>
    </body>
</html>
 

[David]

El evento onclick no se produce en los option en la mayoría de los navegadores.

Debes usar el evento onchange del select y a partir de allí definir las acciones a realizar.

[machoman112233]

ok... ya lo tengo mas o menos... ahora solo hace falta pulirlo y ya esta... Muchas gracias por la ayuda...

SALUDOS!!!!

Código javascript:

function show_select()
                        {
                            var i = 0;
                            var se = document.getElementById("select");
                            for(i = 0; i < s.length; i++)
                            {
                                var o = document.createElement("option");
                                var t = document.createTextNode(n[s[i]].substr(0,50)+"...");
                                        
                                //o.setAttribute("onclick","(show_preg('"+s[i]+"'));");
                                o.setAttribute("value",s[i]);
                                
                                o.appendChild(t);
                                se.appendChild(o);
                            }
                            //show_preg(s[0]);
                        }
                        
                        function find_id()
                        {
                            var sel = document.getElementById("select");
                            var opt = sel.getElementsByTagName("option");
                            var i = 0;
                            
                            for(i = 0; i < opt.length; i++)
                            {
                                if(opt[i].selected)
                                {
                                    return(opt[i].value);
                                }   
                            }
                        }
                        
                        function show_preg()
                        {
                            var id = find_id();
                            document.getElementById("preg_name").value = n[id];
                            document.getElementById("preg_s").value = id;
                        }       
 
//<select id="select" onchange="show_preg()"><!--<option></option>--></select>
 

[David]

Como sugerencia, no necesitas recorrer las opciones para ver cuál está seleccionada. Sólo necesitas usar objeto_select.value (en el caso se puede usar this que apunta al select):

Código javascript:

function show_preg(id) {
    /* Código */
}
 

Y al llamarlo en el onchange:

Código javascript:

show_preg(this.value);
 

[machoman112233]

No sabia que el <select> tiene el mismo valor que la opcion elegida... algo nuevo que se... Una cosa mas, si el select tiene el mismo valor que la option... con el metodo post o get (php), puede recoger este valor, no se si me explicado muy bien...

Código html:

<form action="" method="post">
<select id="select" name="select"><option value="zzz">yyy</option></select>
<input type="submit" value="yyy">
</form>
 

Código php:

echo $_POST["select"]; //deberia mostrar zzz, creo...
 

Gracias por la ayuda...

[Dude--]

Estoy creando un input mediante DOM que debe reemplazar al siguiente:

Código javascript:

<input id="pass" type="text" name="pass" class="tg" value="tu contraseña" size="10" onfocus="checkevent(event)" onblur="checkevent(event)" />
 

Código javascript:

var nuevotextbox = document.createElement("input");
                        nuevotextbox.value = "";
                                                nuevotextbox.className = "tg2";
                        nuevotextbox.type = "password";
                        nuevotextbox.name = "pass";
                        nuevotextbox.id = "pass";
 

Pero no se como añadir a sus atributos el onfocus="checkevent(event)" etc... he probado con:
nuevotextbox.onfocus = function() { checkevent(event) };
también con:
nuevotextbox.addEventListener('onfocus', function() { checkevent(event) }, false );
Y no funciona, no se que estoy haciendo mal, he pensado intentarlo con setAttributeNode pero no estoy seguro de si es correcto.

[machoman112233]

Si no me equivoco es focus en addEventListener

Código javascript:

nuevotextbox.addEventListener('focus', function() { checkevent(event) }, false );
 

[Dude--]

Iniciado por machoman112233

Si no me equivoco es focus en addEventListener

Código javascript:

nuevotextbox.addEventListener('focus', function() { checkevent(event) }, false );
 

Así tampoco funciona :S.

Con nuevotextbox.setAttribute("onfocus", "checkevent(event)"); funciona en todos menos en IE, ¿alguna idea de por qué y como solucionarlo?

[David]

Así debería funcionar:

Código javascript:

if (nuevotextbox.addEventListener) {
    nuevotextbox.addEventListener('focus', function(evt) { checkevent(evt) }, false);
} else {
    nuevotextbox.attachEvent('onfocus', function(evt) { checkevent(evt) });
}
 

[Dude--]

Pues a mi no me funciona, te adjunto el código:

Código javascript:

<script type="text/javascript">
            function checkevent(e)
            {
                var obj=e.srcElement || e.target;
                var objeto = document.getElementById(obj.name);
                var evento = e.type;
                
                if ( obj.name == "email" )
                {
                    if(evento == "focus" && objeto.value == "tu email")
                    { objeto.value = ""; }
                    if(evento == "blur" && objeto.value == "" )
                    { objeto.value = "tu email"; }
                }
                
                if ( obj.name == "pass" )
                {
                    var formulario = document.getElementById("identificacion");
                    if(evento == "focus" && objeto.value == "tu contraseña")
                    { 
                        var nuevotextbox = document.createElement("input");
                        nuevotextbox.setAttribute("id", "pass");
                        nuevotextbox.setAttribute("name", "pass");
                        nuevotextbox.setAttribute("type", "password");
                        nuevotextbox.setAttribute("value", "");
                        
                        if (nuevotextbox.addEventListener) 
                        {nuevotextbox.addEventListener('focus', function(event) { checkevent(event) }, false);} 
                        else 
                        {nuevotextbox.attachEvent('onfocus', function(event) { checkevent(event) });}
                        
                        formulario.replaceChild(nuevotextbox, objeto);
                        setTimeout(function(){ nuevotextbox.focus()}, 100); 
                    }
                    if(evento == "blur" && objeto.value == "")
                    { 
                        var nuevotextbox = document.createElement("input");
                        nuevotextbox.setAttribute("id", "pass");
                        nuevotextbox.setAttribute("name", "pass");
                        nuevotextbox.setAttribute("type", "text");
                        nuevotextbox.setAttribute("value", "tu contraseña");
                        
                        if (nuevotextbox.addEventListener) 
                        {nuevotextbox.addEventListener('blur', function(event) { checkevent(event) }, false);} 
                        else 
                        {nuevotextbox.attachEvent('onblur', function(event) { checkevent(event) });}
                        
                        formulario.replaceChild(nuevotextbox, objeto);
                    }
                }
        
            }
        </script>
 

Código html:

<form id="identificacion" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
    <input id="email" type="text" name="email" title="Email de usuario" value="tu email" size="20" onfocus="checkevent(event)" onblur="checkevent(event)" />
    <input id="pass" type="text" name="pass" value="tu contraseña" size="10" onfocus="checkevent(event)" onblur="checkevent(event)" />
    <label><input  type="checkbox" name="autologin" />Guardar</label>
    <input type="submit" value="Ok" /> 
</form>
 

[David]

Cambia esto:

Código javascript:

formulario.replaceChild(nuevotextbox, objeto);
 

Por:

Código javascript:

objeto.parentNode.replaceChild(nuevotextbox, objeto);
 

Sin contar que para lograr el efecto que deseas donde asignas blur deberías asignar focus y donde asignas focus deberías asignar blur.

[Dude--]

Vale ahora si funciona ¿podrías explicarme el porque de cambiar:

Código javascript:

formulario.replaceChild(nuevotextbox, objeto);
 

por:

Código javascript:

objeto.parentNode.replaceChild(nuevotextbox, objeto);
 

? gracias.

[David]

Es que por alguna razón extraña Internet Explorer considera como nodo padre al body y no al form.

[Dude--]

Iniciado por David el Grande

Es que por alguna razón extraña Internet Explorer considera como nodo padre al body y no al form.

¿Qué versión de IE? lo digo porque con el 7 funciona si uso:

Código javascript:

formulario.replaceChild(nuevotextbox, objeto);
 

Si antes no iba era porque tenía los eventos invertidos como tu bien indicaste.