AJAX powered Tabs

[datahell]

Elxis 2008 has build-in support for Ajax powered Tabs.
Standard mosTab class udated to support Ajax Tabs and the same done for the tabpane JS class.

The idea behind this is simple. We did it without implementing anything new. We married together two existing features to get a new more powerfull one.

Why we did it
The reason is for reducing the database load, reducing the page's loading time (only the tab that the user requested is displayed and not all) and inorder to be able to see changes in data entries in real time.

How it works
A mosTab usage example in prior to 2007 Elxis versions was as follows:

Code: (php) [Select]

$tabs = new mosTabs(0);
$tabs->startPane( 'pane_name' );

$tabs->startTab( "title1", "id1" );
echo 'content1';
$tabs->endTab();

$tabs->startTab( "title2", "id2" );
echo 'content2';
$tabs->endTab();

$tabs->endPane();
The code above generates 2 tabs, titled title1 and title 2.

The Elxis 2008 mosTab version
New feature keeps backwards compatibility. So the example above is still fully functional in Elxis 2007. BUT we can now say in any tab we want to use AJAX technology. This means that we can have co-existance of the old and the new method in the same tab pane.

Example of usage

Code: (php) [Select]

$tabs = new mosTabs(0);
$tabs->startPane( 'pane_name' );

$tabs->startTab( "title1", "id1" );
echo 'content1';
$tabs->endTab();

$tabs->startAjaxTab( "title2", "id2", 'testme(\'id2\')');
echo 'content2';
$tabs->endAjaxTab();

$tabs->endPane();
The first tab uses the old method. The second one (ajax) executes a javascript function named testme() when clicked that triggers AJAX. We will use AJAX Sack (Elxis default). Function testme and needed javascript would be something like this:

Code: (JavaScript) [Select]

var ajax = new sack();

function whenLoading(){
var e = document.getElementById(ajax.element);
e.innerHTML = "<img src='tools/updiag/images/loading.gif'>Sending Data...";
}

function whenLoaded(){
var e = document.getElementById(ajax.element);
e.innerHTML = "<img src='tools/updiag/images/loading.gif'>Data Sent...";
}

function whenInteractive(){
var e = document.getElementById(ajax.element);
e.innerHTML = "<img src='tools/updiag/images/loading.gif'>Getting data...";
}

function testme(q){
var e = document.getElementById('ajaxTab'+q);
e.style.display = "";

ajax.requestFile = "index3.php?option=com_admin&task=tools&tname=calculator";

ajax.method = 'POST';
ajax.element = 'ajaxTab'+q;
ajax.onLoading = whenLoading;
ajax.onLoaded = whenLoaded;
ajax.onInteractive = whenInteractive;
ajax.runAJAX();
}

In the attached screenshot, as an example, we load component menumanager when the second tab is clicked.

[old attachment deleted by admin]

[datahell]

I uploaded a video capture file for the Ajax Tabs. It is in low quality but you will get the idea.

Format: AVI
Video Codec: VP6.2
Filesize: 307 KB

Download it from here (right click - save target as)

[Farhad Sakhaei]

great , now the data for the tabs will fetch when you click on it ...
you can download codec from this http://www.free-codecs.com/VP6_download.htm