PHP Classes

File: editinplace.js

Recommend this page to a friend!
  Classes of Er. Rochak Chauhan  >  AJAX Edit In Place  >  editinplace.js  >  Download  
File: editinplace.js
Role: Auxiliary data
Content type: text/plain
Description: Javascript File
Class: AJAX Edit In Place
Edit and save a paragraph of text in an HTML page
Author: By
Last change: Resolved Issue with multiple files.
Date: 16 years ago
Size: 2,753 bytes


Class file image Download
var url = 'edit.php'; // The file on the server, which saves the edited text 
var idName1 = 'desc'; // This ID should be same as $idName1 in example.php
var idName2 = 'desc2'; // This ID should be same as $idName2 in example.php

Event.observe(window, 'load', init, false);

function init(){

function makeEditable(id){
	Event.observe(id, 'click', function(){edit($(id))}, false);
	Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
	Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);

function edit(obj){
	var textarea = '<div id="''_editor"><textarea id="''_edit" name="''" rows="4" cols="60">'+trim(obj.innerHTML)+'</textarea>';
	var button	 = '<div style="align:center;"><input id="''_save" type="button" value="SAVE" /> OR <input id="''_cancel" type="button" value="CANCEL" /></div></div>';
	new Insertion.After(obj, textarea+button);	
	Event.observe('_save', 'click', function(){saveChanges(obj)}, false);
	Event.observe('_cancel', 'click', function(){cleanUp(obj)}, false);

function showAsEditable(obj, clear){
	if (!clear){
		Element.addClassName(obj, 'editable');
		Element.removeClassName(obj, 'editable');

function saveChanges(obj){
	var new_content	=  escape($F('_edit'));

	obj.innerHTML	= "Saving...";
	cleanUp(obj, true);

	var success	= function(t){editComplete(t, obj);}
	var failure	= function(t){editFailed(t, obj);}

	var pars = 'id=''&content='+new_content;
	var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});


function cleanUp(obj, keepEditable){
	if (!keepEditable) showAsEditable(obj, true);

function editComplete(t, obj){
	obj.innerHTML	= t.responseText;
	showAsEditable(obj, true);

function editFailed(t, obj){
	obj.innerHTML	= 'Sorry, the update failed.';

function trim(inputString) {

   if (typeof inputString != "string") { return inputString; }
   var retValue = inputString;
   var ch = retValue.substring(0, 1);
   while (ch == " ") {
      retValue = retValue.substring(1, retValue.length);
      ch = retValue.substring(0, 1);
   ch = retValue.substring(retValue.length-1, retValue.length);
   while (ch == " ") {
      retValue = retValue.substring(0, retValue.length-1);
      ch = retValue.substring(retValue.length-1, retValue.length);
   while (retValue.indexOf("  ") != -1) {
      retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length); 
   return retValue;
For more information send a message to info at phpclasses dot org.