HTML.md

HTML

This document explains the HTML markup used by QFQ.

Hooks

Hooks are used on the Client to gather information required for asynchronous requests and to add predefined event handlers to HTML Elements.

form.data-toggle="validator" ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Adding the attribute data-toggle="validator" to a <form> element, enables the Bootstrap Validator on that HTML Form.

.data-sip ^^^^^^^^^

Asynchronous requests require to pass a SIP to the Server. Elements triggering an asynchronous request, may gather the SIP from the data-sip attribute assigned to the HTML Form Element.

.class="record-delete" ^^^^^^^^^^^^^^^^^^^^^^

HTML Form Buttons having the class record-delete set, will get an onclick handler attached by QfqNS.QfqRecordList. Each <button> also requires an data-sip attribute.

.data-load="" ^^^^^^^^^^^^^

HTML Form Elements having the attribute data-load, will trigger a call to api/load.php upon change.

id="save-button"

id="close-button"

id="delete-button"

id="form-new-button"

Typeahead

Typeahead capable text input elements will be defined by the following attributes:

.class='qfq-typeahead' ^^^^^^^^^^^^^^^^^^^^^^

.data-typeahead-sip ^^^^^^^^^^^^^^^^^^^

The SIP will store:

Use with SQL: typeAheadSql

Use with LDAP: typeAheadLdap

• ldapServer
• ldapBaseDn
• typeAheadLdapSearch
• typeAheadLdapValuePrintf
• typeAheadLdapKeyPrintf

.data-typeahead-limit ^^^^^^^^^^^^^^^^^^^^^

• Defines the limit of entries shown on the client. Default on client is 5. The server will always send a value. The server default is 20.

.data-typeahead-minlength ^^^^^^^^^^^^^^^^^^^^^^^^^

• Defines the string minlength, typed by the user, before the first lookup is started. Default is 2.

data-typeahead-pedantic ^^^^^^^^^^^^^^^^^^^^^^^

• If present, only suggested values are allowed in the input element

Tags Form Element

The tags form element depends on Typeahead by default. The following attributes define the tags form element, additional to the attributes for Typeahead (see above).

Mockups can be found in mockup/typahead.php

.data-typeahead-tags ^^^^^^^^^^^^^^^^^^^^

• If present, the field becomes a tag field

.data-typeahead-tag-delimiters ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

• List of ascii key codes of the keys which may be pressed to add a new tag when typing.

.value ^^^^^^

• JSON encoded list of key value pairs of existing tags. e.g.

  [{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]

POST data ^^^^^^^^^

• JSON encoded list of key value pairs of the selected tags. e.g.

  [{value: "Alaska", key: "AK"}, {value: "Alabama", key: "AL"}]