Modified so that if ID is passed within a data object then this will …

…be used as the data id if one does not exist. e.g.

new InlineEditor(someObject, {
	'url': 'myurl.php',
	'data': {
		'id': 10
	}
});


The value of the <input> field is given a default value if it exists.


After saving, any JSON result is passed back to the onSuccess method/function.


Added a getValue method.  This retrieves the value of the field and returns it an object, based on the id passed.


Extend the Object method to have a "make" function.  This allows you to pass a key & value and it returns an object with this.  Normally it is not possible to set the key of an object programmatically.

---

InlineEditorGroup.

This object can be used to collect a number of InlineEditors together and retrieve the values for all of the items.  This works very well if you set the url to null and can create a “form” of InlineEditors

It consists of five methods:
InlineEditorGroup.InlineEditor(el, options) – add a new InlineEditor to the grouping.
InlineEditorGroup.Combo(el, options) – add a new InlineEditor.Combo to the grouping.
InlineEditorGroup.Textarea(el, options) – add a new InlineEditor.Textarea to the grouping.
InlineEditorGroup.toObject() – retrieve an object of id: value pairs for all editors within the grouping.
InlineEditorGroup.toQueryString() – retrieve the id, value pairs for all editors within the grouping as a query string.

e.g.

InlineEditorGroup.InlineEditor($('text1'), {url: null, hide_buttons: true, data_id: 'text1'});
InlineEditorGroup.InlineEditor($('text2'), {url: null, hide_buttons: true, data_id: 'text2'});
InlineEditorGroup.Combo($('dropdown'), {url: null, hide_buttons: true, data_id: 'dropdown'});

InlineEditorGroup.toObject();

Would result in:
{
text1: "some value",
text2: "some value",
dropdown: "some value"
}

Source/InlineEditor.js

@@ -40,6 +40,8 @@ var InlineEditor = new Class({
 		this.options.format = this.options.format || this.element.get('data-format');
 		this.options.method = (this.options.method || 'GET').toUpperCase();
 
+		if (this.options.data.id && !this.options.data_id) this.options.data_id = this.options.data.id;
+
 		if(this.element.getFirst() == null) {
 			// only set the current text if there are no children
 			this.current_text = this.element.innerHTML.trim();
@@ -112,6 +114,7 @@ var InlineEditor = new Class({
 	_create_input: function() {
 		return $e('input', {
 			'type':'text',
+			'value': this.current_text ? this.current_text.unescapeHTML() : null,
 			'events': {
 				'keydown': function(e) {
 					// detect the escape key, and use it to cancel the edit
@@ -205,10 +208,12 @@ var InlineEditor = new Class({
 
 	},
 
-	save_complete: function() {
+	save_complete: function(result) {
+		if (result)
+			result = JSON.decode(result);
 		this.edit_form.hide();
 		this.edit_link.show();
-		this._set_link();
+		this._set_link(result);
 	},
 
 	save_failed: function(json_response) {
@@ -223,7 +228,7 @@ var InlineEditor = new Class({
 
 	// we use this as a function to change the current_text
 	// so that it can be overridden easily by subclasses (such as the Combo class)
-	_set_link: function() {
+	_set_link: function(result) {
 		this.current_text = this.edit_input.value.trim();
 
 		if(this.current_text == "") {
@@ -239,7 +244,18 @@ var InlineEditor = new Class({
 
 		}
 
-		this.options.onSuccess(this.current_text);
+		this.options.onSuccess(this.current_text, result);
+	},
+
+	getValue: function() {
+		var value = '';
+		if (this.edit_input.get('tag') === 'select') {
+			value = this.edit_input.getSelected()[0].get('value');
+		} else {
+			value = this.edit_input.get('value').trim();
+		}
+
+		return Object.make(this.options.data_id, value);
 	}
 });
 
@@ -363,3 +379,18 @@ String.implement({
 		return this.replace('&amp;', '&').replace('&lt;', '<').replace('&gt;', '>').replace('&quot;', '"');
 	}
 });
+
+// Returns an object based on a passed key and value.
+//
+// Object.make('myKey', 'myValue')
+//
+// Would return {myKey: myValue}
+Object.extend('make', function(key, value) {
+	if (typeOf(value) == 'string')
+		value = '"' + value + '"'
+	if (typeOf(value) == 'object')
+		value = JSON.encode(value);
+	var temp = '{"' + key + '":' + value + '}';
+
+	return JSON.decode(temp);
+});

Source/InlineEditorGroup.js

@@ -0,0 +1,50 @@
+/*
+---
+description: InlineEditorGroup - Groups together a number of InlineEditors
+
+license: MIT-style
+
+authors:
+- Nathan Reed
+- Pete Allison
+
+requires:
+- core/1.2.4: [Class, Event, Element, Selectors, JSON, Request]
+
+provides:
+- InlineEditorGroup
+- Object.make
+...
+*/
+var InlineEditorGroup = {
+	components: [],
+
+	InlineEditor : function(el, options) {
+		this.components.push(new InlineEditor(el, options));
+	},
+
+	Combo : function(el, options) {
+		this.components.push(new InlineEditor.Combo(el, options));
+	},
+
+	Textarea: function(el, options) {
+		this.components.push(new InlineEditor(el, options))
+	},
+
+	// Retrieves the query string version of the id:value pairs of the grouped
+	// inline editors.
+	toQueryString: function() {
+		return Object.toQueryString(this.toObject());
+	},
+
+	// Retrives and object containing the id:value pairs of the grouped
+	// inline editors.
+	toObject: function() {
+		var result = {}
+		this.components.each(function(editor) {
+			result = Object.merge(result, editor.getValue());
+		});
+
+		return result;
+	}
+};