Problemas evento onmouseover en Opción de Select.

agcforos · #1 (**permalink**) 02/11/2011, 04:30

Hola a todos.
Me estoy encontrando con un problema al disparar el evento onmouseover cada vez que entra en una opción de un Select.
Me explico, o lo intento:
Tengo una Select con una serie de opciones y pretendo que cuando entro en cualquiera de estas opciones acceda al servidor y me devuelva una información que presento en pantalla. Esta información irá cambiando según voy posicionándome en una u otra opción, llamando a una función javascript que irá accediendo al servidor por medio de JQuery/Ajax, y a esta función se la llamará con un parámetro que es un indice del valor seleccionado. He comprobado que la select esta bien construida, con su valor correcto (el indice que comento anteriormente), pero el problema me está dando porque el valor que está enviándo siempre es de la anterior opción seleccionada, es decir, que siempre me está presentando los datos de la anterior select por la que he entrado.
Adjunto los scripts por si alguién me puede aclarar el porqué de este funcionamiento:

Este es el script inicial que realiza todo el proceso.

Código PHP:

Ver original<?php
  include ('aprendetu_sc_fns.php');
 
  @session_start();
  
  ?>
        <script src="jquery-1.6.4.min.js"></script>
        <LINK rel="stylesheet" type="text/css" href="cuerpo.css">
     
  <?php
  
  $usuario = $_SESSION['usuario'];
  $nivelUsuario = $_SESSION['nivelUsuario'];
  
  do_html_header("Bienvenido a Aprendetu Online");
  
  ?>
  
<script type="text/javascript">
      
    function showAsignaturas(str){
        var xmlhttp;
        if (str==""){
            document.getElementById("priSelect").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest){
            xmlhttp = XMLHttpRequest();
        } else {
            xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("priSelect").innerHTML=xmlhttp.responseText;
            }          
        }
        xmlhttp.open("GET", "servAsignaturas.php?as="+str, true);
        xmlhttp.send();
        showTemas(" ");
    }
    
    function showTemas(str1){
        var xmlhttp1;
        if (str1==""){
            document.getElementById("segSelect").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest){
            xmlhttp1 = XMLHttpRequest();
        } else {
            xmlhttp1 = ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp1.onreadystatechange=function(){
            if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
                document.getElementById("segSelect").innerHTML=xmlhttp1.responseText;
            }          
        }
        xmlhttp1.open("GET", "servTemas.php?tem="+str1, true);
        xmlhttp1.send();
    }
   
    function informaPreguntas(str2){
        $(document).ready(function(){
            $("#preguntasTema").load("servPreguntas.php?tem="+str2);
        })
    }
    
    /*function salimosFuera(str2){
        $(document).ready(function(){
            $("#preguntasTema").css({
                display: none
            });   
        })
    }*/
</script>
  
</head>
 
<body>
 
    <!--<div id="contenidoCursos" align="left"></div>-->
    
    <table>
    <tr><td height="15px"></td></tr>
    <tr>
        <th width="250px" align="left">Cursos</th>
        <th width="250px" align="left">Asignaturas</th>
        <th width="250px" align="left">Temas</th>
    </tr>
    <tr>
    <td>
    <div id="sel">
        <select name="listaCursos" onchange="showAsignaturas(this.value)">
            <?php include "servCursos.php" ?>      
        </select>
    </div>
    </td>
    <td>
    <div id="priSelect">
        <select name="listaAsignaturas" onchange="showTemas(this.value)">
            <option>Selecciona una asignatura</option>
        </select>
    </div>
    </td>
    <td>
    <div id="segSelect">
        <select name="2" onmouseover="informaPreguntas(this.value)">
            <option>Selecciona un tema</option>
        </select>  
    </div>
    </td>
    <td><div style="width: 200px; background-color: #ff8800; padding-left: 10px;" id="preguntasTema"></div></td>
    <td>
        <div id="boton">
            <input type="button" value="Aceptar" />
        </div>
    </td>
    </tr>
    </table>
 
</body>
</html>

Y esta es la select que carga los distintos temas que quiero presentar:

Código PHP:

Ver original<?php
    include ('aprendetu_sc_fns.php');
    echo '<select name="temas" onmouseover="informaPreguntas(this.value)">';
    $conn = db_connect();
    $query = "select * from temas";
    $result = @mysql_query($query);
    echo "<option>Selecciona un tema</option>";
    while($fila = mysql_fetch_array($result)){
        if ($fila['idasignatura'] == $_GET['tem']){
            echo "<option value='".$fila['idtema']."'>".$fila['desctema']."</option>";
        }
    }
    mysql_close($conn);
    echo '</select>';
?>

Muchas gracias anticipadas y saludos.

agcforos · #2 (**permalink**) 02/11/2011, 05:42

Hola de nuevo.
Existen otras posibilidades de poder realizar esto. Una es con el evento onclick, aunque el funcionamientos no sería exactamente el mismo, y otro con el evento onmousemove que si se prodría llegar al mismo funcionamiento.
Aunque este último evento se lanzaría siempre que movamos el ratón por encima del elemento que queramos controlar, existe la posibilidad de comprobar si nuestro value ha cambiado con la finalidad de que no esté realizando accesos al servidor continuamente para mismos resultados.

Código Javascript:

Ver originalfunction informaPreguntas(str2){
        if (str2Anterior != str2){
            $(document).ready(function(){
                $("#preguntasTema").load("servPreguntas.php?tem="+str2);
                str2Anterior = str2;
            })
        }
    }

Pero lo que no entiendo es porqué no funciona el evento onmouseover.
Saludos.