| Classes (0) | Namespaces (2) |
| Properties (0) | Static properties (6) |
| Methods (0) | Static methods (1) |
| Events (0) |
| Properties (0) | Static properties (6) |
| Methods (0) | Static methods (1) |
| Events (0) |
Initialisation options that can be given to Editor at initialisation time.
Events / callbacks - event handlers can be assigned as an individual function during initialisation using the parameters in this name space. The names, and the parameters passed to each callback match their event equivalent in the Editor object.
Internationalisation options for Editor. All client-side strings that the end user can see in the interface presented by Editor can be modified here. [...]
The URL, or collection of URLs when using a REST interface, which will accept
the data for the create, edit and remove functions. The target script / program
must accept data in the format defined by Editor and return the expected JSON as
required by Editor. When given as an object, the create, edit and remove
properties should be defined, each being the URL to send the data to for that
action. When used as an object, the string _id_ will be replaced for the edit
and remove actions, allowing a URL to be dynamically created for those actions.
A unique identifier for the database table that the Editor instance is intended to control. Editor itself does not use these parameter for any actions, but it will include it in the data submitted to the server. This means that a single Ajax script could control multiple tables, switching between each table as required by checking for this variable.
The display controller for the form. The form itself is just a collection of DOM elements which require a display container. This display controller allows the visual appearance of the form to be significantly altered without major alterations to the Editor code. There are two display controllers built into Editor lightbox and envelope. The value of this property will be used to access the display controller defined in Editor.display for the given name. Additional display controllers can be added by adding objects to that object, through extending the displayController model: Editor.models.displayController.
jQuery selector that can be used to identify the table you wish to apply this editor instance to. We can't pass in the DataTables instance itself, as often you will wish to initialise the form controller first, so by providing the selector, Editor can access the DataTable when it needs to in future.
Fields to initialise the form with - see Editor.models.field for a full list of the options available to each field. Note that if fields are not added to the form at initialisation time using this option, they can be added using the Editor#add API method.
JSON property from which to read / write the row's ID property (i.e. its
unique column index that identifies the row to the database). By default
(null) Editor will use the DT_RowId property from the data source
object (DataTable's magic property to set the DOM id for the row). [...]
The function that is used to submit data to the server. This is provided as an initialisation parameter to allow custom Ajax calls, or even to get / set data that is not requested by Ajax, but possibly by some other method (for example localStorage). The function takes five parameters and no return is expected.
The URL, or collection of URLs when using a REST interface, which will accept
the data for the create, edit and remove functions. The target script / program
must accept data in the format defined by Editor and return the expected JSON as
required by Editor. When given as an object, the create, edit and remove
properties should be defined, each being the URL to send the data to for that
action. When used as an object, the string _id_ will be replaced for the edit
and remove actions, allowing a URL to be dynamically created for those actions.
// As a string - all actions are submitted to this URI as POST requests
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example"
} );
} );
// As a string, using HTTP GET
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "GET php/index.php",
"domTable": "#example"
} );
} );
// As an object - each action is submitted to a different URI as POST requests
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": {
"create": "/rest/user/create",
"edit": "/rest/user/_id_/edit",
"remove": "/rest/user/_id_/delete"
},
"domTable": "#example"
} );
} );
// As an object - with different HTTP methods for each action
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": {
"create": "POST /rest/user/create",
"edit": "PUT /rest/user/edit/_id_",
"remove": "DELETE /rest/user/delete"
},
"domTable": "#example"
} );
} );
A unique identifier for the database table that the Editor instance is intended to control. Editor itself does not use these parameter for any actions, but it will include it in the data submitted to the server. This means that a single Ajax script could control multiple tables, switching between each table as required by checking for this variable.
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example",
"dbTable": "users"
} );
} );
The display controller for the form. The form itself is just a collection of DOM elements which require a display container. This display controller allows the visual appearance of the form to be significantly altered without major alterations to the Editor code. There are two display controllers built into Editor lightbox and envelope. The value of this property will be used to access the display controller defined in Editor.display for the given name. Additional display controllers can be added by adding objects to that object, through extending the displayController model: Editor.models.displayController.
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example",
"display": 'envelope'
} );
} );
jQuery selector that can be used to identify the table you wish to apply this editor instance to. We can't pass in the DataTables instance itself, as often you will wish to initialise the form controller first, so by providing the selector, Editor can access the DataTable when it needs to in future.
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example"
} );
} );
Fields to initialise the form with - see Editor.models.field for a full list of the options available to each field. Note that if fields are not added to the form at initialisation time using this option, they can be added using the Editor#add API method.
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example",
"fields": [ {
"label": "User name:",
"name": "username"
}
// More fields would typically be added here!
} ]
} );
} );
JSON property from which to read / write the row's ID property (i.e. its
unique column index that identifies the row to the database). By default
(null) Editor will use the DT_RowId property from the data source
object (DataTable's magic property to set the DOM id for the row).
If you want to read a parameter from the data source object instead of
using DT_RowId, set this option to the property name to use.
Like other data source options the srcId option can be given in dotted
object notation to read nested objects.
// Using a data source such as:
// { "id":12, "browser":"Chrome", ... }
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example",
"idSrc": "id"
} );
} );
The function that is used to submit data to the server. This is provided as an initialisation parameter to allow custom Ajax calls, or even to get / set data that is not requested by Ajax, but possibly by some other method (for example localStorage). The function takes five parameters and no return is expected.
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
1 | method | string | The HTTP method to use for the AJAX request | ||
2 | url | string | The URL (from ajaxUrl) to submit the data to | ||
3 | data | object | The data submitted to the server by Editor | ||
4 | successCallback | function | Callback function on data retrieval success | ||
5 | errorCallback | function | Callback function on data retrieval error |
// Using GET rather than POST
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example",
"ajax": function ( method, url, data, successCallback, errorCallback ) {
$.ajax( {
"type": method,
"url": url,
"data": data,
"dataType": "json",
"success": function (json) {
successCallback( json );
},
"error": function (xhr, error, thrown) {
errorCallback( xhr, error, thrown );
}
} );
}
} );
} );