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
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);
<html>
<head>
<script type="text/javascript" src="/path/to/MochiKit.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<ul>
<li><a class="async" href="text1.txt">text 1</a></li>
<li><a class="async" href="text2.txt">text 2</a></li>
<li><a class="async" href="text3.txt">text 3</a></li>
<li><a class="async" href="notthere.txt">not there</a></li>
</ul>
<div id="infotarget">
</div>
</body>
</html>
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
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);
<html>
<head>
<script type="text/javascript" src="/path/to/MochiKit.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<ul>
<li><a class="async" href="text1.txt">text 1</a></li>
<li><a class="async" href="text2.txt">text 2</a></li>
<li><a class="async" href="text3.txt">text 3</a></li>
<li><a class="async" href="notthere.txt">not there</a></li>
</ul>
<div id="infotarget">
</div>
</body>
</html>
// 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:
<form id="formID" action="url/to/load.html" onsubmit="return submitting(this);"> ...
