No me trae valores de tabla con ajax

mtr_1101 · #1 (**permalink**) 19/07/2015, 16:44

Hola muy buenas noches, tengo cierta duda no se que estoy haciendo mal. Soy nuevo utilizando ajax tengo este pequeño problema. tengo una tabla llamada asignaturas y otra cursos.. en donde tengo el campo id_curso en la tabla asignatura.. existe relación en ambas tablas ya que con ella se que asignaturas perteneces a un curso.... quiero traer las asignaturas pertenecientes a un curso.. pero no me trae ningun valor del combo! este es mi codigo trabajo con MVC.

Código PHP:

 
<html> 
<head> 
<title> ASIGNACION DE PROFESORES </title> 
<link rel="stylesheet" type="text/css" href="css/formulariocss-registros.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="script/asignaturas-secciones.js"></script> 
</head> 
<body> 
<h2>  ASIGNACIÓN DE PROFESORES </h2> 
<form name="asignacion-profesores" method="POST" action="controlador.php?opc=20"> 
<table border="1"> 
    <tr> 
        <td colspan="4"> &nbsp; <b>ASIGNACION DE PROFESORES</b> <br /><hr></td> 
    </tr> 
    <tr> 
        <td align="center"> <b>NOMBRE</b></td> 
        <td align="center"> <b>AÑO</b></td> 
        <td align="center"> <b>ASIGNATURA</b></td> 
        <td align="center"> <b>SECCIÓN</b> </td> 
    </tr> 
    <tr> 
        <td class="td-campos" style="width: 210px;">  
        <select style="width: 200px;">  
        <option value="0"> Seleccione </option> 
    <?php  
     
    for($i=0; $i<count($id); $i++){ 
    $sql="SELECT * FROM profesores WHERE id=".$id[$i]; 
     
    // echo $sql; 
     
    $r = $db->consultas($sql); 
    $datos=mysql_fetch_object($r); 
     
    ?>  
        <option value="<?php $datos->id; ?>"> <?php echo $datos->apellido; ?> </option> 
    <?php 
    }  
    ?>  
        </select><br /><br /> 
        </td> 
        <td class="td-campos" style="width: 200px;"> 
            <select name="curso" style="width: 120px;" onchange="getCurso(this.value);"> 
            <option value="" selected=""> Seleccione </option> 
    <?php 
    $sql2="SELECT * FROM cursos"; 
    $r2 = $db->consultas($sql2); 
     
    while($datos2=mysql_fetch_object($r2)){     
    ?> 
            <option value="<?php $datos2->id; ?>"> <?php echo $datos2->curso.' '.'Año'; ?></option> 
    <?php 
    } 
    ?> 
            </select><br /><br /> 
        </td> 
        <td class="td-campos" style="width: 200px;"> 
        <div style="display: inline-table;" id="div_combo2"> 
                    <select style="width: 180px;" disabled> 
                    <option selected="" value="" disabled> Seleccione </option> 
                    </select> 
            </div><br /><br /> 
        </td> 
    </tr> 
    <tr> 
        <td align="right" colspan="4"><br /> <button type="submit"> Guardar </button> Agregar <input type="text" name="fila" value="1" size="5"/> Fila(s) <button> Continuar </button> <br /> <br /></td> 
    </tr> 
    <input type="button" value="Actualizar Página" onclick="window.location.reload()" /> 
</table> 
</form> 
</body> 
</html> 
    <?php 
         
    } else { 
        echo "<script language='javascript'> 
            alert ('No selecciono ningun profesor'); 
            window.location='vista.php?opc=16' 
            </script>"; 
    }

y este es el archivo js

Código Javascript:

Ver original//FUNCION AJAX PARA LLAMAR LOS DATOS DEL SEGUNDO COMBO
    function getCurso(id_combo1){ //variable que espera la funcion
      var xmlhttp;
 
      if (window.XMLHttpRequest){// codigo for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }else{// codigo for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      //funcion que se llama cada vez que cambia la propiedad readyState
      xmlhttp.onreadystatechange=function(){
        //readyState 4: peticion finalizada y respuesta lista
        //status 200: OK
        if (xmlhttp.readyState===4 && xmlhttp.status===200){
          //Pasar la respuesta html a div_combo2
          document.getElementById("div_combo2").innerHTML=xmlhttp.responseText;
        }
      };
 
      /* open(metodo, url, asincronico)
       * metodo: post o get
       * url: localizacion del archivo en el servidor
       * asincronico: comunicacion asincronica true o false.
      */
      xmlhttp.open("POST","vista.php?opc=33",true);
 
      //establece el header para la respuesta
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 
      //enviamos las variables al archivo get_combo2.php
      xmlhttp.send("id_combo1=" + id_combo1);     
    }

Este deveria traerme los datos

Código PHP:

 
       case 33: 
          
    $id_periodo=$_SESSION['idperiodo']; 
    $id_combo1=$_POST["id_combo1"]; 
 
    ?> 
<select style="width: 180px;" name="curso"> 
    <option value=""> Seleccione </option> 
    <?php  
 
    $sql="SELECT * FROM asignaturas WHERE id_curso = $id_combo1 AND id_periodo = $id_periodo"; 
 
    $resultado = $db->consultas($sql); 
    while($datos=mysql_fetch_object($resultado)) { 
     
     ?>                
    <option value="<?php echo $datos->id; ?>"><?php echo  $datos->asignatura; } ?></option> 
</select>  
    <?php    
    break; 
}// FIN DEL SWITCH

Jorge35 · #2 (**permalink**) 19/07/2015, 16:57

no envies this.value y usa:

var e = document.getElementById("ID-DEL-SELECT");
var elValor = e.options[e.selectedIndex].value;

es posible que no este llegando el valor correctamente.

Alexis88 · #3 (**permalink**) 19/07/2015, 19:18

En realidad, Jorge35, la manera más adecuada de enviar el valor seleccionado en un <select> con JavaScript en línea es como mtr_1101 lo está haciendo.

Fíjate en la consola del navegador si se está generando algún mensaje de error. Pulsa la tecla F12 y, en el panel que se desplegará, selecciona "Console" o "Consola", según como se muestre en tu navegador.

Por cierto, no tiene sentido que intentes enviar un dato a través de la URL (opc=33) si mediante el método .send() realizas el envío de los datos, de hecho, al enviarlos y recibirlos mediante POST, solo llega el valor consignado para id_combo1.

En el método .send(), arma la cadena de consulta con ambos valores para que puedas enviarlos:

Código Javascript:

Ver originalxmlhttp.send("id_combo1=" + id_combo1 + "&opc=33");

Saludos