Document Actions
Mason AJAX
We've been updating our webpages to become more "2.0". The GrokThis.net webpage now has keyword-based navigation, and the VPS Village pages are entirely AJAX-enabled.
Quite simply, we're using Scriptalicious and Prototype for most of it. There is very little new backend code. Its quite simply a matter of removing the templates from the code. Out backend layout something like:
comp_root/Assume comp_root/autohandler contains:
|
|- autohandler - site template
|- subdir/ - subdirectory
|
|- autohandler
|- index.html
|- index_plain.html
<html><body>Then comp_root/subdir/autohandler contains:
<h1>GrokThis</h1>
<% $m->call_next %>
<div id="footer">Copyright notice</div>
</body></html>
<h2>Sub-Directory content</h2>Now, if comp_root/subdir/index.html contains:
<div id="content">
<% $m->call_next %>
</div>
<h1>hello world</h1>Loading http://example.net/subdir/ will render:
Now, here is the AJAX rub... we create index_plain.html which contains:GrokThis
Sub-Directory content
hello world
<!-- Might want to add %ARGS here, or modify arguments as needed -->When you load http://example.net/subdir/index_plain.html, you will see simply:
<& index.html &>
<%flags>
inherit=>undef
</%flags>
We will now copy the subdir directory to subdir2: cp -R subdir subdir2 Then, modify subdir2/index.html:hello world
<p>this is the subdir2 directory!</p>All one needs to do then, is modify comp_root/autohandler:
<html>The content div will now update automatically, and it will fail-over for older browsers! Mason's idea of components really works well with the AJAX concept and there are all kinds of things you can do with it, and in much prettier ways than this. This example is meant to be short and easy... and very important, simple for retrofitting an existing site. Have fun, and take care!
<head><script language="javascript" src="prototype.js"></script></head>
<body>
<script>
function update(contentvar, dirvar) {
new Ajax.Updater(contentvar, dirvar, { method: 'get' });
}
</script>
<h1>GrokThis</h1>
<a href="/subdir" onclick="update('content','/subdir1'); return false;">
Sub-Dir #1
</a>
<a href="/subdir1" onclick="update('content','/subdir1'); return false;">
Sub-Dir #2
</a>
<% $m->call_next %>
<div id="footer">Copyright notice</div>
</body></html>
Forgot your password?
New user?