bubble()

Since: Editor 1.3

Activate bubble editing.
Please note - this property requires the Editor extension for DataTables.

Description

Editor's bubble editing mode is designed for rapid editing for single, or a small number number of fields, very similar to the inline() editing option, but displayed floating over the table, rather than disrupting the flow of the table by inserted elements which might cause the display to change, particularly if you are using a complex field such as a WYSIWYG input.

Bubble editing provides all of the standard form options that Editor's main editing forms also offer through the form-options configuration object.

Type

`bubble( nodes [, fieldNames ] [, show ] [, opts ] )`

Activate Editor's bubble editing for one or more fields.

Parameters:

	Name	Type	Optional
1	`nodes`	`Any`	No
	DOM elements which are to be edited, and to which the bubble will be visually attached. If multiple nodes are given in an array, the bubble will be shown visually in an average position of all elements (for example, when editing two DataTables cells, it would show in the middle of the two). The data types which can be used for this parameter depend upon which mode the Editor instance is configured in: DataTables editing (i.e. `table` is set) - `DataTable.CellSelector`. This can be a table cell node, jQuery selector or cell index. Please refer to the DataTables `DataTable.CellSelector` for full information on this data type. Standalone editing - `string` or `node`. As a string in standalone mode, this represents the field name of the field to be edited, and will be selected based upon the `data-editor-field` HTML attribute. As a node, the `data-editor-field` attribute will be read to determine the field name to be edited.
2	`fieldNames`	`string`, `array`	Yes - default:-Automatically detected-
	A single field name to edit, or multiple field names in an array if multiple fields should be displayed for editing. This parameter is optional and Editor will attempt to automatically detect which field should be edited, based on the nodes passed in (first parameter) if not given. If field names are not given and Editor cannot automatically determine which fields should be edited, an error will be thrown.
3	`show`	`boolean`	Yes - default:true
	Since 1.5.0: This option can be used to stop the bubble editing display being inserted into the document. This can be useful if you wish to programmatically control the values to be submitted using the API, thus performing an edit without the end user seeing the form. The main editing functions (`create()`, `edit()` and `remove()`) offer similar functionality, but bubble editing offers extra flexibility since it can edit only particular fields, and not necessarily a full row.
4	`opts`	`form-options`	Yes
	Form options. Note that the form options have a bubble editing specific option called `insertPoint` which can be used to control where the bubble is inserted into the document. See also `formOptions.bubble` to configure default options for the Editor instance.

Returns:

DataTable.Editor: Editor instance

Examples

Bubble editing on click of a cell in a DataTable:

$('#myTable').on('click', 'tbody td', function () {
	editor.bubble(this);
});

Bubble editing with automatic submit on background click (through form options):

$('#myTable').on('click', 'tbody td', function () {
	editor.bubble(this, {
		submitOnBlur: true
	});
});

Edit multiple fields in a bubble (click on first column in a table):

$('#myTable').on('click', 'tbody td:first-child', function () {
	editor.bubble(this, ['first_name', 'last_name']);
});

Standalone bubble editing on click:

// Select all elements with a `data-editor-field` attribute
$('*[data-editor-field]').on('click', function () {
	editor.bubble(this);
});