Re: Open something in a div

Blake · #11 07-Feb-2009, 12:04

You still need HTML and CSS to build a PHP page. The PHP code you would need is actually very simple. Here's an example:

File 1: layout_top.inc

HTML Code:


<html>
  <head>
    <title>Hellow world!</title>
  </head>
  <body>
    Welcome to my web page!
    <div>

File 2: layout_bottom.inc

HTML Code:


    </div>
    Thanks for looking!
  </body>
</html>

Now to make a page for your site, you would do something like this:

HTML Code:


<?php include("layout_top.inc"); ?>

Hello world!<br>
This page was made with PHP!

<?php include("layout_bottom.inc"); ?>

There are only two lines of PHP code in the whole thing, everything else is just HTML and CSS. The big difference is that the code that makes up the layout is in two files, layout_top.inc (which contains the top portion of the layout) and layout_bottom.inc (which contains the bottom portion of the layout). Now instead of putting all the code for your layout in every page, you just include those two files with PHP.

All the code that is common two every page can go in those two files. The content that is different (the code in the content div) goes in its own file, which includes the two layout files.

damy · #12 08-Feb-2009, 09:30

I'm sorry but I don't understand, can you give me an example? I want something like frames if you understand me, a fixed banner at top, a left menu, and at right something variable depending on the clicked link from menu frame.
I want just a simple example to do a web site like this ( that is the site that I work for it ) : http://www.coco243.lx.ro/, and when I click the links from the green div, in the red div to appear some informations writed by me, with other words a page displayed in the red div, thanks

MisterChucker · #13 25-Mar-2009, 01:59

The task I think you are describing is entirely possible with a little AJAX, which is really just fancy Javascript. Keep in mind, though, that if you structure your site navigation this way, your page content may not be visible to search engines.

Here is a refined example.

demo.php (could be demo.html instead)

HTML Code:

<html>
<head>
<title>AJAX Navigation Demo</title>
<script type="text/javascript" src="get_xml_http_object.js"></script>
<script type="text/javascript" src="get_embedded_html.js"></script>
</head>
<body>

<ul>
	<li><a href="#" onclick="get_embedded_html('sample_html_page.html')">Get an HTML page</a></li>
	<li><a href="javascript:get_embedded_html('sample_php_page.php')">Get a PHP page</a></li>
	<li><a href="javascript:void()" onclick="get_embedded_html('not_a_page')">Ask for a page that does not exist</a></li>
</ul>

<div id="dynamicContent">Dynamic content appears here.</div>

</body>
</html>

Notice the two scripts in the head section. You need these so your page has access to the necessary Javascript functions. You also need a tag (preferably a div) with an id attribute. You can change the value of the id attribute as long as you also change the Javascript reference to it.

The three links in the list are structured differently only for demonstration purposes. They all operate the same way. Choose one of the three styles and use it consistently. Each link calls the Javascript function get_embedded_html() which comes from the script file get_embedded_html.js. A file path is passed as an argument to each function. In these examples, the paths are simply file names.

When you click one of these links, a request is sent to the server. When the server responds, the server's response replaces the contents of the target element. In this example, the target element is <div id="dynamicContent"></div>.

get_xml_http_object.js

Code:

var xh; // Holds the request object
var xh_in_use = false; // Prevents more than on simultaneous request
function get_xml_http_object ()
{ 
	var obj = null;
	if (window.XMLHttpRequest) // Netscape
		obj = new XMLHttpRequest();
	else if (window.ActiveXObject) // Internet Explorer
		obj = new ActiveXObject("Microsoft.XMLHTTP");
	return obj;
}

get_xml_http_object.js is the script that puts the X in AJAX. Don't modify it. It can be reused in any AJAX project.

get_embedded_html.js

Code:

/*
 * xh, xh_in_use, and get_xml_http_object()
 * are defined in get_xml_http_object.js
 */
function get_embedded_html (page)
{
	if (xh_in_use)
		return;
	xh_in_use = true;
	xh = get_xml_http_object();
	if (xh == null) {
		return;
	}
	var url = "get_embedded_html.ajax.php" + "?page=" + page;
	xh.onreadystatechange = get_embedded_html_stch;
	xh.open("GET", url, true);
	xh.send(null);
}
function get_embedded_html_stch ()
{
	if (xh.readyState == 4 || xh.readyState == "complete")
	{
		var html = xh.responseText;
		document.getElementById('dynamicContent').innerHTML = html;
	}
	xh_in_use = false;
}

get_embedded_html.js can be used as a template for creating another set of functions that do a similar task, which is to handle the request to and response from the behind-the-scenes script.

I have highlighted the two parts of the script that you might want to customize. The first defines the URL request that is sent to the server. The second defines the ID of the element that the response will be injected into.

get_embedded_html.ajax.php

PHP Code:


<?php
/*
 * This script is potentially unsafe
 * because it can return any file on the server.
 */

$path = urldecode($_REQUEST['page']); // Converts %20 to space and such things

if (file_exists($path))
    include_once $path;
else
    echo '<p>Could not retrieve requested page ('.$path.').</p>';
?>

This is the behind-the-scenes script. It is a very simple PHP script that grabs whatever page you ask it to. It acts as a portal to the requested file. You should modify this script to limit the files it has access to.

The script does not need to be written in PHP. You could use any other server-side language. However, the path to the script needs to match the path referenced in Javascript.

sample_html_page.html

HTML Code:

<h1>Embedded HTML Page</h1>
<p>Embedded pages should not contain the usual html, head, and body tags.</p>

This is a sample HTML page to be embedded. The embedded page should only contain the code that you would find between the body tags of a normal HTML page.

sample_php_page.php

PHP Code:


<?php
echo '<h1>Embedded PHP Page</h1>';
echo '<p>This page was generated by a php script.</p>';
?>

This is a sample PHP page to be embedded. All it does is generate HTML.

I hope I described this solution well enough. If not, let me know what I need to explain better.

MisterChucker · #14 25-Mar-2009, 09:08

The same effect can be achieved without any server-side scripting (PHP). Here are some modifications to the code I posted before.

Change demo.php to demo.html. Replace the list with:

HTML Code:

<ul>
	<li><a href="javascript:get_embedded_html('sample_html_page.html')">Get an HTML page</a></li>
	<li><a href="javascript:get_embedded_html('sample_text_page.txt')">Get a text page</a></li>
</ul>

In get_embedded_html.js, change the line:

Code:

var url = "get_embedded_html.ajax.php" + "?page=" + page;

to:

Code:

var url = page;

Create another sample file:

sample_text_page.txt

Code:

This is just some text in sample_text_page.txt.

Now the embedded file will be accessed directly instead of through an intermediate server-side script.

MisterChucker · #15 25-Mar-2009, 10:16

There is another option, which is similar to what Blake wrote about. You can use PHP with no Javascript/AJAX. This method should work better with search engines and is compatible with more browsers than the AJAX method.

demo.php

PHP Code:


<html>
<head>
<title>PHP Navigation Demo</title>
</head>
<body>

<?php
$pages = array
(    'Get an HTML page' => 'sample_html_page.html'
,    'Get a PHP page'   => 'sample_php_page.php'
,    'Get a text page'  => 'sample_text_page.txt'
);
?>

<ul>
<?php
foreach ($pages as $page => $href)
{
?>
    <li><a href="demo.php?page=<?php echo urlencode($page); ?>"><?php echo $page; ?></a></li>
<?php
}
?>
    <li><a href="demo.php">Get default content</a></li>
</ul>

<div id="dynamicContent"><?php
if (isset($_REQUEST['page']) && in_array($page = urldecode($_REQUEST['page']), array_keys($pages)))
{
    include $pages[$page];
}
else
{
?>
    <h2>Default content.</h2>
<?php
}
?></div>

</body>
</html>

If you are unfamiliar with PHP, this probably looks complicated, but it's really not too bad. You can build up the HTML around the PHP to make the master page look however you want. To add another embedded page to the navigation list, follow the pattern that the other three items in the $pages array use to add another link name and file path.

After you click one of the navigation links in your browser, your address bar will look something like this:

Code:

demo.php?page=Get+an+HTML+page

Most modern search engines should be able to identify this as a unique page.

If you need a better explanation of what is going on with the PHP, just ask.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Windows Media Player doesn't open	Snowman	Computer Software Forum - Windows	3	24-Aug-2008 21:34
How to open files outside my program?	DeadOverlord	C++ Forum	5	30-Oct-2007 21:27
Apache default page can't be visited	satimis	Apache Web Server Forum	0	05-Apr-2007 05:40
[ANN] New script engine: Open Basic (Basic syntax)	MKTMK	Computer Programming Advertisements & Offers	0	01-Sep-2005 07:13
[Tutorial] Standard I/O	aaroncohn	C Programming Language	20	27-Feb-2004 22:07

Re: Open something in a div

Re: Open something in a div

AJAX to the rescue!

AJAX to the rescue! (No PHP)

PHP to the rescue! (No Javascript)