Surrogate
November 22nd, 2006, 02:08 PM
I have a mast head with Flash buttons, content below and then a Flash footer. I would love to change the middle content without reloading the page via the buttons and without using frames. Ideas?
Use AJAX - there's a tutorial here on Kirupa on the frontpage about it
(http://www.kirupa.com/developer/php/ajax_intro.htm)
I made an example for you, that does what you want.
This is the front page, i called it index.html. It contains the AJAX code that the tutorial i refered to has. However, it does not return the data it fetches in a dialog, but it writes it to a <div> tag on the page, with the help of innerHTML.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
// You can put in some stuff to show while it loads the page... an animated .gif maybe?
var loadingmessage = "Loading page... Please wait";
var xmlHttp;
function createRequest(){
if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }
}
function loadPage(pageurl){
// It puts the <div> in a variable here, so it can write to the tag.
var content = document.getElementById("content");
// Here the variable loadingmessage is put in, so it will be shown until the page is downloaded.
content.innerHTML = loadingmessage
createRequest();
var url = pageurl;
xmlHttp.open("GET", url, true);
// Here you tell it to run this function when it has fetched the content - pretty much like a flash listener
xmlHttp.onreadystatechange = pageLoaded;
xmlHttp.send(null);
}
function pageLoaded() {
var content = document.getElementById("content");
if(xmlHttp.readyState == 4) {
// Dont ask me about the readyStates, but this works (Read the tutorial i posted)
// The content is here written to the <div>, replacing the loadingmessage variable - voila!
content.innerHTML = xmlHttp.responseText;
}
}
</script>
</head>
<body>
<!-- This should obviously be your fancy flash menu instead -->
<input type="button" onClick="loadPage('test.html');" value="Click here to AJAX it up">
<div id="content"/>
</body>
</html>
This is the page that gets fetched. It shouldn't contain <html> tags, because it will be placed inside a <div> tag.
<h1>This is a page with some content</h1>
<p>Nothing to see here really...</p>
So what you do, is that you make Flash call a Javascript function on the page, that through AJAX loads the content into the current page. Voila, no page reloads.
To call a javascript function from flash, use this for your flash buttons:
somebutton.onRelease() = function() { getURL("javascript:loadPage('test.html);"); }
(I didn't test the flash code, but i think it should work)
I havent tried using this before. But it seems easy to do actually :)
Best of luck!