Page 1 of 1
Update part of page content not change page
Posted: Tue Dec 07, 2010 6:16 am
by werendle
[text]
Hi All,
I am trying to use a single menu within index.php. As the menu item is clicked I want to include different page content, so in an ideal world the page only has to load the header and footer once, reducing lag in browsing.
The code below links to the correct files but doesnt draw the page in, instead changes the entire page and I loose the header and footer.
I have searched the forums and think that I need to impliment a case statement but am a little stumped at where to start,
Any help would be much appreciated.
Many thanks
werendle
[/text]
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4">
<html>
<head>
</head>
<body>
<font face="calibri">
<?php
include("header.php");
?>
<ul class="menu">
<li><a href="home.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="cycle.php">Cycle</a></li>
<li><a href="blog.php">Blog</a></li>
</ul>
<?php
include("footer.php");
?>
</font>
</body>
</html>
Re: Update part of page content not change page
Posted: Tue Dec 07, 2010 10:07 am
by social_experiment
werendle wrote:I am trying to use a single menu within index.php. As the menu item is clicked I want to include different page content, so in an ideal world the page only has to load the header and footer once, reducing lag in browsing. The code below links to the correct files but doesnt draw the page in, instead changes the entire page and I loose the header and footer.
Your code is correct but you have to add
include('header.php') &
include('footer.php') on all of the pages in your menu (home, about, cycle, blog). The problem is your menu. You have this code (that you pasted) on what is probably the home page. Now you click the button and the browser takes you to another page without code. If you want the page to be called on itself you will have to change you links href values and use query strings.
Code: Select all
<ul class="menu">
<li><a href="home.php?page=home">Home</a></li>
<li><a href="home.php?page=about">About</a></li>
<li><a href="home.php?page=cycle">Cycle</a></li>
<li><a href="home.php?page=blog">Blog</a></li>
</ul>
Now each time you access a page, it's same page (home.php) but there will be an attached part to the url. This part will be used with the switch statement and determine what happens on the page.
Code: Select all
<?php
// sanitize the value from the query
// string
$page = $_GET['page'];
switch($page) {
case('home'):
// do stuff for home page
break;
case('about'):
// do stuff for about page
break;
case('cycle'):
// do stuff for cycle page
break;
case('blog'):
// do stuff for blog page
break;
default:
// incase someone tries to mess with your
// site logic, show a generic response
}
?>
Re: Update part of page content not change page
Posted: Tue Dec 07, 2010 3:06 pm
by werendle
[text]Hi again, and thanks so much for the quick response, I have made the suggested changes and yes it does work to a fashion, but the linked pages, eg cycle.php dont contain the menu, so am haveing to include the code again in each one as well as header.php and footer.php.
Ideally I was trying to keep the header, menu and footer static while changing the rest of the content by using the include depending on the case, I dont think I am explaining very well sorry, but any more help or ideas would be appreciated. I have pasted my new code below for info[/text]
Code: Select all
<?php
include("header.php");
?>
<ul class="menu">
<li><a href="home.php?page=home">Home</a></li>
<li><a href="home.php?page=about">About</a></li>
<li><a href="home.php?page=cycle">Cycle</a></li>
<li><a href="home.php?page=blog">Blog</a></li>
</ul>
<?php
$page = $_GET['page'];
switch($page)
{
case('home'):
include ("home.php");
break;
case('about'):
include ("about.php");
break;
case('cycle'):
include ("cycle.php");
break;
case('blog'):
include ("blog.php");
break;
default:
include ("home.php");
}
?>
<?php
include("footer.php");
?>
Re: Update part of page content not change page
Posted: Tue Dec 07, 2010 3:33 pm
by werendle
Code: Select all
l class="menu">
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=about">About</a></li>
<li><a href="index.php?page=cycle">Cycle</a></li>
<li><a href="index.php?page=blog">Blog</a></li>
</ul>
[text]Complete school boy error, I wass using the wrong file name in the href, needed index.php not the home.php as previously
Fantastic response, thank you again for such a quick and well written reply.
Kindest Regards
Will
p.s. its now almost ready to go live

[/text]
Re: Update part of page content not change page
Posted: Tue Dec 07, 2010 6:51 pm
by califdon
What you described in your original post (replacing just a part of the content of a page, without refreshing the entire page) is an entirely different operation than using a hyperlink "anchor" (the <a href....> syntax). You must not confuse them. Replacing just a part of the content requires using "AJAX" and Javascript. It's not too hard to do, but it is entirely different. There is a world of information on AJAX, just Google for it.
Re: Update part of page content not change page
Posted: Wed Dec 08, 2010 6:09 am
by werendle
[text]
Hi califdon, as you suggesed I have google'd AJAX, wow that is exactly what I am looking for, thanks I will do some more research and have a go at that implimentation over the weekend.
Thanks again for helping a newbie
Regards
Will
[/text]
Re: Update part of page content not change page
Posted: Wed Dec 08, 2010 11:06 am
by califdon
I'm glad that may be useful to you. As you begin using AJAX, you may want to return here to ask questions. If you haven't coded much Javascript, it will require some study of that, before you can understand what's happening.