dprichard Posted January 30, 2008 Share Posted January 30, 2008 I am working on a template and was trying to find information on how to do this. I want the header, sidebar and footer to stay the same and not refresh and then if someone clicks on a button in the sidebar, I would like the content in the middle to change without the rest of the includes refreshing. My questions is whether or not this can be done in PHP and if so if someone can point me to an article or tutorial for this. I tried searching in this forum and google for answers, but I guess I am not using the right words for my search because I am getting other things back. Any help would be greatly appreciated. Thank you! Quote Link to comment Share on other sites More sharing options...
trq Posted January 30, 2008 Share Posted January 30, 2008 Ajax is what your looking for, php can't do it alone. Quote Link to comment Share on other sites More sharing options...
The Little Guy Posted January 30, 2008 Share Posted January 30, 2008 Your Javascript: <script type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(URL){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong (User Probably Doesn't have JS or JS is turned off) alert("You Browser Doesn't support AJAX."); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ //This if satement will check if the status of the script //If the readyState is not equal to 4 (The request is complete) //It will display text that says loading... if(ajaxRequest.readyState < 4){ //AJAX in the prenthacies, is what id element in the body will be changed. document.getElementById('middle').innerHTML = "<h2>Loading...</h2>"; } //Once the readyState is equal to four, this means that the request was sent, //and successfully processed. if(ajaxRequest.readyState == 4){ //This is where the output of the file we called and it will be placed //in the div where we named the ID = AJAX document.getElementById('middle').innerHTML = ajaxRequest.responseText; } } //This section processes the data ajaxRequest.open("GET", URL, true); ajaxRequest.send(null); } //--> </script> Your HTML (Read the Comments): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <!-- Place the Above javascript code here --> </head> <body> <div> <a href="javascript:ajaxFunction('pageLinkHere1.php');">Link 1</a> <a href="javascript:ajaxFunction('pageLinkHere2.php');">Link 2</a> </div> <div id="AJAX">Middle Content</div> <div>Bottom Content</div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.