jQuery Fadein Page on Anchor Click Problem

I'm having a problem with loading external pages into a DIV using jQuery.

I want to include an external page into a specific DIV when an anchor link is clicked.

The problem is when I click a link, and after the external page has loaded it removed the rest of the page's content after it :/

<script type="text/javascript">
function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) {
    if (req.status == 200) {
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}
开发者_Go百科
function load(name, div) {
    ahah(name,div);
    return false;
}

</script>

<div id="content"></div>


<a href="file1.html" onclick="load('page.php','content');return false;">File 1</a>

Can anyone help, Thanks!

A guess could be that page.php returns a full html document, including </body> and </html> tags, thus making your browser not render any of the original page content after these tags.

I don't see any jQuery being used here, but if you wouldn't mind replacing what you have with jQuery, you could do something like this:

$(function() {
    $("#someanchorid").click(function() {
        $("#yourdiv").load("file1.html");
        return false;
    });
});