Interacting with Tooltips and Previews - Live Echo Preview (
Page 4 of 4 )
A live, echoed preview is relatively simple to set up. You begin by capturing the keyup event in either a form textarea or input element, and take all of the text and reflect it in an associated div element through the innerHTML property.
In the code, you do need to adjust the text, replacing the hard carriage returns with a break element, br. This keeps the text more or less in sync with the input.
Example 4-9 includes a complete application that uses live preview. Since the example is so small, the stylesheet and script are both included within the web page. The previewed text isn't modified other than transforming the carriage break into a br. If you want to modify the text preview in other ways, such as stripping HTML tags to reflect what the comment will look like published, you'll need to adjust the script accordingly. Remember, though, to keep the preview simple--the function to live preview the input is called whenever a keyup event happens in the form element.
Example 4-9. Simple live preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Live Preview</title>
<style type="text/css">
#preview
{
background-color: #ccc;
margin: 20px;
padding: 10px;
width: 500px;
}
input
{
margin-right: 10px;
}
</style>
<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript">
//<![CDATA[
manageEvent(window,"load",function() {
aaManageEvent(document.getElementById('comment'),"keyup",echoPreview)});
// echo the keypresses
function echoPreview(evnt) {
var commentText = document.getElementById("comment").value;
modText = commentText.split(/\n/).join("<br />");
var previewElem = document.getElementById("preview");
previewElem.innerHTML = modText;
}
//]]>
</script>
</head>
<body>
<form action="preview.htm" method="post">
<div>
<textarea id="comment" cols=50 rows=10></textarea>
<br />
<input type="button" value="Preview" />
<input type="submit" value="Save" />
</div>
</form>
<div id="preview">
</div>
</body>
</html>
Whatever is typed into the textarea is reflected in the preview element.
The form also has Preview and Save buttons, both of which go to the preview.php page. From there, a user can save the comment or click the Back button to return to the form and continue editing. Neither requires script. Later on in this chapter, we'll see how we can submit the form and display the new comment, all without leaving the page.
There's one major problem with live preview, and that's what happens when the page is served with an XHTML MIME type. The way that browsers implement innerHTML differs among applications, though most do support some version of innerHTML. However, what happens during live preview if you begin to add an XHTML tag differs dramatically between browsers. In Firefox 2.x and up, the incomplete tag throws dozens of errors until it's completed, all of them saying the text is not well-formed XML. In Opera, however, the browser treats the incomplete tag as escaped content until the tag is closed, in which case, it then treats it as XHTML.
A workaround is to escape HTML characters, <, >, and &, replacing the modText generation with the following:
modText = commentText.replace(/&/g, '&').replace(/>/g,
> '>').replace(/</g, '<').split(/\n/).join("<br/>");
This disables the links and other HTML. In nontrusted situations, you may want to consider completely stripping out all HTML.
The differences in behavior between browsers is significant enough that you'll probably want to use live preview only with pages served as HTML, at least until the new HTML 5.0 standard comes out, which should clarify how a document fragment is managed. In the meantime, if you want XHTML and an in-page preview, I'd suggest you use the "Ajax" version of comment preview.
There are many implementations of live preview online, but I first saw it via a Wordpress plug-in created by Chris Davis at http://www. chrisjdavis.org.
Please check back next week for the conclusion to this article.
/ 3 
