Cargar datos cada vez que se carga una section

dglypho · #1 (**permalink**) 09/02/2015, 12:06

Hola a todos tengo el siguiente problema. Tengo el siguiente código HTML:

Código HTML:

Ver original<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="../css/estilo.css">
        <script src="../js/ajax.js" type="text/javascript"></script>
    </head>
    <body onload="cargarDatos()">
        <header>
            Gestion de Cursos
            <img src="../imagenes/logo-ies.jpg"/>
        </header>
        <aside>
            <button onclick="irSeccion(1)">Turno de Mañana</button><br>
            <button onclick="irSeccion(2)">Turno de Tarde</button><br>
        </aside>
        <article id="principal">
            <p id="bienvenida">Bienvenido a la aplicacion.</p>
            <section id="t_manana">
                Grupo:
                <div id="grupo"></div><br>
                Alumno: 
                <div id="alumno"></div><br>
                Profesor: 
                <div id="profesor"></div>
                Asignaturas:
                <div id="asignaturas"></div>
            </section>
            <section id="t_tarde">
                Grupo:
                <div id="grupo"></div><br>
                Alumno: 
                <div id="alumno"></div><br>
                Profesor: 
                <div id="profesor"></div>
                Asignaturas:
                <div id="asignaturas"></div>
            </section>
        </article>
    </body>
</html>

Lo he intentado estructurar con la estructura que utiliza HTML5 y por eso esta dividido en header, aside, article, section...

El código JavaScript que utilizo para navegar por la página y recargar los datos de la misma es el siguiente:

Código Javascript:

Ver originalfunction irSeccion(seccion){
    switch (seccion){
        case 1:
            var t_manana=document.getElementById("t_manana");
            t_manana.style.display='block';
            t_manana.addEventListener('load',cargarDatos(),true);
            document.getElementById("bienvenida").style.display='none';
            document.getElementById("t_tarde").style.display='none';
            break;
        case 2:
            var t_tarde=document.getElementById("t_tarde");
            t_tarde.style.display='block';
            t_tarde.addEventListener('load',cargarDatos(),true);
            document.getElementById("bienvenida").style.display='none';
            document.getElementById("t_manana").style.display='none';
            break;
    }
}
 
var oAjax;
var jsonObject;
function AJAXCrearObjeto(){
    if (window.XMLHttpRequest) {
        objetoAjax=new XMLHttpRequest();
    }
    else{
        objetoAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objetoAjax;
}
 
function cargarDatos(){
    oAjax=new AJAXCrearObjeto();
    oAjax.open('GET','../php/cargarGrupo.php',true);
    oAjax.send();
    oAjax.onreadystatechange=respuestaCargaGrupo;
}
 
function respuestaCargaGrupo(){
    if(oAjax.readyState==4 && oAjax.status==200){
        alert("responseText:"+oAjax.responseText);
        var miArray=oAjax.responseText;
        mostrarGrupo(miArray);
        oAjax.open('GET','../php/cargarProfesor.php',true);
        oAjax.send();
        oAjax.onreadystatechange=respuestaCargaProfesor;
    }
}
 
function cargarAlumno(){
    var grupo=document.getElementById("listaGrupos").value;
    alert(grupo);
    oAjax.open('GET','../php/cargarAlumnos.php?GRUPO='+grupo,true);
    oAjax.send();
    oAjax.onreadystatechange=respuestaCargaAlumno;
}
 
function respuestaCargaProfesor(){
    if(oAjax.readyState==4 && oAjax.status==200){
        alert("responseText:"+oAjax.responseText);
        var miArray=oAjax.responseText;
        mostrarProfesores(miArray);
        oAjax.open('GET','../php/cargarAsignaturas.php',true);
        oAjax.send();
        oAjax.onreadystatechange=respuestaCargaAsignaturas;
    }
}
 
function respuestaCargaAsignaturas(){
    if(oAjax.readyState==4 && oAjax.status==200){
        alert("responseText:"+oAjax.responseText);
        var miArray=oAjax.responseText;
        mostrarAsignaturas(miArray);
        oAjax.open('GET','../php/cargarCausas.php',true);
        oAjax.send();
        oAjax.onreadystatechange=respuestaCargaCausas;
    }
}
 
function mostrarGrupo(miArray){
    var array_datos=JSON.parse(miArray);
    var grupo=document.getElementById("grupo");
    var inputGrupo=document.createElement("input");
    inputGrupo.setAttribute("list","listaGrupos");
    var datalist=document.createElement("datalist");
    datalist.setAttribute("id","listaGrupos");
    for(var i in array_datos){
        var opcion=document.createElement("option");
        opcion.innerHTML=array_datos[i].COD_GRUPO;
        opcion.setAttribute("value",array_datos[i].COD_GRUPO);
        datalist.appendChild(opcion);
    }
    inputGrupo.addEventListener('change',cargarAlumno,true);
    inputGrupo.appendChild(datalist);
    grupo.appendChild(inputGrupo);
}
 
function mostrarProfesores(miArray){
    var array_datos=JSON.parse(miArray);
    var profesor=document.getElementById("profesor");
    var inputProfesor=document.createElement("input");
    inputProfesor.setAttribute("list","listaProfesores");
    var datalist=document.createElement("datalist");
    datalist.setAttribute("id","listaProfesores");
    for(var i in array_datos){
        var opcion=document.createElement("option");
        opcion.innerHTML=array_datos[i].NOM_PROF;
        opcion.setAttribute("value",array_datos[i].NOM_PROF);
        datalist.appendChild(opcion);
    }
    inputProfesor.appendChild(datalist);
    profesor.appendChild(inputProfesor);
}
 
function mostrarAlumnos(miArray){
    var array_datos=JSON.parse(miArray);
    var alumno=document.getElementById("alumno");
    var inputAlumno=document.createElement("input");
    inputAlumno.setAttribute("list","listaAlumnos");
    var datalist=document.createElement("datalist");
    datalist.setAttribute("id","listaAlumnos");
    for(var i in array_datos){
        var opcion=document.createElement("option");
        opcion.innerHTML=array_datos[i].NOM_ALUM;
        opcion.setAttribute("value",array_datos[i].NOM_ALUM);
        datalist.appendChild(opcion);
    }
    inputAlumno.appendChild(datalist);
    alumno.appendChild(inputAlumno);
}
 
function mostrarAsignaturas(miArray){
    var array_datos=JSON.parse(miArray);
    var asignatura=document.getElementById("asignaturas");
    var inputAsignatura=document.createElement("input");
    inputAsignatura.setAttribute("list","listaAsignaturas");
    var datalist=document.createElement("datalist");
    datalist.setAttribute("id","listaAsignaturas");
    for(var i in array_datos){
        var opcion=document.createElement("option");
        opcion.innerHTML=array_datos[i].NOM_ASIG;
        opcion.setAttribute("value",array_datos[i].NOM_ASIG);
        datalist.appendChild(opcion);
    }
    inputAsignatura.appendChild(datalist);
    asignatura.appendChild(inputAsignatura);
}

En un principio los dos section(t_manana y t_tarde) están ocultos con el css y cuando llamo a la funcion irSeccion() los muestra en funcion del botón que haya pulsado. Tambien al cargar estas secciones quiero que se ejecute la funcion cargarDatos() pero solo se ejecuta al cargar el primer section. Eso creo que es por que los id dentro de los section. Si es por eso es muy facil la solución cambiar el valor del id. Si no nose porque no me funciona y os pediria ayuda por favor.

Se que no me se explicar muy bien pero si teneis alguna duda de lo que necesito no dudeis de preguntar.

Muchas Gracias.