Variable-Length Line Item Edits

Overview

Documentation of the lineitems.js library and how to use it on CMS pages to edit lists of records that are linked to parent records.

Markup

Cross-site request forgery

• A CSRF token is created and saved as a session variable.
• The value of this variable is saved in a hidden element on the page: #csrf-token where it will then be available in jQuery.

Line item listings

• Outer container has .line-items-container class.
  • This element does not get modified by jQuery.
  • The class is used as a selector in jQuery to target the parent of the individual line items.
• Each individual line item element has .line-item class.
  • The class name is used as a selector in jQuery to assign edit handlers to the individual line items.
  • When iterating through the line item objects in PHP, they should be rendered using a separate PHP include file. This way, that line item include file can be shared between the front-end PHP template and the AJAX script that updates page content.
  • The .line-item element must have the following attributes defined:
    • data-id: Record id of the line item in the database.
    • data-type: PHP class name of the object that can fetch and save the line item data to and from the database.
• New item button:

  <button class="add-line-btn" data-pid="[PARENT_RECORD_ID]" data-type="[CONTENT_PHP_CLASS_NAME]" title="add new [OBJECT NAME]">add new [OBJECT_NAME]</button>

Edit form

• The edit form markup will include the .line-item element.
• The flattened display of the line item will be replaced in its entirety with the edit form markup.
• The edit form will be replaced in its entirety with the updated flattened display of the line item once editing has been completed.
• The edit form will include the following variables as hidden form elements:
  • class: Name of PHP class that handles line item edits.
  • id: Line item record id, if editing an existing line item record.
  • pid: The record id of the parent record that the line item is linked to, if editing a new line item record.*

CSS

There is nothing critical here to the operation of the line item edits.

The line item elements can be table rows or divs.

If they are divs, consider creating CSS rules for .line-item that will render divs contained within it horizontally, and arrange them so that they line up vertically, e.g:

.line_item div {
	display: table-cell;
	vertical-align: top;
	margin-right: 8px;
}

JavaScript

Libraries

• [COMMON_LIB]littled/lineitemsjs

Binding handlers and buttons

Default binding handlers and buttons:

$(document).ready(function() {
	$('.line-items-container').lineitems('init');
});

The defaults can be overridden by passing in custom configuration in the 2nd argument:

$(document).ready(function() {
	$('.line-items-container').lineitems('init', {
		edit: {
			selector: '.custom-selector',
			event: 'click',
			uri: '/path/to/custom/edit_ajax.php'
		},
		del: {
			uri: '/path/to/custom/del_ajax.php'
			callback: function(evt, options) {
				console.log('Custom handler called.');
			}
		}
	});
});

Default selectors

• .line-item: Row element with the following attributes holding values that are passed to the AJAX scripts:
  • data-id: Record id of the line item in the database.
  • data-type: Name of the PHP class that will be instantiated to fetch and save edits to the line item in the AJAX script.
• .add-line-btn: Button with click handler to add new line items to the list.
• .line-item: Row element with double-click handler to edit existing line items.
• .save-line-btn: Button added to the DOM while editing or deleting a line item that commits the changes.
• .cancel-line-btn: Button added to the DOM while editing or deleting a line item that cancels the edit.
• #csrf-token: Hidden element holding a CSRF token value that is then passed to the AJAX script to prevent cross-site forgery.

Default ajax handlers

• Adding & editing: [COMMON_LIB]_ajax/utils/edit_line_item.php
• Deleting: [COMMON_LIB]_ajax/utils/del_line_item.php

PHP

Classes

• [COMMON_LIB]content/ajax_page_class.php
• Custom class to fetch and save the line item data from and to the database.

Utility scripts

• [COMMON_LIB]_ajax/utils/edit_line_item.php
• [COMMON_LIB]_ajax/utils/del_line_item.php

Content include files

Shared templates

• [COMMON_LIB]_templates/forms/ajax/line_item_submit_buttons.php
  Adds save and cancel buttons to a line item edit form.

Case-by-case templates

• Line item module containing all the individual line item elements.
  • This element is not modified by jQuery at any point.
• Individual line items Template containing the flattened (non-interactive) presentation of an existing line item.
  This is used by both the front-end display template and the AJAX script to display and update the line item listings.
• Line item edit form
  • Included in the template is a .line-item element containing the form and form elements.
  • Within the lineitems.js library handler, the existing .line-item element will be replaced with the new .line-item element containing the editing form markup.
• Delete confirmation form
  • Same as the editing form, this template must contain a .line-item element that in turn contains the delete confirmation form elements.

Workflow

MySQL

Create new MySQL table for the line items, linking them to an existing table, e.g.:

CREATE TABLE content_template (
  id int(11) NOT NULL auto_increment,
  site_section_id int(11) NOT NULL,
  name varchar(45) NOT NULL,
  path varchar(255) NOT NULL,
  location enum('local','shared') default NULL,
  PRIMARY KEY  (id),
  UNIQUE KEY idx_content_template_site_section_id_name (site_section_id,name),
  CONSTRAINT fk_site_section_content_template FOREIGN KEY (site_section_id) REFERENCES site_section (id) ON DELETE CASCADE ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

PHP

• Create a PHP class to represent the line item records.
• Add an include for the class in the project's local cache_class.php.

require_once (COMMON_CLASS_DIR."db/db_content_class.php");

class ContentTemplate extends db_content_class
{
	public $id;
	public $name;
	public $site_section_id;
	public $base_dir;
	public $path;
	public $location;

	function __construct( $id=null, $parent_id=null, $name='', $base_dir='', $path='', $location='')
	{
		$this->id = new integer_input_class("Template id", "templateID", true, $id);
		$this->site_section_id = new integer_input_class("templateParentid", "contentTypeID", true, $parent_id);
		$this->name = new string_text_input_class("Name", "templateName", true, $name, 45);
		$this->path = new string_text_input_class("Path", "templatePath", true, $path, 255);
		$this->location = new string_select_input_class("Location", "templateLocation", false, $location, 20);
	}

	/* [...] */
}

Markup

Create PHP include files containing markup to display & edit the line items.

Line item group container

One div (or section) to act as a container for the line items.

• This div should be outside the include file for the individual line items, either in its own include file, or placed directly in the details and editing include file.
• CSS class is item-items-container.
• Include a button for adding new line items (class add-line-btn).
  • CSS class is add-line-btn.
  • data-pid attribute contains the parent record's id.
  • data-type attribute contains the name of the PHP class that will be used to save edits to the line.

Line item edit form

• div container with line-item CSS class.
• form element
• Hidden input with name="<?=P_COMMIT ?>" and value="1"
• Hidden input with name="class" with the PHP class's name as its value.
• Form inputs for each of the object's properties.
• Submit buttons include: [COMMON_TEMPLATE_DIR]forms/ajax/edit_line_item_submit_buttons.php

JavaScript

The main content type's details and editing pages will include jQuery binding of the line item handlers.

(function($) {
	$(function() {
		$('.line-items-container').lineitems('init');
	});
});

Any necessary overrides of the line item editing configuration can be set using the 2nd argument to the 'init' routine:

$('.line-items-container').lineitems('init', {
	errorContainer: '.error-container',
	edit: {
		event: 'click',
		selector: '.edit-line-btn',
		uri: '/path/to/custom/editing_script.php'
	}
});

Examples

• littledamien.com ontacts CMS Contact status and contact history
• Luzern Labs Advice CMS (deprecated)