= Getting started with AJAX =
The following example shows, how to override normal link behaviour. When a
link is clicked, the content of the document behind the link is not replacing
the page, but is shown inside the 'infotarget' div.
If the JavaScript does not work, the behaviour would be exactly as expected.
Please note that the html body does not contain any javascript hook.
'''myscript.js'''
{{{
#!c
var clicklink = function (url) {
return function (evt) {
// prevent the normal 'click' action for a link
evt.stopPropagation();
evt.preventDefault();
var doReplace = function (req) {
$('infotarget').innerHTML = req.responseText;
};
var doReplaceError = function () {
$('infotarget').innerHTML = 'Error!!!';
};
var res = MochiKit.Async.doSimpleXMLHttpRequest(url);
res.addCallbacks(doReplace,doReplaceError);
}
};
var convertA = function (linkelement) {
MochiKit.DOM.addToCallStack(linkelement,'onclick',clicklink(linkelement.href));
};
var initpage = function () {
MochiKit.Base.map(convertA,MochiKit.DOM.getElementsByTagAndClassName('a','async'));
};
MochiKit.DOM.addLoadEvent(initpage);
}}}
{{{
}}}
The example was tested with Firefox 1.0.6 on Linux.
In order to run this example, please create the files 'text1.txt','text2.txt' and
'text3.txt' yourself and place it in the same directory than the html file and
the 'myscript.js' file.
Note: This example errors on "evt.stopPropagation();" using IE 6.
------------------------------------------------------------------------------
IE 6 evt.stopPropagation():
{{{
if (evt && evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
} else if (typeof(event) != 'undefined') {
event.cancelBubble = false;
event.returnValue = false;
}
}}}
------------------------------------
Working IE Example:
'''myscript.js'''
{{{
#!c
var clicklink = function (url) {
return function (evt) {
// prevent the normal 'click' action for a link
if (evt && evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
} else if (typeof(event) != 'undefined') {
event.cancelBubble = false;
event.returnValue = false;
}
var doReplace = function (req) {
$('infotarget').innerHTML = req.responseText;
};
var doReplaceError = function () {
$('infotarget').innerHTML = 'Error!!!';
};
var res = MochiKit.Async.doSimpleXMLHttpRequest(url);
res.addCallbacks(doReplace,doReplaceError);
}
};
var convertA = function (linkelement) {
MochiKit.DOM.addToCallStack(linkelement,'onclick',clicklink(linkelement.href));
};
var initpage = function () {
MochiKit.Base.map(convertA,MochiKit.DOM.getElementsByTagAndClassName('a','async'));
};
MochiKit.DOM.addLoadEvent(initpage);
}}}
{{{
}}}
----------------------------------------------------
// Ajax form submit and render
{{{
function submitting(form)
{
var doReplaceForm = function (req) {
$('content').innerHTML = req.responseText;;
};
var doReplaceErrorForm = function () {
$('content').innerHTML = 'Error!!!';
};
var toSend = []
for( var i = 0; i < form.elements.length; i++)
toSend[form.elements[i].name] = form.elements[i].value;
var res = doSimpleXMLHttpRequest(form.action, toSend);
res.addCallbacks(doReplaceForm,doReplaceErrorForm);
return false;
}
}}}
in form:
{{{