Editing Inline Edits With PHP/AJAX

== Markup ==

=== Editable container ===

Add a `&lt;td&gt;` or `&lt;div&gt;` container as a container for the inline edits.

* The container's content is changed to accommodate the edits, but not the container itself.
* Assign the container a class that will serve as a selector for inline edits. Something like `status-cell`, `in-stock-cell`, `access-cell`, etc.
* Assign the container the `inline-edit` class to use to target it for content updates.
* The container has a `data-id` attribute with the parent record's id as its value.
* Variable name
** The PHP variable used to access the value displayed in the cell is typically `$row` on listings pages and `$input` on details pages.
** The content template will have to accommodate whatever variable is used on its parent page.
** Create an object variable for the purposes of the template that won't collide with the parent page's variables, and that has whatever properties are required by the cell template:<br /><syntaxhighlight lang="php">
$name = (object)array("id"=>$clip->id, "table"=>'album', "value"=>$clip->title);
</syntaxhighlight>

=== Editable content ===

Create an include file for the flattened content that can be shared between listings and details pages.

* path: `[SECTION_BASE_DIR]_templates/content/[content_type]-cell.php`
* The actual content of this file doesn't affect the process; it can be anything.

=== Editing form ===

Create an include file to be inserted into the DOM by the editing handler.

* path: `[SECTION_BASE_DIR]_templates/forms/[content_type]-edit-form.php`
* Include a hidden error message container with class `alert alert-error`.
* Hidden form inputs:
** `id`: parent record id
** `[class_id_param]`: parent record id parameter as defined in the parent PHP class
** Any filter values needed to present options during the process.
* A form input for the property being edited.
* Submit buttons are optional. Ideally an `onchange` or {{kbd|Enter}} key keystroke handler will cause the inline form to be submitted.

== JavaScript ==

=== Shared library ===

`$.inlineEdit()`

* Bundled into `littled.js`
* Source: `[COMMON_BASE_DIR]scripts/littled/inlineEdit.js`
* Settings
** `input_key` The name of the parameter used to pass the new value to the AJAX page. 
** `edit_uri` URL of the AJAX script that serves the form markup and commits the changes to the database. 
** `events.to_commit` Type of event that will cause the new value to be saved to the database, e.g. 'keydown', 'change'.
*** Currently, 'change' is the only value that is implemented.
*** <span style="color:red">'''implement a keydown handler for textbox form inputs'''</span>

=== Initialization on page ===

<syntaxhighlight lang="javascript">
$(document).ready(function() {
	$('.mycontent-edit-cell').inlineEdit('init', {
		input_key: 'mycontentID',
		edit_uri: '/path/to/ajax_script.php'
	});
});
</syntaxhighlight>

== AJAX ==

=== Custom content edits ===

* Create a page class derived from the shared `AjaxPage` class.
* Collect parent id, read parent properties, return markup used to display the editing form.
* Test if form was submitted, and save changes accordingly.
* Return JSON containing markup used to update page content, error messages, and status messages.

=== Standardized edits ===

Names, titles, status (enabled vs disabled), dates, keywords, page numbers.

== Examples ==

* [http://littled.dbarchowsky.com/storage Littledamien storage CMS] > package status container
* [http://damienjay.dbarchowsky.com/hostmgr/books Damien Jay Comics books CMS] > in-stock container

[[Category:CMS Documentation]] [[Category:JavaScript]] [[Category:jQuery/AJAX]] [[Category:PHP]] [[Category:Littled Libraries]] [[Category:Web Development]]