prototype.js
The core component of both the live search and the instant preview is prototype.js, an excellent javascript library for easy Ajax development. If you have some coding experience you'll be surprised how easy this library works. It took me half an hour of studying this excellent developer notes page to get things going. My first test was the little calculator in this earlier posting. All you have to do is include it in the head section of any page that contains Ajax functionality:
<script src="/weblog/ajax/dist/prototype.js" type="text/javascript"></script>
The instant preview php script
For the instant preview functionality I wrote a small PHP script that outputs a comment box like the ones below all my postings. I won't discuss the whole thing here because it's rather specific to my situation on this site. The script accepts several post variables:
$_POST["email"]
$_POST["url"]
$_POST["author"]
$_POST["comment"]
It will output a chunk of HTML containing one formatted comment box. In my case it also applies Textile to the comment and some addditional formatting which is also done in real comments. The script is called preview.php. You can write any way you like as long as the output resembles a real comment entry and the script accepts the above mentioned POST variables.
Javascript
Then there's a piece of javascript. Let's have a look:
function doPreview() {
var url = 'http://www.i-marco.nl/weblog/ajax/preview.php';
// Start i-marco.nl specific even-odd stuff for alternating
// comment boxes
var type = document.getElementById('evenodd');
var evenodd = type.value;
if(evenodd == 'none') {
evenodd = 'odd';
}
else {
if (evenodd == 'even') {
evenodd = 'odd';
}
else {
evenodd = 'even';
}
}
// end i-marco.nl specific stuff
// parameters to POST to preview.php
var pars = 'author=' +
$F('postauthor') +
'&evenodd=' +
evenodd +
'&url=' +
$F('url') +
'&email=' +
$F('email') +
'&comment=' +
$F('comment');
// creating the Ajax.Updater automatigically updates
// the div called 'postpreview' (it's innerHTML)
var myAjax = new Ajax.Updater('postpreview',
url,
{method: 'post', parameters: pars});
theButton = document.getElementById('previewbutton');
theButton.value = 'Reload Preview';
return false;
}
As you can see the library takes care of many things. We can access form elements easily by simply writing $F('element_id'). Great stuff. More important, there's the Ajax.updater which automagically updates the HTML within any div just by using it's ID. In this case the div's ID is postpreview. It's already present in my comment form with nothing in it. Therefore we don't see a thing until we hit the Instant Preview button which calls the above function doPreview(). Here's a bit of HTML from my comment form:
Putting things together in the HTML
<!-- empty div to hold the instant preview -->
<div id="postpreview"></div>
...
...
...
<!-- in the form: -->
<input type="submit" name="preview" id="previewbutton"
value="Preview Comment" class="button" onclick="return doPreview();"/>
You might wonder what the odd-even stuff means you see in the code. This is very specific to my situation since I use two different looking alternating comment boxes. On most sites this is irrelevant.
That's all there's to it. A real instant preview! Now go and type a comment, preview it until it's exactly the way you want it and let me know what you think!
Want more? Read part II about the live search!
