WikiWFS

ajaxMenus
ajaxTables
ajaxTemplates
ajaxForms
ajaxMaps

ajaxPages contain any of the following JavaScript modules:

• ajaxMenu
• ajaxTable
• ajaxTemplate
• ajaxForm
• ajaxMap

After loading the JavaScript module, each module can be assigned to an HTML element:

<script>
'use strict';

import { default as ajaxMenu } from "/ajaxTemplates/js/ajaxMenus.js";
import { default as ajaxTable } from "/ajaxTemplates/js/ajaxTables.js";

(function () {

    window["ajaxMenus"] = [];
    window["ajaxTables"] = [];

    document.addEventListener('DOMContentLoaded', () => {

        const menus = document.querySelectorAll('div[data-ajax="menu"]');
        menus.forEach((element, key) => {
            var object = {
                _menuCallback: {
                    functions: {}
                }
            }
            ajaxMenus[key] = new ajaxMenu(element, key, object);
        })

        const tables = document.querySelectorAll('table[data-ajax="table"]');
	tables.forEach((element, key) => {
            var object = {
                _tableCallback: {
                    functions: {}
                }
            }
	    ajaxTables[key] = new ajaxTable(element, key, object);
	})

    });
    
})();
</script>

<div data-ajax="menu"></div>
<div data-ajax="map"></div>
<div data-ajax="template"></div>
<table data-ajax="table"></table>

We recommend putting this inside an external JavaScript file and calling this file inside the HTML

parentElements:
An element becomes a parentElement if there is one or more childElements with the data-parentId attribute set to the element.id of the parentElement.

• A parentElement can only receive data from a database query.
• A parentElement can transmit and receive events to and from any of its childElements.
• When an event (mouseover, mouseout, mousedown, mouseup, click) happens on the parentElement, the event propagates down to all childElements.

siblingElements:
An element becomes a siblingElement if itself and all its siblingElements have their data-siblingId attribute set to an array containing all the element.id's of all siblingElements, including its own element.id and maintaining the same order for all.

• A siblingElement can only receive data from a database query.
• A siblingElement can transmit and receive events to and from any of its siblingElements.
• When an event (mouseover, mouseout, mousedown, mouseup, click) happens on the siblingElement, the event propagates to all the siblingElements except the siblingElement from which the event originated.

childElements:
An element becomes a childElement if it has its data-parentId attribute set to the element.id of its parentElement.

• A childElement can only receive data from its parentElement.
• A childElement can transmit and receive events to and from its parentElement.
• When an event (mouseover, mouseout, mousedown, mouseup, click) happens on the childElement, the event propagates up to the parentElement and then propagates down to all childElements except the current childElement from which the event originated.

An element can both be a parentElement and a siblingElement at the same time.
A childElement can not be a parentElement and/or a siblingElement at the same time.