Variable-Length Line Item Edits

Overview

Describes how to add modules to CMS edit pages where variable-length arrays of objects can be added to a content record.

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

CSS

• .line-item-module Defines how the entire module will fit into the flow of the page.
• .line-item-module h3 T module title.
• .form-section Styling of the actual line items and how they are arranged relative to each other.
• .form-section div Styling of individual line items.

.line-item-module {
	clear: both;
	overflow: hidden;
	margin: 12px 0 8px 0;
	width: 500px;
}
.line-item-module h3 {
	font-weight: normal;
	font-size: 11px;
	padding: 0 0 2px 0;
	border-bottom: 1px solid #999;
	margin: 0 0 4px 0;
}
.form-section div {
	line-height: 16px;
}

JavaScript

Binding handlers and buttons

• Assign handler for $('.add-[CONTENT_CODE]-btn')
• Apply JQueryUI button to $('.add-[CONTENT_CODE]-btn')

bindEditHandlers: function() {
			return this.each(function() {
				$(this)
				.off('click', '.add-history-btn', LITTLED.Contacts.editHistoryEvent)
				.on('click', '.add-history-btn', LITTLED.Contacts.editHistoryEvent)
				$('.add-history-btn', $(this)).iconButton('plus');
				$('#history-events').contacts('bindHistoryHandlers');
			});
		},
		
		/**
		 * line item handlers
		 */
		bindHistoryHandlers: function() {
			return this.each(function() {				
				$(this)
				.off('click', '.trash-history-btn', LITTLED.Contacts.deleteHistoryEvent)
				.on('click', '.trash-history-btn', LITTLED.Contacts.deleteHistoryEvent);
				$('.trash-history-btn', $(this)).iconButton('trash');
			});
		},

• Handler routines.

deleteHistoryEvent: function() {
            var $p = $(this).closest('.event-row');
            $p.remove();
        },

PHP

Collecting form data

Parent content class doesn't require any form data collection for the line item data.

Validating form data

Parent class doesn't require any form data validation for the line item data.

Examples

• Luzern Labs Advice CMS