The Ajax Anchor Component allows you to quickly create ajax applications with a minimal amount of code. When the component is initialized it looks for anchor elements with rel attributes starting with a hash. Like this:
When the script finds an anchor like this it attaches an onclick event that uses an ajax call to open the page and place the response text into the innerHTML of a div with an id that matches the rel attribute.
Here is an implementation of the component in Prototype:
<html>
<head>
<title>Ajax Anchor Demo in Prototype</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
margin: 0 0;
}
div {
margin: 0 auto;
width: 600px;
}
#loadingmessage {
position:absolute;
background-color: maroon;
color: white;
padding: 4px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<span id="loadingmessage">Loading…</span>
<div><h1>Ajax Anchor Demo in Prototype</h1></div>
<div><a href="about.htm" rel="#content">about</a> | <a href="links.htm" rel="#content">links</a> | <a href="contact.htm" rel="#content">contact</a></div>
<div id="content">
Default Content
</div>
<br />
<br />
<br />
<div>Footer</div>
<script type="application/javascript" src="prototype.js"></script>
<script type="application/javascript">
// Base components object
components = {
init: function() {
components.ajaxanchor.init();
// Register global ajax listeners
Ajax.Responders.register({
onCreate: function() {
// show loading message
$("loadingmessage").setStyle({display: "block"});
},
onComplete: function() {
// Hide loading message
$("loadingmessage").setStyle({display: "none"});
},
onException: function(oXHR, exception) {
alert("An exception occurred: " + exception.name + "\n" + exception.message);
},
onFailure: function(oXHR, oJson) {
alert("An error occurred: " + oXHR.statusText);
}
});
}
};
// Ajax Anchor
// A prototye/scriptaculous version of the Ajax Anchor component
components.ajaxanchor = {
init : function() {
// Attach an event to each link with a rel tag to open the href in an element with an id that macht
$$(‘a’).each(function(thisElement){
// If this anchor has a rel tag and it’s rel tag starts with a hash.
if (thisElement.rel != "" && thisElement.rel.match(/^#/) && thisElement.href != "") {
Event.observe(thisElement, ‘click’, function (evt) {
// show loading message
$("loadingmessage").setStyle({display: "block"});
// Get the element that generated the event
var eventElement = Event.element(evt);
var contentArea = eventElement.rel.replace(/#/,”);
// Perform an ajax call that updates an element based on eventElements href and rel tag
new Ajax.Updater(contentArea, eventElement.href, {evalScripts: true, method: ‘get’});
// Stop the event (equivelent to return false.)
Event.stop(evt);
});
}
});
}
};
Event.observe(window, ‘load’, function() {
// Initialize our components
components.init();
// hide the loading message
// this should always be the last thing we do.
$("loadingmessage").setStyle({display: "none"});
});
</script>
</body>
</html>
Notice how I’m using Ajax.Responders.register to add global error handling and a google style loading message. The links page has a “site map” with links that get loaded into the content div. You can see a working demo here.
I’ve zipped all the files up, you can download them here.
Tags: AJAX, HTML, JavaScript, Prototype
[...] For Geniuses Tired of being called a dummy? « Ajax Anchor Component for Prototype [...]