JQuery Listings Operations Buttons

Overview

Description of markup, DOM elements and attributes involved in displaying operations buttons within CMS listings pages.

Markup

• Use <a> anchor tags for links to separate pages.
• Use <button> button tags for links that open jQuery/AJAX dialogs.
• Example:

<td class="centered">
    <div class="listops"><!--
        --><a class="preview-btn" href="<?=$row->local_url?>" target="_blank" title="live content">live content</a><!--
        --><button data-id="<?=$row->id?>" data-tid="<?=press_class::SECTION_ID?>" data-op="delete" title="delete">delete</button>
    </div>
</td>

• Outside TD element has class “centered”.
• Inner DIV element class “listops”.
• Each button is created with an anchor tag.

Button element attributes

• The class attribute of the anchor determines its button style and its AJAX handler. (Buttons implemented with the JQuery UI library.)
  • Some common button classes handled by the $.bindListingsButtons() routine of the LITTLED.Listings library:
  • details-btn Links to stand-alone page containing detailed information about the individual record.
  • preview-btn Links to stand-along page on the public site driven by that individual record.
  • print-btn Prints the record, or opens a page specially formatted for printing the individual record.
  • update-cache-btn Invokes AJAX that updates the cached content for the individual record.
  • edit-btn Opens record edit dialog/page.
  • trash-btn Opens delete record dialog/page.

• Configure the AJAX handlers for listings operations with JQuery within the page’s $(document).ready(); handler.
  • See JQuery Initialization on Listings Pages
• “data-*” attributes of the anchor tags specify which records to operate on when calling AJAX handlers. Some examples:
  • data-id – record id
  • data-tid – record content type id
  • data-pid – record parent id
  • data-op – operation name
• Each anchor tag has a title attribute which serves as a tooltip.
• The innerhtml of the anchor tag is not displayed if the JQuery UI button is successfully loaded.