Html – Load external page into DIV

htmljqueryjquery-load

This code works fine in IE, but not in Chrome.
Can some one point me in the right direction to get it working in most current browsers.

When you click the link, it should load the page into the div.
The codes was copied from :
webdeveloper.com

<script>
function processAjax(url) {
      if (window.XMLHttpRequest) { // Non-IE browsers
      req = new XMLHttpRequest();
      req.onreadystatechange = targetDiv;
      try {
        req.open("GET", url, true);
      } catch (e) {
        alert(e);
      }
      req.send(null);
    } else if (window.ActiveXObject) { // IE
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req) {
        req.onreadystatechange = targetDiv;
        req.open("GET", url, true);
        req.send();

      }
    }
}

function targetDiv() {
    if (req.readyState == 4) { // Complete
          if (req.status == 200) { // OK response
              document.getElementById("MyDivName").innerHTML = req.responseText;
          } else {
            alert("Problem: " + req.statusText);
          }
    }
}  
</script>


<a href="javascript:processAjax('test.html');">CLICK ME</a>
<div id="myDivName"></div>

Thanks 🙂

Best Answer

In jQuery you can just do like this:

$("#myDivName").load("test.html", function(response, status, xhr) {
   if (status == "error") {
      var msg = "Sorry but there was an error: ";
      alert(msg + xhr.status + " " + xhr.statusText);
   }
 });

Take a look at: jQuery API load() function

Related Topic