PimenTech-scripts : ajax_frames.js

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

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>AjaxFrames Demo</title>
                <script type="text/javascript" src="/pimentech/yahoo/js/yahoo-min.js"></script>
                <script type="text/javascript" src="/pimentech/yahoo/js/connection-min.js"></script>
                <script type="text/javascript" src="/pimentech/js/PIMENTECH.js"></script>
                <script type="text/javascript" src="/pimentech/js/common.js"></script>
                <script type="text/javascript" src="/pimentech/js/browser_sniffer.js"></script>
                <script type="text/javascript" src="/pimentech/js/ajax2.js"></script>
                <script type="text/javascript" src="/pimentech/js/common_event_manager.js"></script>
                <script type="text/javascript" src="/pimentech/js/ajax_frames.js"></script>
        </head>
        <body onload="loadAjaxFrames()">
                <div id="menu" src="menu.html"></div>
                <div id="content" src="page1.html"></div>
                <div id="form-result"></div>
        </body>
</html>

The menu page provides links to page1.html and *pages2.html, always loaded in the content frame.

menu.html

<h2>MENU</h2>
<ul>
        <li><a href="page1.html" target="content">Page 1</a></li>
        <li><a href="page2.html" target="content">Page 2</a></li>
</ul>

page1.html is pretty obvious

<h1>Page 1</h1>
<p>Welcome to my page 1 ! You should have a look to my <a href="page2.html">second page</a>, it's far better.</p>

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

<h1>Page 2</h1>

<h2>GET</h2>
<form name="form_test" method="GET" action="form_result.php">
My text : <input type="text" name="nom_texte" value="stupid text value" />
<input type="submit" value="AJAX Submit" target="form-result" />
<input type="submit" value="Classic Submit" />
</form>

<h2>POST</h2>
<form name="form_test" method="POST" action="form_result.php">
My text : <input type="text" name="nom_texte" value="stupid text value" />
<input type="submit" value="AJAX Submit" target="content" />
<input type="submit" value="Classic Submit" />
</form>

<h2>POST with a file</h2>
<form name="form_test" id="form_test" method="POST" action="form_result.php" enctype="multipart/form-data" onsubmit="return false">
My text : <input type="text" name="nom_texte" value="stupid text value" />
File : <input type="file" name="source" id="source" />
<input type="submit" value="AJAX Submit" target="form-result" />
<input type="submit" value="Classic Submit" />
</form>

Finally, PHP page result_form.php displays the result after the form is submitted

<?php
echo "<h2>GET</h2>\n";
foreach($_GET as $key => $val) {
        echo $key . ' => ' . $val . "<br />\n";
}

echo "<h2>POST</h2>\n";
foreach($_POST as $key => $val) {
        echo $key . ' => ' . $val . "<br />\n";
}

echo "<h2>FILES</h2>\n";
foreach($_FILES as $key => $val) {
        echo $key . ' => ' . $val['type'] . "<br />\n";
    move_uploaded_file($val['tmp_name'], '/tmp/' . $val['name']);
}
?>

Commentaires

123 Mars 7, 2010 at 1:20 après-midi

123

Documentation / tags :