Inline Edits With PHP/AJAX

Markup

Editable container

Add a `<td> or <div> 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:
    

    $name = (object)array("id"=>$clip->id, "table"=>'album', "value"=>$clip->title);

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 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.

Initialization on page

$(document).ready(function() {
	$('.mycontent-edit-cell').inlineEdit('init', {
		input_key: 'mycontentID',
		edit_uri: '/path/to/ajax_script.php'
	});
});

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.

Examples

• Littledamien storage CMS > package status container
• Damien Jay Comics books CMS > in-stock container