[RESOLVED] Include with a click

konstigfigur

I want to activate an include function by a "link click" and I want the included page to appear on a specific place on the page. How do I do it?
Thank you
//KF

konstigfigur

...and one thing more. Once the included page has appeared on the right place on the page, I want to have it removed and replaced with another page using the include function with a "link-click".
The whole idea is to have a main page with a header and footer and the bit between filled with pages one at the time by clicking on links activating include functions
//kf.

johanafm

You could load a new page for each link clicked and deal with content PHP side only, along the lines of

# start up stuff, such as session_start(), checking if user is logged in etc

# or however you display the first html part of your page: class, template
require 'page_head.php';

switch (condition to choose content) {
	case 'A':
	    require 'content_a.php';    # or however you display your content..
	    break;
	case 'B':
	    require '';
	    break;
	default:
	    require 'start.php';
}

require 'page_foot.php';

You could also serve all content on the first request (after login, if such is required) and use javascript to switch what's shown

<body>
<!-- non content stuff here, links or whatever else you want -->
<div id="menu">
	<a href="javascript:selectContent('a')">A</a>
	<a href="javascript:selectContent('b')">B</a>
	<a href="javascript:selectContent('c')">C</a>
	<a href="javascript:selectContent('d')">D</a>
</div>

<div id="content">
    <div id="content_a" style="display: block;">stuff</div>
    <div id="content_b" style="display: none;">other stuff</div>
    <div id="content_c" style="display: none;">more stuff</div>
    <div id="content_d" style="display: none;">even more stuff</div>
</div>

<!-- more non content stuff here -->
</body>

function selectContent(id) {
	id = 'content_'+id;
	var c = document.getElementById('content');

for (var i = 0; i < c.childNodes.length; ++i) {
	if (c.childNodes[i].id == id) {
		c.childNodes[i].style.display = 'block';
	}
	else {
		c.childNodes[i].style.display = 'none';
	}
}
}

Or you could use an approach similar to this one, but not preload all content and use ajax (XmlHttpRequest) to fetch new content from the server instead.

konstigfigur

Perfect! Many thanks for your help
//kf