Inline Edits With PHP/AJAX: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 3: | Line 3: | ||
=== Editable container === | === Editable container === | ||
Add a `<nowiki><td></nowiki>` or `<nowiki><div></nowiki>` 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. | |||
* The container has a `data-id` attribute with the parent record's id as its value. | |||
=== 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. | |||
== 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 | |||
Revision as of 13:03, 6 September 2014
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 likestatus-cell,in-stock-cell,access-cell, etc.The container has adata-id` attribute with the parent record's id as its value.
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
onchangeor Enter key keystroke handler will cause the inline form to be submitted.
Examples
- Littledamien storage CMS > package status container
- Damien Jay Comics books CMS > in-stock container