Member Avatar for joeltonnberg

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

  • 2 Contributors
  • 7 Replies
  • 117 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 7 Replies

Member Avatar for essential

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>
Member Avatar for joeltonnberg

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?

Member Avatar for essential

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.

Member Avatar for joeltonnberg

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

Member Avatar for essential

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;
Member Avatar for joeltonnberg

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).

Member Avatar for essential

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.

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.