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: 18 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(){ makeEditable(idName1); makeEditable(idName2); } 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){ Element.hide(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'); }else{ 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){ Element.remove('_editor');; 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.'; cleanUp(obj); } 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; }