JQuery Initialization on Listings Pages

Listings JQuery handlers

• $('#listings-container').listings('bindListingsHandlers')
• $('#listings-container') targets the element containing the listings. #listings-container is the most common element for this, but any appropriate selector can be specified.
• Inline edits: .inline-edit-cell double-click
• Pagination & paging button handlers (.page-btn)
• Update cache: .update-cache-btn click
• Delete records: .trash-btn click
• Makes button icons for the following elements: .details-btn, .preview-btn, .edit-btn, .print-btn, .update-cache-btn, .trash-btn.
• Button element handlers should persist after listings content is refreshed.
• $.listings('bindListingsHandlers') in turn calles $.listings('bindListingsButtons'). The two routines are separated so $.listings('bindListingsHandlers') doesn't need to be called multiple times to avoid attaching duplicate handlers to listings elements.
• This routine does not refresh the handlers or buttons after the listings are refreshed. This can be achieved with

$(document).ready(function() {
	$('#listings-container').listings('bindListingsHandlers');
	LITTLED.init({setSortables: function() {
			$('#listings-container').listings('bindListingsButtons');
		}
	});
});

Pagination

Content CMS

• Specify a listings handler script with the "listings uri" setting.
• Default handler is /hostmgr/_ajax/utils/listings.php
  • Default handler requires that the content and filters objects for that type of content have been defined within the local cache_class.

HTML

<table id="listings-table" data-tid="<?=$filters->site_section->id->value?>" data-p="<?=$filters->calc_rec_position()?>">

• The listings container is a table.
• Attributes of table element:
  • id default value #listings-table. Used as jQuery selector for paging functionality.
  • data-tid content type contained within table. Used to retrieve paging content.
  • data-p Index of the first record on the page. E.g. on the 2nd page with 50 records per page the value would be 51.

PHP

include (COMMON_TEMPLATE_DIR."framework/navigation/listings_page_links.php");

• This include is placed outside the table id="listings-table"element and inside the div id="listings-container" element.
• Upldate local cache_class to support the content type. See Adding Content Types to the Local Cache Class

Operations buttons

Markup

Sample:

<td class="centered">
	<div class="listops"><!--
		--><button class="edit-btn" data-id="<?=$so->id?>" data-tid="<?=ShippingOption::SECTION_ID?>" data-op="edit" title="edit shipping option">edit shipping option</button><!--
		--><button class="trash-btn" data-id="<?=$so->id?>" data-tid="<?=ShippingOption::SECTION_ID?>" data-op="delete" title="delete shipping option">delete shipping option</button>
	</div>
</td>

• Use the button element when the button will trigger a JQuery handler.
• Use the anchor element when the button links to another page.
• Buttons are wrapped in a div container with listops class.
• The class attribute value of the button/anchor determines the icon that is loaded and (optionally) the AJAX handler that is invoked upon clicking the button.
• Required attributes for AJAX handlers:
  • data-id
  • data-tid

Inline edits

Markup

• Element to be edited is placed in a container with class inline-edit-cell.
• Pre-existing templates located in [COMMON_TEMPLATE_DIR]forms/ajax/.
  • access_cell.php
  • date_cell.php
  • name_cell.php
  • page_cell.php
  • slot_cell.php <<< deprecated Use $.resort('bindResort') instead. (<<< add link to documentation)
  • status_cell.php

<td><? include (COMMON_TEMPLATE_DIR."forms/ajax/name_cell.php"); ?></td>
<? /* or */ ?>
<div><? include (COMMON_TEMPLATE_DIR."forms/ajax/name_cell.php"); ?></div>

PHP

• The content include file expects an object containing the properties of the field.
• Create an object that contains the field properties within the listings loop:

while ($row = mysql_fetch_object($rs))
{
	$name = (object)array("id"=>$row->id, "table"=>"package", "value"=>$row->code);
	/* listings template including inline edit content includes goes here */
}

JavaScript/jQuery/AJAX

• Both $.listings('bindListingsHandlers') and $.galleries('bindAlbumListingsHandlers') bind the dblclick handlers for the cell:

$('.inline-edit-cell').on('dblclick', methods.editCell);

• $.listings('editCell') contains the logic that loads the editable input into the cell after double-clicking the cell.

Customized inline elements

• Create include files for the flattened cell and the editing form.
  • The class will be inline-edit-cell
  • Add the following attributes: data-id, data-t, and data-op.

<div class="inline-edit-cell" data-id="<?=$name->id?>" data-t="<?=$name->table?>" data-op="name"><?=$name->value?></div>

Keywords JQuery handlers

• $('#listings-container').keywords('bindListingsHandlers')
• #listings-container targets the element containing the listings. It's the most common element to use in this case, but any appropriate selector may be used.
• Loading inline editor: .edit-kw-btn click
• Submitting and canceling inline edits: .kw-commit-btn and .kw-cancel-btn click
• Button icons: .ui-icon-edit
• $.keywords('bindListingsHandlers') in turn calles $.keywords('bindListingsButtons'). The two routines are separated so $.keywords('bindListingsHandlers') doesn't need to be called multiple times to avoid attaching duplicate handlers to listings elements.
• Button element handlers should persist after listings content is refreshed.
• The routine doesn't handle refreshing the button elements when the listings content is refreshed.
• See also Keywords

Keyword filter autocomplete

Markup

• Assign keydown handler to keyword filter textbox, e.g. $('input[name=flkw]').listings('keywordAutocomplete').
• Keyword input textbox has attribute data-tid with the content type id for the section as its value.

JavaScript/jQuery

• $(selector).listings('keywordAutocomplete')

PHP

• AJAX handler: /_ajax/utils/keyword_autocomplete.php
  • cache_class::set_filters()
  • $filters->search_titles()
    • This routine must be defined for the particular content type being filtered.
    • The base routine album_filters_class->search_titles() routine won’t work with the table structure.

Examples

• littledamien.com
  • Sketchbooks
  • Movies

Datepicker

$('.datepicker').datepicker();

See Also

• Binding JQuery Handlers
• configuration notes for sorting
• Refactoring a CMS to Use Shared LITTLED Libraries
• Keywords