...

View Full Version : Linking external html files to one page.



Christina Knapp
08-27-2009, 07:05 PM
I have tried to search all over for an answer to this problem but can't make anything stick. I am trying to use PHP to link html files holding different text together on one web page template. So it seems the page changes but it only loads new content not an entire page. Here is what I have so far:

The links that switch between content:


<a href="page.php?page=firstpage.html">First Page</a>
<a href="page.php?page=secondpage.html">Second Page</a>


The div tag where I want new content loaded:


<div id="text">
<?php switch($page) { default: include('firstpage.html');
break; case "executive": include('firstpage.html');
break; case "team": include('seccondpage.html');
} ?>
</div>

seco
08-27-2009, 07:18 PM
Use Ajax,

You can see an example here
http://www.blueicestudios.com/stat/new.html

Put this in the head section


<script type="text/javascript">
function ajax(url, target) {
document.getElementById(target).innerHTML = ' <img src="ajax-loader.gif" border="0">';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ajaxDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function ajaxDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" Ajax Error:\n"+ req.status + "\n" +req.statusText;
}
}
}

function load(name, div) {
ajax(name,div);
return false;
}
</script>


Links and Div, in the load function page1.html is the page to call. text is the div to load into.


<a href="#" onclick="load('page1.html','text');return false;">Page 1</a> |
<a href="#" onclick="load('page2.html','text');return false;">Page 2</a>
<div id="text"></div>


Grab this gif and put it in the same dir as the page with the js.
http://www.blueicestudios.com/stat/ajax-loader.gif

Phil Jackson
08-27-2009, 07:21 PM
in your links have the href="index.php?pg=firstpage"

then use the following:


<?php

if(isset($_GET['pg']))
{
$page = $_GET['pg'].".php";
$dir = ""; //this is here incase you have it in a folder
if(file_exists($dir.$page))
{
include($page);
}
else
{
echo "The page does not exist";
}
}

?>

i would change all you .html extentions that you load in to .php

Phil Jackson
08-27-2009, 07:34 PM
Use Ajax,

You can see an example here
http://www.blueicestudios.com/stat/new.html

Put this in the head section


<script type="text/javascript">
function ajax(url, target) {
document.getElementById(target).innerHTML = ' <img src="ajax-loader.gif" border="0">';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ajaxDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function ajaxDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" Ajax Error:\n"+ req.status + "\n" +req.statusText;
}
}
}

function load(name, div) {
ajax(name,div);
return false;
}
</script>


Links and Div, in the load function page1.html is the page to call. text is the div to load into.


<a href="#" onclick="load('page1.html','text');return false;">Page 1</a> |
<a href="#" onclick="load('page2.html','text');return false;">Page 2</a>
<div id="text"></div>


Grab this gif and put it in the same dir as the page with the js.
http://www.blueicestudios.com/stat/ajax-loader.gif

Yet this new era of design is brilliant the above code is still not highly accessible and when Google bots come storming along it is with javascript disabled.

Thats why when loading content, i would not use this method.

seco
08-27-2009, 07:38 PM
I agree Phil, I usually use ajax for more or less data retrieval and or widgets. She just asked about loading a new page without page refresh and since I use ajax on a daily basis for most of my work, its the first thing that came to mind. Soon we wont have to worry about that the way the net is moving.

Phil Jackson
08-27-2009, 07:43 PM
Hoping so my friend, AJAX is a great playing field I can wait to tear up. As you have said, I use AJAX for all sorts apart from data retrieval. I blame google! lol

EDIT: and Microspoof

Christina Knapp
08-27-2009, 07:46 PM
Thanks Phil,
That code worked great. I knew it had to be something simple. Now on to my next problem. =)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum