JavaScript Creating Links to div tags like your using frames

I'm using the" Call of Duty Template"

I want to make links on the left hand side launch new pages in the middle section instead of opening up a new page. I would like everything around the outside stay the same and only the middle section to change, similar to when using frames. Can someone let me know if it's possible, and If so how is it done.

Cheers Mike

 

If you're familiar with jscripts/ajax then its straight forward. Are you using a a framework like jquery? If so it has its own interface and does the job very simple. Basically you hook the click event on the links on the left side and then you retrieve the content for the mid-section and display. If you don't want to use a ready framework here are some basic ajax functions.

Code:

//-MS- Ajax support Added
var ajax_req; 
var ajax_target;
function loadXMLDoc(key, url, target) {
   url += key;
   ajax_target = target;
   // Internet Explorer
   try { ajax_req = new ActiveXObject("Msxml2.XMLHTTP"); } 
   catch(e) { 
      try { ajax_req = new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch(oc) { ajax_req = null; } 
   } 

   // Mozailla/Safari 
   if (!ajax_req && typeof XMLHttpRequest != "undefined") { ajax_req = new XMLHttpRequest(); } 

   // Call the processChange() function when the page has loaded 
   if (ajax_req != null) {
      ajax_req.onreadystatechange = processChange; 
      ajax_req.open("GET", url, true); 
      ajax_req.send(null); 
   } 
} 

function processChange() { 
  // The page has loaded and the HTTP status code is 200 OK 
  //if (ajax_req.readyState == 4 && ajax_req.status == 200) { 
  if (ajax_req.readyState == 4) { 
    // Write the contents of this URL to the searchResult layer 
    cTarget = getObject(ajax_target);
      cTarget.style.display = 'block';
      cTarget.style.visibility = 'visible';

    if( ajax_req.responseText.length > 0 ) {
      cTarget.style.display = 'block';
      cTarget.style.visibility = 'visible';
    } else {
      cTarget.style.display = 'none';
      cTarget.style.visibility = 'hidden';
    }
    cTarget.innerHTML = ajax_req.responseText;
  }
} 

function getObject(name) { 
   var ns4 = (document.layers) ? true : false; 
   var w3c = (document.getElementById) ? true : false; 
   var ie4 = (document.all) ? true : false; 

   if (ns4) return eval('document.' + name); 
   if (w3c) return document.getElementById(name); 
   if (ie4) return eval('document.all.' + name); 
   return false; 
}
//-MS- Ajax support Added EOM

So the url is the link to call the server and retrieve the dynamic data and target is where to place the content it retrieves. Target in other words is the mid section of the template in your case. So for each of the links on the left you invoke the function like:
loadXMLDoc(key, url, target_div);
And key is just a placeholder for parameters to be appended with the url.

The jquery instead has its own interface and does all the above for you but you need to learn it a bit to be able to hook the click event and set the data.

 

I'm not familiar with ajax, i'm a beginner. i'm using Dreamweaver. Is there simple way of creating a hyperlink that points to a div tag in the webpage and load a html page in this space.