Question

In my “index.php” page, I take sth from user and give response in a div using “ajax.php”. ajax page returns an ordered list divided into divs called pages. After ajax loaded, I need to execute a function which sets some css properties of the pages. The function is ready and works properly when I attached it to a button’s onClick event. But I want execute it automatically after the ajax page loaded. I tried:

1. onload events also in index.php and ajax.php at the top of the page and also at the bottom of the page–> it doesn’t work
2. function in function showAjax(){…setCSS();}–> I failed to run it after the whole ajax page loaded
3. callback function–> it doesn’t work properly
4. onClick event like that onClick=”showAjax(); setCSS();”–> it doesn’t work

I don’t use jQuery. I examined similar problems solving methods but they don’t work. I appreciate anyone saves me from this trouble. Thanks

Code Added:

var xmlHttp;

function loadXMLDoc(url,cfunc) {
    if (window.XMLHttpRequest) {
        xmlHttp=new XMLHttpRequest();
    } 
    else {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlHttp.onreadystatechange=cfunc; 
    xmlHttp.open("GET",url,true); 
    xmlHttp.send();
}

function showAjax(x) { 
    loadXMLDoc("ajax.php?obj="+x,function() {
       if (xmlHttp.readyState==4 && xmlHttp.status==200) {
          document.getElementById("sonuclar").innerHTML=xmlHttp.responseText;
       }
    });
}

Answer 1

I solved the problem. “if (xmlHttp.readyState==4 && xmlHttp.status==200)” this statement is already controlling if the ajax loaded completely. So I add my setCSS function into showAjax function as callback

`function showAjax(x, func) {

loadXMLDoc("ajax.php?obj="+x,function() {

   if (xmlHttp.readyState==4 && xmlHttp.status==200) {

      document.getElementById("sonuclar").innerHTML=xmlHttp.responseText;

      func();

   }

});

}

onclick=showAjax(this.value, setCSS);’