add ajax functionality to user interface

Monday 04 February 2008 9:24:23 pm

hi all,

i have developed one site.

in that there are mainly three columns

1. left column (menu)
2. middle column (content)
3. right column(block)

now i want the paging at right column side block with ajax.

i have done this with javascript only temperarely.

but i want it using ajax only.

please any one help me.

With Best Regards,

Dhaval Patel
Team Leader - iNETProcess(I) Pvt. LTD.
dhaval.patel@inetprocess.com
Ph No: +91 79 65 12 35 00
http://www.inetprocess.co.in

Tuesday 05 February 2008 1:00:01 am

Thank you for replying André

now i have right column (view of frontpage).

In that there is a listing of the sub items of that frontpage.

now if the list is of more then 4 articles then paging should be there.

and the data is coming from database.

With Best Regards,

Dhaval Patel
Team Leader - iNETProcess(I) Pvt. LTD.
dhaval.patel@inetprocess.com
Ph No: +91 79 65 12 35 00
http://www.inetprocess.co.in

Wednesday 06 February 2008 3:35:12 pm

Like andré said you will need to create a custom view/module for your left page.

If you use "prototype" you will be able to do something like this:

let say this will be the basic structure of your page:

<script include..... prototype.js />

<div id="leftcol"></div>
<div id="main"></div>
<div id="righcol"></div>

<script type="text/javascript">
var tmp = new Ajax.Updater('leftcol", {"/mymodule/myleftcol"|ezurl('single')});
tmp = new Ajax.Updater('main", {"/mymodule/main"|ezurl('single')});
tmp = new Ajax.Updater('rightcol", {"/mymodule/myrightcol"|ezurl('single')});
</script>

The "prototype" API will allow you to a div which has an id very simply like this:
new Ajax.Updater('leftcol", {"/mymodule/myrightcol"|ezurl('single')});

Which you can use in your links:

<a href="#" onclick="tmp = new Ajax.Updater('leftcol', {concat("mymodule/myleftcol/(option)/", $option)|ezurl('single')})">update left col</a>

or export into javascript function and then reuse in your links:

myfunction.js

function mylink(option1){
var tmp = new Ajax.Updater('leftcol", "/mymodule/myleftcol/(page)/"+ option1);
}

<a href="#" onclick="mylink(option1)">update left col</a>

More info on this fonction here:
http://www.prototypejs.org/api/ajax/updater

Download prototype here:
http://www.prototypejs.org/download

An ajax view is generaly very simple since it will just update a small part of your page:
the following lines should be all you need for your simple view files, main.php/myleftcol.php/myrightcol.php (which you would put in the "/extension/your_module_s_name/modules/"'s directory):

<?php
include_once( 'kernel/common/template.php' );
$tpl =& templateInit();

$tpl->setVariable( 'view_parameters', $Params['UserParameters'] );

$Result = array();
$Result['pagelayout'] = false;
$Result['content'] = $tpl->fetch( $template );
?>

replace $template with the url of your template and you are set.

Your module.php file can also be very basic:

<?php
$Module = array( 'name' => 'mymodule' ,
                 'variable_params' => true );

$ViewList = array();
$ViewList['myleftcol'] = array( 'script' => 'myleftcol.php');
$ViewList['main'] = array( 'script' => 'main.php');
$ViewList['myrightcol'] = array( 'script' => 'myrightcol.php');
?>

this will give you a basic pagelayour with nothing in it which is ideal for simple blocs which will be udated and will avoid you from having to create your own view.

The attentive minds will have noticed that in this exemple I have passed on the view_parameters which will allow you to keep the same functionality as with node templates. By passing on functionnality to your template using the /(param)/ methods, this will allow you to include paging on to your menu ( url/(offset)/xxx )

I recommend reading this if you get a little lost:
http://ez.no/ezpublish/documentation/development/extensions/building_an_ez_publish_module

Good luck with that,

let us know how you get on.