/* * Another In Place Editor - a jQuery edit in place plugin * * Copyright (c) 2009 Dave Hauenstein * * License: * This source file is subject to the BSD license bundled with this package. * Available online: {@link http://www.opensource.org/licenses/bsd-license.php} * If you did not receive a copy of the license, and are unable to obtain it, * email davehauenstein@gmail.com, * and I will send you a copy. * * Project home: * http://code.google.com/p/jquery-in-place-editor/ * */ /* * Version 1.0.2 * * bg_out (string) default: transparent hex code of background color on restore from hover * bg_over (string) default: #ffc hex code of background color on hover * callback (function) default: null function to be called when editing is complete; cancels ajax submission to the url param * cancel_button (string) default: image button tag to use as “Cancel” button * default_text (string) default: “(Click here to add text)” text to show up if the element that has this functionality is empty * element_id (string) default: element_id name of parameter holding element_id * error (function) this function gets called if server responds with an error * field_type (string) “text”, “textarea”, or “select”; default: “text” The type of form field that will appear on instantiation * on_blur (string) “save” or null; default: “save” what to do on blur; will be overridden if $param show_buttons is true * original_html (string) default: original_html name of parameter holding original_html * params (string) example: first_name=dave&last_name=hauenstein paramters sent via the post request to the server * save_button (string) default: image button tag to use as “Save” button * saving_image (string) default: uses saving text specify an image location instead of text while server is saving * saving_text (string) default: “Saving…” text to be used when server is saving information * select_options (string) comma delimited list of options if field_type is set to select * select_text (string)default text to show up in select box * show_buttons (boolean) default: false will show the buttons: cancel or save; will automatically cancel out the onBlur functionality * success (function) default: null this function gets called if server responds with a success * textarea_cols (integer) default: 25 set cols attribute of textarea, if field_type is set to textarea * textarea_rows (integer) default: 10 set rows attribute of textarea, if field_type is set to textarea * update_value (string) default: update_value name of parameter holding update_value * url (string) POST URL to send edited content * value_required (string) default: false if set to true, the element will not be saved unless a value is entered * */ jQuery.fn.editInPlace = function(options) { /* DEFINE THE DEFAULT SETTINGS, SWITCH THEM WITH THE OPTIONS USER PROVIDES */ var settings = { url: "", params: "", field_type: "text", select_options: "", textarea_cols: "25", textarea_rows: "10", bg_over: "#ffc", bg_out: "transparent", saving_text: "Saving...", saving_image: "", default_text: "(Click here to add text)", select_text: "Choose new value", value_required: null, element_id: "element_id", update_value: "update_value", original_html: "original_html", save_button: '', cancel_button: '', show_buttons: false, on_blur: "save", callback: null, callbackShowErrors: true, success: null, error: function(request){ alert("Failed to save value: " + request.responseText || 'Unspecified Error'); } }; if(options) { jQuery.extend(settings, options); } /* preload the loading icon if it exists */ if(settings.saving_image != ""){ var loading_image = new Image(); loading_image.src = settings.saving_image; } /* THIS FUNCTION WILL TRIM WHITESPACE FROM BEFORE/AFTER A STRING */ String.prototype.trim = function() { return this.replace(/^\s+/, '') .replace(/\s+$/, ''); }; /* THIS FUNCTION WILL ESCAPE ANY HTML ENTITIES SO "Quoted Values" work */ String.prototype.escape_html = function() { return this.replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """); }; /* CREATE THE INPLACE EDITOR */ return this.each(function(){ if(jQuery(this).html() == "") jQuery(this).html(settings.default_text); var editing = false; //save the original element - for change of scope var original_element = jQuery(this); var click_count = 0; jQuery(this) .mouseover(function(){ jQuery(this).css("background", settings.bg_over); }) .mouseout(function(){ jQuery(this).css("background", settings.bg_out); }) .click(function(){ click_count++; if(!editing) { editing = true; //save original text - for cancellation functionality var original_html = jQuery(this).html(); var buttons_code = (settings.show_buttons) ? settings.save_button + ' ' + settings.cancel_button : ''; //if html is our default text, clear it out to prevent saving accidentally if (original_html == settings.default_text) jQuery(this).html(''); if (settings.field_type == "textarea") { var use_field_type = ''; } else if(settings.field_type == "text") { var use_field_type = ''; } else if(settings.field_type == "select") { var optionsArray = settings.select_options.split(','); var use_field_type = ''; } /* insert the new in place form after the element they click, then empty out the original element */ jQuery(this).html('
'); }/* END- if(!editing) -END */ if(click_count == 1) { function cancelAction() { editing = false; click_count = 0; /* put the original background color in */ original_element.css("background", settings.bg_out); /* put back the original text */ original_element.html(original_html); return false; } function saveAction() { /* put the original background color in */ original_element.css("background", settings.bg_out); var this_elem = jQuery(this); var new_html = (this_elem.is('form')) ? this_elem.children(0).val() : this_elem.parent().children(0).val(); /* set saving message */ if(settings.saving_image != ""){ var saving_message = '