Cargar datos con AJAX y HTML dinamico

[Raditz99]

Buenas a todos...

Tengo un archivo index.html" en el cual cargo contenido HTML dinamicamente con esta funcion Javascript:

//Codigo Javascript
function cargarSubmodulo(id,desde)
{
$("#modules").load(desde);
document.getElementById("modules").style.display=" block";

if (id==1)
initSubModulo1();
if (id==2)
initSubModulo2();
if (id==3)
initSubModulo3();
}

"#modules" es el "<div>" en el cual quiero cargar contenido HTML dinamicamente.
"desde" es la ruta del archivo HTML que quiero cargar dinamicamente.
"id" es un identificador que me permite distinguir que contenido cargar.

Es decir, si "id"=1 se ejecutara la funcion "initSubModulo1()", la cual hace esto:

function initSubModulo1()
{
var xmlhttp;

if (window.XMLHttpRequest)
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();

else
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var opt = document.createElement("option");
opt.value = xmlhttp.responseText;
opt.text = xmlhttp.responseText;
document.getElementById("selcategoria").add(opt);
}
}

xmlhttp.open("POST",".lib/modulo4/linkModulo4.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("initSubModulo1=1");
}


Basicamente lo que hace esta funcion es cargar en un "input select" llamado "selcategoria" algunos valores extraidos de la Base de Datos con "linkModulo4.php".

El problema radica en que a veces carga y en otras no carga nada... Es necesario hacer doble click para que recien cargue todo bien... Por que a veces funciona bien y a veces no?

Mil gracias!!!

[sustentio]

por el caché, tienes 2 opciones:

un parametro fantasma con un numero aleatorio en javascript

forzar el NOCACHE del lado del server con headers en php

[alvaro_trewhela]

1. La caché solo sucede con el método get.
2. Puede ser que la conexión entre el cliente y el servidor tenga problemas.
3. Puedes usar highlight y ordenar código porfavor.

Recomendacion:

Crear una función para declarar una instancia AJAX, es decir:

Código Javascript:

function createHTTPReq() {
    try {
    req = new XMLHttpRequest();
    }
    catch(err1){
        try {
        req = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (err3) {
            req = false;
            }
        }
    }
return req;
}
    
http = new createHTTPReq();
 

Ahora tienes el objeto http con métodos y atributos de AJAX. de aquí en adelante todo depende del programador. personalmente yo uso este método que es bien ordenado:

Código Javascript:

function requestPOST(){
http.open("POST", "direccion de peticion", true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.onreadystatechange =tufuncion;
http.send("variables codificadas");
}
 
function tufuncion(){
    if(http.readyState == 4){
        if(http.status == 200){
        var response = http.responseXML; //o http.responseText
        //acá hacer algo...
        }
    }
}
 

Claro está que la función requestPOST es cual será gatillada por js

Este método uso yo, pero te repito luego de declarar el objeto xmlhttprequest todo depende del programador...