==================================
PimenTech-scripts : ajax_frames.js
==================================
:Author: Julien Herbin
:Contact: julien@_nospam_pimentech.net
:Revision: $Revision: 1.10 $
:Date: $Date: 2007-07-26 13:43:34 $
:Copyright: 2006 PimenTech SARL
:Tags: ajax javascript pimentech english
AjaxFrames provides an easy way to get an HTML frame-like behaviour on DIV Elements with AJAX. You don't need to write a single line of javascript ! It comes with `Pimentech Scripts library `_
------------
DEPRECATED !
------------
Use http://garage.pimentech.net/scripts_doc_jquery_jframe/ instead.
---------------
Getting started
---------------
The following Javascript files must be included in the head section of your HTML page :
- yahoo/js/yahoo-min.js
- yahoo/js/connection-min.js
- yahoo/js/event-min.js
- pimentech/js/PIMENTECH.js
- pimentech/js/common.js
- pimentech/js/ajax2.js
- pimentech/js/common_event_manager.js
Once your browser has loaded the HTML document, the **loadAjaxFrames** global function should be called, so that every **DIV** Element having an **src** attribute is detected and managed as a frame. Basically, each click on an AjaxFrame DIV will be intercepted by the EventManager :
- if a link is clicked, then the **target page** (href) will be opened within the container AjaxFrame. If the link has a **target** property, the **target page** will appear in the HTML Element having the id defined by this property.
- if a submit button is clicked, then the form **target page** is displayed in the DIV having the id defined by the button's **target** property.
- if neither a link nor a submit button is clicked, the click is propaged by the EventManager.
--------------
Simple Example
--------------
Let's start with an index page, which defines two AjaxFrames : **menu** and **content**. After the page is loaded, *menu.html* will be loaded in the **menu** frame, whereas *page1.html* will appear in the **content** frame. A working example is online here : http://www.pimentech.org/examples/ajax_frames/
*index.html* ::
AjaxFrames Demo
The menu page provides links to *page1.html and *pages2.html*, always loaded in the *content* frame.
*menu.html* ::
MENU
*page1.html* is pretty obvious ::
Page 1
Welcome to my page 1 ! You should have a look to my second page, it's far better.
*page2.html* is a bit more complicated. It defines three forms :
- the first one uses GET method and is loaded in the **form-result** DIV
- the second one uses POST method and is loaded in the **content** frame
- the last one makes a file upload (the result cannot currently be displayed)
*page2.html* ::
Page 2
GET
POST
POST with a file
Finally, PHP page *result_form.php* displays the result after the form is submitted ::
GET\n";
foreach($_GET as $key => $val) {
echo $key . ' => ' . $val . "
\n";
}
echo "POST
\n";
foreach($_POST as $key => $val) {
echo $key . ' => ' . $val . "
\n";
}
echo "FILES
\n";
foreach($_FILES as $key => $val) {
echo $key . ' => ' . $val['type'] . "
\n";
move_uploaded_file($val['tmp_name'], '/tmp/' . $val['name']);
}
?>