Ajax Problem

[Pain]

Hello. I am trying to build a website with many ajax features.

 

To make the web look more like an app, I am retrieving information with ajax. So i have this code where i can retrieve two different pages with two clicks, but when i retrieve one, and another one on top - i want the first to disappear. However both pages are being loaded. Is there any jQuery method that could effectively hide the first loaded page.

 

These are two functions that can load pages.

// first function to load military.php
function loadMilitary()
{
var xmlhttp2;
if (window.XMLHttpRequest)
{
xmlhttp2 = new XMLHttpRequest;
}

xmlhttp2.onreadystatechange = function()
{
if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200)
{
document.getElementById("military_tab").innerHTML=xmlhttp2.responseText;
}
}
xmlhttp2.open("GET","military.php",true);
xmlhttp2.send();
}


// second function to load hospital.php
function loadHospital()
{
var xmlhttp2;
if (window.XMLHttpRequest)
{
xmlhttp2 = new XMLHttpRequest;
}

xmlhttp2.onreadystatechange = function()
{
if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200)
{
document.getElementById("hospital_tab").innerHTML=xmlhttp2.responseText;
}
}
xmlhttp2.open("GET","hospital.php",true);
xmlhttp2.send();
}

 

And i load them by using the onclick method

<div class="hospital_tab" onclick="loadHospital()"></div>
<div class="military_tab" onclick="loadMilitary()"></div>

 

I really need help with this guys, thanks for any hint! Hope you understood what i want.

Edited November 22, 2012 by Pain

[bogan_az]

I would just use the same div to load the two pages into? and that way you could also use the same function.

Edited November 26, 2012 by bogan_az