Question

I have a simple script that i am testing with, but its acting very odd. I call a script which loads and i have it to a particular td id, I then call a second script and add that to different td id but for some reason it wipes out the first div’s content even though they are seperate.

This is what i have:

function call_back(result,div_id,func){
        document.getElementById(div_id).innerHTML = result;
        if(typeof(func) != 'undefined'){func();}
}


function caller(url,cfunc)
{
        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=cfunc;
                xmlhttp.open("GET",url,true);
                xmlhttp.send();
}


function call_file(url,div_id,func){
    caller(url,function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            call_back(xmlhttp.responseText,div_id,func);
        }
    });
}

I then have this on my onload:

 window.onload = function(){
    stage = 6;      
call_file('test.html','menu_left');

    switch(parseInt(stage)){
    case 6: call_file('test2.html','main'); break;
   }
};

The problem arises with the case statement. If i remove the case statement the contents added with test.html loads fine, but if i add the case statement, content from test.html disappears and then only test2.html displays.

The html for the id’s are:

            <table class="body_wrapper">
                <tr>
                    <td class="menu_left" id="menu_left"></td>
                    <td class="main" id="main"></td>
                </tr>   
            </table>

Why might this be happening?

Answer 1

The problem has nothing to do with the switch statement. As you are calling the ajax request for some local files and it is already cached, the call_back function is called twice before document.getElementById(div_id).innerHTML = result; executes and hence replaced by the variable values from the last call. If you just put an alert into the call_back function like below

function call_back(result, div_id, func) {
  alert(result);
  document.getElementById(div_id).innerHTML = result;
  if (typeof (func) != 'undefined') { func(); }
}

you will find it is working. But as it is not a solution, alternatively if you modify this

xmlhttp.open("GET", url, true);

to

xmlhttp.open("GET", url, false);

it will work but you will loose the asynchronous feature of AJAX.