This plugin works on every page solo, and on every page but firefox 2
on a page with lots of jquery going on on it. With firefox 2, the
double click event fires, but the keyups dont fire and the input does
not focus, then select. This is really bugging me and i cannot figure
it out.
(function($) {
$.fn.EditInPlace = function (options) {
// Invalid Element
if (this.length == 0) {
return false;
};
// Edited Yet?
var editedYet = 0;
var beingEdited = 0;
// Extendable Settings
var settings = {
url : null,
name : null,
id : null,
type : 'input',
needURL : 0,
oldHTML : null
};
// Allow Plugin Extension
if (options) {
jQuery.extend(settings, options);
};
// The INPUT Container DIV
var element = $(this);
// Unbind all events attached to this
element.unbind();
// Submit Element
element.type = "button";
// Current Value
unedited = element.html();
// Remove default input border
element.css("border", "none");
// Edit on double click
element.click(function() {
// Grab the current input value
val = element.html();
// Red Border
element.css("border", "1px solid red");
// Replace with input
if (beingEdited == 0) {
element.html('<input type="text" value="' + val
+ '" />');
}
beingEdited = 1;
// Input Element
inputElement = element.find("input");
// Focus element, then select text
inputElement.focus();
inputElement.select();
})
// Stop Form
$('form').submit(function(){
return false;
});
// IsDefined?
function isDefined(variable) {
return (typeof(window[variable]) == "undefined")?
false: true;
}
// Only onBlur if actively editing
if (isDefined("inputElement")) {
inputElement.blur(function() {
if (settings.changed == 0) {
cancel();
}
});
}
// Typing
element.keyup(function(event) {
// Keycode INT
var keycode = event.which;
// ESC
if (keycode == 27) {
cancel();
}
// Enter
else if (keycode == 13) {
element.css("border", "none");
newVal = element.find("input").val();
element.find("input").remove();
element.html(newVal);
beingEdited = 0;
}
return false;
});
// Cancel
function cancel() {
element.css("border", "none");
newVal = element.find("input").val();
element.find("input").remove();
element.html(unedited);
beingEdited = 0;
}
}
}) (jQuery);
// Attach events to our class :p
$(document).ready(function() {
$(".EditInPlace").EditInPlace();
});
