Member Avatar for leroi green

hey all,

i found a way to click a link and load it into a div. the only problem is that i keep getting the "AHA error" from the if statement in my div.

i'm not sure if it is me or the coding but i'll post what i'm using in jscript here:

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) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}

and this is what i'm using on the html side

<area shape="rect" coords="255,519,399,558" href="history.html" onclick="load('history.html','leftmain');return false;">

Please let me know where i'm going wrong. i don't think it's because i'm using an image map (i know... ol' skoolin it) but i'm not sure where to go for help.

thanx in advance.

  • 3 Contributors
  • 3 Replies
  • 664 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by memaddy
Member Avatar for essential

Here's a simple demo to help you get, things done.
This is tested in ie5+, ff3+ and Op8+.
Here's the code for the main page:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal-style"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=EmulateIE7; IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>AJAX Demo</title>
<style id="internal-style" type="text/css">
/* <![CDATA[ */
div > div {
    background-color: #eee;
    border: 1px solid #aaa;
    color: #009;
    font: 700 120%/105% Tahoma, Verdana, Helvetica, Arial, Sans-Serif;
    margin: 1em auto;
    padding: 1em;
    text-align: center;
    width: auto; }

/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */

var htmlData, main, ua, ie, x, div, elem;

function updateDiv() {

div = ( document.all ) ? document.all.myDiv : document.getElementById("myDiv");
main = htmlData.responseXML.documentElement.getElementsByTagName("body")[0];
elem = main.getElementsByTagName("div");
   if ( htmlData.readyState !== 4 ) return;
   if ( htmlData.status !== 200 ) {
      alert("Unable to parse data!\nPlease ensure that the file has a valid path.");
  }
   for ( x = 0; x < elem.length; x++ ) {
      try {
          div.innerHTML += elem[x].outerHTML; 
      }
      catch( e ) {
         alert("Unable to load request!");
      }
   }
}



function loadHTMLdata( url ) {
htmlData = null;
ie = navigator.userAgent.toLowerCase().indexOf("msie");
   if ( window.XMLHttpRequest ) {
  htmlData = new XMLHttpRequest(); 
   }  
 else if (( ie !== -1 ) && (/MSIE[\s\/](\d+\.\d+)/.test( navigator.userAgent))) {
   try {
      ver = new Number( RegExp.$1 );

/* 
   if IE is detected and the IE version is 5 -
   the request object will be set to ("Microsoft.XMLHTTP")
   else will be set to the lastest object released for IE6+ the ("Msxml2.XMLHTTP").
*/ 
      htmlData = ( ver < 6 ) ? new ActiveXObject("Microsoft.XMLHTTP") : new ActiveXObject("Msxml2.XMLHTTP");
      } 
    catch( e ) {
/* If failed to detect IE or claims as undefined object -
   then it means its another type of browser -
   force to set the object for most common browsers that understand AJAX request. */

      htmlData = new XMLHttpRequest();
      }
   }
       
   if ( htmlData !== null ) {
      htmlData.onreadystatechange = updateDiv;

      htmlData.open("GET", url, true);
      htmlData.send( null ); }
   else { 
      alert("Your browser do not support AJAX request!");    } 
}

/* ]]> */
</script>
</head>
<body>
<div id="myDiv">
<map id="sample" name="sample" title="JavaScript Demo">
<a href="javascript:void(0);" onclick="loadHTMLdata('request.html');">Update Content</a>
</map>
</div>
</body>
</html>

And this is the code for the request.html or any html file that you want to extract. Just be sure change the elem value, in which you need to specify the element's to be extracted:

<html>
<head>
<title>Requested Data</title>
</head>
<body>
<div>Request Div#1</div>
<div>Request Div#2</div>
<div>Request Div#3</div>
</body>
</html>
Member Avatar for leroi green

thanx a bunch!

Member Avatar for memaddy

hello in case i want the external content preloaded , how do i do it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.