Made changes to the Role View to facilitate the use of the ID-based Requests.
/** jquery-in-place-edit plugin** Copyright (c) 2008 Christian Hellsten** Plugin homepage:* http://aktagon.com/projects/jquery/in-place-edit/* http://github.com/christianhellsten/jquery-in-place-edit/** Examples:* http://aktagon.com/projects/jquery/in-place-edit/examples/** Repository:* git://github.com/christianhellsten/jquery-in-place-edit.git** Version 1.0.2** Tested with:* Windows: Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7* Linux: Firefox 2, Firefox 3, Opera* Mac: Firefox 2, Firefox 3, Opera*** Licensed under the MIT license:* http://www.opensource.org/licenses/mit-license.php**/(function($) { $.fn.inPlaceEdit = function(options) { // Add click handler to all matching elements return this.each(function() { // Use default options, if necessary var settings = $.extend({}, $.fn.inPlaceEdit.defaults, options); var element = $(this); element.click(function() { element.data('skipBlur', false) // Prevent multiple clicks, and check if inplace editing is disabled if (element.hasClass("editing") || element.hasClass("disabled")) { return; } element.addClass("editing"); element.old_value = element.html(); // Store old HTML so we can revert to it later if(typeof(settings.html) == 'string') { // There are two types of form templates: strings and DOM elements element.html(settings.html); // Replace current HTML with given HTML } else { element.html(''); // Replace current HTML with given object's HTML var form_template = settings.html.children(':first').clone(true); form_template.appendTo(element); // Clone event handlers too } $('.field', element).val(element.old_value); // Set field value to old HTML $('.field', element).focus(); // Set focus to input field $('.field', element).select(); // Select all text in field // On blur: cancel action if(settings.onBlurDisabled == false) { $('.field', element).blur(function() { // Prevent cancel from being triggered when clicking Save & Cancel button var skipBlur = element.data('skipBlur') if(skipBlur != true) { element.timeout = setTimeout(cancel, 50); } element.data('skipBlur', false) }); } // On save: revert to old HTML and submit $('.save-button', element).click(function() { return submit(); }); $('.save-button', element).mousedown(function() { element.data('skipBlur', true) }); $('.cancel-button', element).mousedown(function() { element.data('skipBlur', true) }); // On cancel: revert to old HTML $('.cancel-button', element).click(function() { return cancel(); }); // On keyup: submit (ESC) or cancel (enter) if(settings.onKeyupDisabled == false) { $('.field', element).keyup(function(event) { var keycode = event.which; var type = this.tagName.toLowerCase(); if(keycode == 27 && settings.escapeKeyDisabled == false) { // escape return cancel(); } else if(keycode == 13) { // enter // Don't submit on enter if this is a textarea if(type != "textarea") { return submit(); } } return true; }); } }); // Add hover class on mouseover element.mouseover(function() { element.addClass("hover"); }); // Remove hover class on mouseout element.mouseout(function() { element.removeClass("hover"); }); function cancel() { element.html(element.old_value); element.removeClass("hover editing"); if(options.cancel) { options.cancel.apply(element, [element]); } return false; // Stop propagation }; function submit() { clearTimeout(element.timeout); var id = element.attr('id'); var value = $('.field', element).val(); if(options.submit) { options.submit.apply(element, [element, id, value, element.old_value]); } element.removeClass("hover editing"); element.html(value); return false; // Stop propagation }; }); }; // Default (overridable) settings $.fn.inPlaceEdit.defaults = { onBlurDisabled : false, onKeyupDisabled : false, escapeKeyDisabled : false, html : ' \ <div class="inplace-edit"> \ <input type="text" value="" class="field" /> \ <div class="buttons"> \ <input type="button" value="Save" class="save-button" /> \ <input type="button" value="Cancel" class="cancel-button" /> \ </div> \ </div>' };})(jQuery);