Amateur PHP/Ajax [perhaps?]...include() links...

Merlin · Jul 5, 2007

Hi everyone,

I'm a real novice at this, so bear with me please.

How do I, using one main template/base page, include other pages into it via links?

EG: I have a link on my base page to an 'about' section...how do I draw that 'about' info into the main page without having to reload/recompose the main page everytime?

I found this...

Code:

<?php

switch($_SERVER['QUERY_STRING']) {

case 'hello':
include('hello.inc');
break;

case 'about':
include('about.inc');
break;

case 'links':
include('links.inc');
break;

default:
include('main.inc');
}

?>

...but that only seems to work using ?linkhere after the URL, and I have to edit that section AND the actual links then.

Is there a simple way to use one link, and change the data?

Thanks, N.

icyrus · Jul 5, 2007

Perhaps you could explain what you wish to achieve a bit more?

If I understand you correctly you want one page to display different content based on what link you click, but you don't want the page to reload or repost?

hongong · Jul 10, 2007

Ok, as far as I understand, you're wanting to use AJAX to achieve a page-load-less style inclusion of data from other files?

It is possible to do this without using any PHP, however, I'll give you the benefit of the doubt and assume you're wanting to add dynamic content at a later stage.

The following is a future proof solution to your problem:

Firstly; save the code below as, include.php

PHP:

<?php

// Gather variable data from the URI
// eg. filename.php?page=index
$page = (isset($_GET['page'])) ? $_GET['page'] : 'index';

// Determine whether or not the requested file exists
if (!file_exists('includes/' . $page . '.php'))
{
    echo "File could not be included, no file exists.";
    exit;
}

switch ($page)
{
    /** 
     * I'm sure you're aware that you can duplicate this case. 
     * If you'd like to add more page includes, just change the relevant
     * data in each case.
     */
    case 'about':
		include('includes/about.inc.php');
        break;

    // If no variable is set in the URI, or no case matches, include index
    default:
        include('includes/index.inc.php');
}

?>

Also—sidetracking a little here—please watch when using the .inc file extension, as your source will become visible.
Rather use: filename.inc.php.

Next; save the code below as, index.php

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your Page Title</title>
<script language="javascript" type="text/javascript">
<!-- 

function requestPage(page) {

	var request = false;
	
	try {
		request = new XMLHttpRequest();
	} catch (e) {
		try{
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("Unable to complete your request.");
				return false;
			}
		}
	}

	request.onreadystatechange = function() {
		if(request.readyState == 4) {
			if(request.status == 200) {
				document.getElementById('content').innerHTML = request.responseText;
			}
		}
	}

	request.open("GET", "include.php?page=" + page, true);
	request.send(null); 
}

//-->
</script>

<style>
a {
	cursor: pointer;
}
</style>
</head>

<body>

<ul>
  <!-- Use the filename, without its extention, as a function parameter -->
  <a onclick="javascript:requestPage('index')"><li>Index</li></a>
  <a onclick="javascript:requestPage('about')"><li>About</li></a>
</ul>

<div id="content"><?php include('includes/index.inc.php'); ?></div>

</body>
</html>

Next; create the folder /includes/ and place your alternate page content files inside.
Example:

PHP:

<?php

// includes/index.inc.php
echo "Index page content.";

?>

Lastly; ensure your file structure reflects the following:

/includes/
-> index.inc.php
-> about.inc.php

include.php
index.php

Conclusion

It may be in your best interest to add a load indicator, to signify when content is being requested from the server. Because of the seamless nature of AJAX, users can become confused when they click on something and nothing happens.

Hopefully the above will answer your question. If not, feel free to ask for help if you have any questions.

Join the MyBroadband community

Get started

Amateur PHP/Ajax [perhaps?]...include() links...

Merlin

Expert Member

icyrus

Executive Member

hongong

Member