Hey!

I'm using an ajax script to load external html pages into a div tag. The script works just fine, however I would like to use it in a jump menu.

<select name="Jumpmenu" >
<option value="1" onclick="ajaxpage('page1.php', 'DivId');" >Option 1</option>
<option value="2" onclick="ajaxpage('page2.php', 'DivId');" >Option 2</option>
</select>

The script works when I use it in the <select> tag:

<select name="Jumpmenu" onclick="ajaxpage('page1.php', 'DivId');" >
<option value="1">Option 1</option>
<option value="2" >Option 2</option>
</select>

But I would like to specify the vars for each option

You can try this one:

<html>
<head>
<title>DEMO</title>
<script type="text/javascript">
<!--
var pageRequest, isContent;

var jumpMenu = function() {

var loadPage = function() {

isContent = pageRequest.responseText; 
// Requested data should be in a form of ( rensponseXML ). to get specific element's from the requested page.

/* if ( pageRequest.readyState !== 4 ) return;
if ( pageRequest.status !== 200 ) {
    alert("Unable to open: " + pageRequest.statusText );
} */
 
(( document.getElementById ) ? document.getElementById("output").innerText = isContent : document.all.output.innerText = isContent );
};

var page = function( url ) {
pageRequest = null;
   if ( window.XMLHttpRequest ) { // Works in modern browsers... 
      pageRequest = new XMLHttpRequest();
     } 
   else if ( window.ActiveXObject ) {
      try { // Works fine with IE5
      pageRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch( er ) { // Deals with IE6+ 
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }
   }
   if ( pageRequest !== null ) {     
  pageRequest.onreadystatechange = loadPage; 
     pageRequest.open("GET", url, true);
     pageRequest.send( null );
  } else { alert("Your browser does not support AJAX request"); 
  }
};

index = myForm.pages.selectedIndex;
loc = myForm.pages.options[index].value;
      page( loc );
};

// -->
</script>
</head>
<body>
<form id="myForm" name="myForm" action="#" onsubmit="return false;">
<div>

<select id="pages" name="pages" size="1" onchange="jumpMenu();">
<option value="page1.html">First Page</option>
<option value="page2.html">Second Page</option> 
</select>
<div id="output"></div>
</div>
</form>
</body>
</html>

Thanks! It's just what I wanted, almost. When the page loads into the div the code of the page is displayed insted of the actual page. Do you have an idea of what the problem might be?

From the loadpage function, in line #20 simply change the method into: innerHTML // instead of elem.innerText and the whole page will be displayed, as-is.

thanks, however, I'm not sure if I changed it right.
It did it like this:

(( document.getElementById ) ? document.getElementById("output").innerHTML = isContent : document.all.innerHTML = isContent );

However, that does only work in Chrome, but not IE or Firefox

You've done it right.
If it doesnt work in IE or FF.
Then you must replace line#44 and #45 with this:

index  = ( document.getElementById ) ? document.getElementById("pages") : document.all.pages;
loc = index.options[index.selectedIndex].value;

I made the change and it works in Firefox somewhat but still not in IE. In Firefox the page is loaded into the div but the page does not work properly (works in chrome) despite the fact it is a simple post form (nothing happens when I press submit).

Getting data via post method is a different issue. Let's make it more precise and understandable for you &#8212; try to visit this link. This will give you a brief information and different approach in using AJAX.

This article has been dead for over six months. Start a new discussion instead.