API & Options

Here is a list of all valid options and event hooks that can be used during initialization of liveeditor().

Example:

$('.editing1').liveeditor({
    editorCss: 'editor1', 
    onChanged: function(){ 
        alert('The first liveeditor() instance changed one of its fields.'); 
   }
});
$('.editing2').liveeditor({
    editorCss: 'editor2', 
    onChanged: function(){ 
        alert('The second liveeditor() instance changed one of its fields.'); 
    }
});

##Options You can pass options as name/value pairs to the liveeditor() function to modify its behaviour.

Name	default	Description
fillControls	false	Tells LiveEditor to update the html for all checkboxes and comboboxes based on their values.
changedCss	liveeditor-changed	Class name that is added to input fields automatically by LiveEditor when they are in a changed state. Can be changed or cleared if unused.
editingCss		Class name that is added to the container of visible editors. Useful if you want need to change the containers behaviour during editing, for example change the padding.
editorCss		Class name that is added to any visible editors. Useful if you want editors from different LiveEditor instances to look different.
combobox.css	combo	Class name LiveEditor searches for when determining that a field shall be edited with a combobox editor.
checkbox.css	checkbox	Class name LiveEditor searches for when determining that a field shall be edited with a checkbox editor.
checkbox.checked.value	true	The value string LiveEditor associates with a checked checkbox.
checkbox.checked.html	X	The html LiveEditor displays when a checked checkbox editor is closed.
checkbox.unchecked.value	false	The value string LiveEditor associates with an unchecked checkbox.
checkbox.unchecked.html		The html LiveEditor displays when an unchecked checkbox editor is closed.

##Events You can add event hooks to the liveeditor() function to modify how LiveEditor handles different situations.

Event	Description	Sample
onGetValue	Called before the value of a field is retrieved. Implement this event and return a non-null value if a field stores it value in a non-standard way. This event should always have a corresponding implementation in onSetValue.	function(container){ if(container.hasClass('special')) return container.attr('specialValue'); }
onSetValue	Called before the value of an editor is written back to its field. Implement this event and return a boolean to customize how an editors value is persisted. Return true if the value has been saved and the editor can be closed, or false to cancel closing of the editor and abort. This event should have a corresponding implementation in onGetValue if it ever returns true.	function(container, value, html){ if(container.hasClass('special')){ container.attr('specialValue', value); container.html(html); return true; } }
onChanged	Called after an editor has been closed if the fields value has been updated. This event is called even if the fields value is restored to its original.	function(){ var row = $(this).closest('tr'); if($('.edit.changed', row).length) row.addClass('rowChanged') else row.removeClass('rowChanged'); }
onEditorCreating	Called when an editor needs to be created for a field. Return non-null from this event to implement a customized editor for some container types.
onEditorOptions	Called when a combobox editor is created, to fill it with its options. This event should be implemented whenever comboboxes are used to set their valid options.	function(){ var container=$(this); return '<option value="m">Male</option><option value="f">Female</option><option value="other">Other/Undisclosed</option>'; }
onEditorOpened	Called after an editor is displayed. This event can be used to set late-time bindings of an editor, for instance binding a datepicker to certain textbox editors.	function(editor){ var container = $(this); if(container.hasClass('date')) editor.datepicker({ }); }
onEditorFocused	Called when an editor receives focus and becomes "sticky", i.e. no longer will close as soon as the mouse is moved away from the editor area.
onEditorClosed	Called after an editor has been closed.

##Public functions There are a number of public functions that can be called on LiveEditor itself or a selection of liveeditor-enabled fields.

Function	Description	Sample
closeEditor(selector)	Closes all open editors in the selector. Always call this method before saving changes to ensure all values are committed.	$.liveeditor.closeEditor($('.editing1'));
disable(field)	Disables editing of a liveeditor enabled field, temporarily turning it into read-only.	$.liveeditor.disable($('#genderField'));
enable(field)	Enables liveeditor for a previously disabled field.	$.liveeditor.enable($('#genderField'));
get(selector)	Retrieves values of all fields in a selector. The values are returned as an array except when exactly one value was found.	$.liveeditor.get($('#genderField'));
reset(selector)	Clears the changed flag for all fields in the selector and marks their current values as original. Call this method after saving changes to correctly track further changes of the saved fields.	$.liveeditor.reset($('.editing1'));
serialize(selector, namesSelector)	Serializes all liveeditor fields in a selector to a postable string, just like $.serialize() works on forms. Any control not registered to liveeditor are ignored. Liveeditor-fields without name attribute are also ignored. Unlike $.serialize() this function includes unchecked checkboxes for now. This may change in the future. For the special case of serializing a single row in a liveeditor table a second selector with headers can be included, in which case the name will be taken from the column header if it is not found on the field itself.	$.liveeditor.serialize($('.editing1')); $.liveeditor.serialize(   $('#editTable tbody tr:first-child td'),   $('#editTable thead tr th') );
set(selector, value, html)	Writes a value to all fields in a selector, as if the user had updated the fields using an editor. An html value can optionally be provided for checkboxes or comboboxes.	$.liveeditor.set($('#genderField'), true, 'X');