InlineEditor v0.4 Mack Pexton July 31, 2006

Introduction
Download
Configuration
Top

Introduction

Here are two quick examples to demonstrate the InlineEditor.

My sample content to be edited. Click on me to edit me.

This is some text that can be edited.

Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

The InlineEditor is created by calling the JavaScript edit_inline() function. It changes a document element (e.g. a div tag) into an edit form allowing the user to change its contents with out refreshing the page. Upon saving (or canceling) the changes, the edit form changes back to the original display.

This version uses iframes to display forms and to communicate to the server instead of the more modern methods of using XMLHttpRequest/ActiveXObject. It initially needed to work with the dreaded Internet Explorer 6 browser. 

Usage:
	<button onclick="edit_inline(edit_element,field_name,url,this)">Edit</button>
	<div id="edit_element">some content</div>

Arguments:
	edit_element	-- either an document element or element's id that is to be edited.
	field_name	-- the name of the input field posted (sent to server program)
	url		-- the editor form's action property, the server program
			   saving the edits.
	button 		-- is an optional element or element id of an "Edit" button
			   that triggers the editor.

The edit_inline() program can be used as an onclick handler attached to the element to be edited or it can be invoked from a button.

A parameter named "return_func" is added to the url identifying the JavaScript function to call from the server's returned page. The server adds two arguments to the function before executing it: the first is a true/false status whether the input was saved or not, and the second is an optional error messages to display upon return.

Edit form appearance can be customized by assigning your style settings to InlineEditor.CSS.

Note for Internet Explorer usage: BEWARE IE removes newlines from the HTML source when it renders a document UNLESS the source is contained within <pre></pre> tags. Other browsers are not as stupid.

InlineEditor is very easy to set up. First, include the JavaScript code in the header section between the <HEAD> and </HEAD> tags.

  <script src="InlineEditor.js" type="text/javascript"></script>

Next, set up a button or an onclick event handler that calls edit_inline() like above.

Server-side Program

The inline editor requires a cooperating server-side program to save the changes. A JavaScript function to call upon return to the page with the inline editor is passed to the server program in the return_func parameter. It is automatically added to the url you provide to edit_inline().

The server-side program should call the return function like this PHP fragment:

$save = $_REQUEST['save']'
$return_func = $_REQUEST['return_func']'

if ($save) {
	// ... Save data here ...

	// InlineEditor return
	if ($return_func) {
		// Invoke return function upon return.
		if ($error_msg) {
			$msg = $error_msg;
			$status = 0;
		}
		else {
			$msg = $status_msg;
			$status = 1;
		}

		print <<< EOF
<html>
<head>
<script type="text/javascript">parent.$return_func($status,'$msg');</script>
</head>
<body></body>
</html>
EOF;
		exit;
	}
}
Top

Download

A zip file of this document and the the InlineEditor JavaScript source code can be downloaded here: InlineEditor-0.4.zip

Top

Configuration

There are several configuration settings that alter the behavior of InlineEditor. The all have the prefix InlineEditor. in their names. Following is a list of the configuration variables with their initial values.

InlineEditor.CSS = '';			// optional styles for edit form (surround with <style> tags).
InlineEditor.HideEditButton = false;	// set to true to hide/show edit button when editor is active
InlineEditor.DisableEditButton = true;	// set to true to disable/enable edit button when editor is active
InlineEditor.ButtonHeight = 32;		// extra height added to display for buttons
InlineEditor.LineHeight = 16;		// editor line height (easy lookup to calc textarea height)
InlineEditor.MinHeight = 16;		// minimum height of textarea (pixels)
InlineEditor.MaxHeight = 550;		// maximum height of textarea (pixels)
InlineEditor.ErrorFunc = function(message) { alert(message); }
Top