Ajax

Related: Mootools, No Javascript, jQuery

Wishlist

	Rating	Subject	Priority	Category	Created
	(0)	Custom javascript: a future-proof way to handle	8	Feature request	2009-02
	(1)	ajax seems to duplicate the content of wiki page edit under some circumstances	8	Bug: Error Bug: Regression Bug: Usability	2009-09
	(1)	maketoc in tikiwiki 3.2 "amplifies" content after saving?	8	Bug: Error Bug: Usability	2009-10
	(0)	AJAX auto-refresh of preview, options: new window or HTMLdiff	8	Feature request	2009-11
	(1)	Split Ajax settings	7	Bug: Consistency Feature request	2008-07
	(1)	Edit button at page's top can't work when i enabled Ajax feature	6	Bug: Error	2009-08
	(1)	insert column or row in spreadsheet requires ajax to work in 3.3, and broken in tiki 4.0	6	Bug: Error Bug: Regression Bug: Usability	2010-01
	(1)	Ajax fails with Quicktags admin	5	Bug: Error	2006-06
	(0)	Wiki page draft broken on Firefox 2.0 and IE6	5	Bug: Error	2008-07
	(1)	Quicktags don't work on editpage if you use the AJAX edit icon	5	Bug: Error	2009-03
	(1)	Normal search also with autocomplete-ajax-feature	5	Feature request	2009-09
	(0)	Javascript bug with Show Help button in tiki-article_types.tpl	5	Bug: Usability	2010-01
	(0)	tiki-stats.php ajax links to anchors broken	3	Bug: Usability	2009-07
	(1)	Tracker pagination fails in AJAX	2	Bug: Error Bug: Usability	2008-06
	(1)	Some themes are incomplete	1 low	Bug: Usability	2009-04

---

Developing Ajax

Ajax framework is under development in v1.10. There are two branches of proposals for this framework, one based in xajax library and other based on cpaint cpaint. This page describes latest proposition for xajax branch, based on belief that cpaint is a very good transport layer, but we realized that we would have to build the whole development api over it, while xajax provides an easier development. Also, as of 2007-03-15 17:01, cpaint is no longer under active development.

Table of contents

• Wishlist
• Developing Ajax
  • Getting started
  • Ajax development guidelines
    • 1 - Template-based common layout
    • 2 - Load content statically first time
  • Tutorial - make a region dynamic
    • 1- Identify template component
    • 2- Change your tpl to use {ajax_href} block in links
    • 3- Modify php file to process requests
• Features benefiting from ajax
• Todo

Getting started

First of all, read xajax 10 minutes tutorial.

To use ajax in tiki:

In php file, after including tiki-setup.php:



this will import xajax and declare in global scope $ajaxlib, an instance of TikiAjax, that's an extension of xajax class.

Before calling $smarty->display("tiki.tpl"):



you don't need to worry about assigning getJavaScript() to smarty or any client-side declaration, everything is already handled by tiki.

To declare and register ajax functions in server, create a php file in lib/feature called feature-ajax.php. In this file, declare the functions and register them with $ajaxlib->registerFunction(). If you need a javascript file, create file lib/feature/feature-ajax.js to hold these functions.

Ajax development guidelines

Ajax applications don't work for everybody. It breaks accessibility, don't work with some alternative or old browsers. Considering that, tiki ajax development guidelines aim to:

1. keep it simple to preserve tiki funcionality and layout with and without ajax
2. avoid forking code

1 - Template-based common layout

The look & feel of a page must always be the same with or without ajax, and defined by template. Changing the template should change both modes at once as long as html element ids are preserved.

2 - Load content statically first time

If you are delivering empty containers with smarty and then have a document.onLoad() to load data, then you're likely to be breaking directive #1. Load content as if there was no ajax, and then when user request more content you update html element's properties.

Tutorial - make a region dynamic

1- Identify template component

find in your template the block of code that you want to be dynamic.

cut that code, paste in a new template ($includeFile in this example) and include inside an html element:

2- Change your tpl to use {ajax_href} block in links

Now, edit your template and change links like this:



to



where $includeFile is the template to be loaded, and $elementId is the id of element in which template will be loaded.

3- Modify php file to process requests

in beginning of php file, after tiki-setup.php, put:



and at end, before $smarty->display() or any output, register the templates you want to be loaded dynamically and process requests:



that's all!
<a rel="dofollow" href="http://www.all-auto.ro/piese-auto" title="piese auto ieftine"><img src="http://www.all-auto.ro/images/piese auto" alt="piese auto ieftine" hspace="2" vspace="2" border="0" /></a>

Features benefiting from ajax

• tiki-admin_quicktags.php
• tiki-listpages.php
• Modules
• Messages
• Calendar
• wiki
  • save draft feature

Todo

• remove lib/cpaint and ajax/ after community approval

• reimplement tiki-admin_quicktags.php and tiki-listpages.php without splitting files

• configure a frequence for each module to be dynamically updated

---