Do action - Documentation

Purpose

Execute action, like filter a table, based on pre-established set of configuration.

Use when

To send an action to a wet-boew plugin.

Do not use when

When executing a such action can make your page not WCAG compliant.

Working examples

English:

French:

How to implement

Table filtering

<button data-wb-doaction='{
			"action": "tblfilter",
			"column": 1,
			"value": "2016-07-26"
	}' >Apply a filter</button>

Where:

"action": "tblfilter": Will apply a table column filter action by using the data tables plugin.
"column": 1: The filtering will be applied on the column index 1. That is visually the second column of the table.
"value": "2016-07-26": The filter value will be the string "2016-07-26".

Ajaxing

<button data-wb-doaction='{
			"action": "ajax",
			"url": "ajax/ajax-1.html"
	}' >Ajax content</button>

Where:

"action": "ajax": Will execute an ajax request with the data-ajax plugin.
"url": "ajax/ajax-1.html": URL of the ajax file.

Patching

Note: Any data-json that is binded to that dataset will be updated. Patches are not persistant by default unless the configuration cumulative is true.

<button data-wb-doaction='{
			"action": "patch",
			"source": "#jmexample1",
			"patches":
				{
					"op": "add",
					"path": "/city",
					"value": "Gatineau"
				}
			}
	}' >Patches JSON dataset</button>

Where:

"action": "patch": Will apply the patch action to an existing JSON manager plugin.
"source": "#jmexample1": The source represent a pointer to the JSON manager. "#jmexample1" is representing the id of the element containing the JSON manager.
"patches": { ... }: Contain a patch or an array of patch. See the JSON manager documentation to know how to create JSON patch operation.

Load JSON

<button data-wb-doaction='{
			"action": "loadJSON",
			"url": "ajax/ajax-load.json",
			"source": "#jsonloader"
	}' >Ajax content</button>

Where:

"action": "ajax": Will load a JSON file designated by the url onto a JSON manager specified by source.
"url": "ajax/ajax-1.html": URL of the JSON file.
"source": "#smallloader": A pointer to the JSON manager. "#jsonloader" is representing the id of the element containing the JSON manager.
"nocache": See cache busting configuration options for the JSON manager.
"nocachekey": See cache busting configuration options for the JSON manager.
data: See data configuration options for the JSON manager.
contenttype: See contenttype configuration options for the JSON manager.
method: See method configuration options for the JSON manager.

With Input

<button data-wb-doaction='{
			"action": "withInput",
			"srcInput": "#myfield",
			"actions": "[... ]"
	}' >Ajax content</button>

Where:

"action": "withInput": Indicate that subsequent actions may use data from input field designated by srcInput.
"srcInput": "#myfield": The id of an input field whose value may be used in subsequent actions.
"actions": "{ ... }": An action or an array of actions.

Binding actions to the page query

The following variable can be used to map the query information for ajax url, table filter or patches selector.

{qval} string: Query value in the url required to match a regular expression with match configuration. It can be specified by setting the parameter qval.
{base} string: Only for patches. Define the base string of a JSON pointer. Default value is /. It can be specified by setting the parameter base.

`match` and `default` configuration

If match is defined in your configuration, then the default configuration must be also defined.

For security reason, any value retreived from the page URL always require to configure match that will contain a regular expresion. If there no match or the matching result is an empty string, the default configuration will be used as the value fallback.

When you specify a regular expression, it is recommended to have it prefixed with "^" and suffixed with "$". Be careful to not use regular expression that could compromise the security.

Example 1 - Ajax

data-wb-urlmapping='{ "ajx": { "action": "ajax", "url": "ajax/ajax-{qval}.html", "match": "[A-Z][a-z][A-Z][a-z][A-Z][a-z]", "default": "default" } }'

Means that:

?ajx: Will load ajax file: ajax/ajax-default.html
?ajx=2: Will load ajax file: ajax/ajax-default.html
?ajx=wetboew: Will load ajax file: ajax/ajax-default.html
?ajx=canada: Will load ajax file: ajax/ajax-default.html
?ajx=CaNaDa: Will load ajax file: ajax/ajax-CaNaDa.html

Example 2 - Ajax

data-wb-urlmapping='{ "ajx=2": { "action": "ajax", "url": "ajax/ajax-{qval}.html", "match": "[0-9]", "default": "null" } }'

Means that:

?ajx: Do nothing
?ajx=2: Will load ajax file: ajax/ajax-2.html
?ajx=wetboew: Do nothing
?ajx=CaNaDa: Do nothing
?ajx=5: Do nothing

Example 3 - Ajax

data-wb-urlmapping='{ "ajx": { "action": "ajax", "url": "ajax/ajax-{qval}.html", "qval": "TEST" } }'

Means that:

?ajx: Will load ajax file: ajax/ajax-TEST.html
?ajx=2: Will load ajax file: ajax/ajax-TEST.html
?ajx=wetboew: Will load ajax file: ajax/ajax-TEST.html
?ajx=CaNaDa: Will load ajax file: ajax/ajax-TEST.html

Note: The result of match configuration is ignored when the query value is set.

Example 4 - Table filtering

data-wb-urlmapping='{
	"date-search":
		{
			"action": "tblfilter",
			"source": "#myDataTable",
			"column": 1,
			"value": "{qval}",
			"match": "[1-2][0-9][0-9][0-9]-[0,1][0-9]-[0-3][0-9]",
			"default": "2016-07-23"
		}
	}'

Means that:

?: Will show all result
?date-search: Will show result that match the default "2016-07-23" in the second column.
?date-search=: Will show result that match the default "2016-07-23" in the second column.
?date-search=2016-07-26: Will show result that match the string "2016-07-26" in the second column.
?date-search=YYYY-MM-DD: Will show result that match the default "2016-07-23" in the second column.

Default patch operation

{
	op: "move",
	path: "{base}",
	from: "{base}/{qval}"
}

Add pre-defined action identified by a group name

Defined in a attribute data-wb-actionmng set on an element.

<div data-wb-actionmng='[
		{ "trggroup":"clearFilter", "action": "tblfilter", "source": "#dataset-filter", "column": 2, "value": "" },
		{ "trggroup":"clearFilter", "action": "tblfilter", "source": "#dataset-filter", "column": 3, "value": "" }
]'></div>

Configuration options

The data-wb-doaction attribute must contain an JSON object or an array of JSON object representing a list of valid action.

data-wb-doaction='
	[
		{ Action object },
		{ Action object },
		{ Action object },
		{ Action object }
	]

Option	Description	How to configure	Values
action	Required. Define the action to do. Available for: ajax tblfilter patch addClass run removeClass mapfilter tocsv loadJSON withInput selectinput	`data-wb-doaction='{ "action": "[Name of the action]" }`	ajax Insert content after the element tblfilter Will apply a column filter to a data table patch Will apply a patch by using a JSON manager run Execute action for a given named group addClass Add a class to an element removeClass Remove a class to an element mapfilter Apply a geomap filter tocsv Download an HTML table in CSV loadJSON Load a JSON file into a specified JSON manager withInput Specify the value of an input field available to the action
url	Specify the url to load. Ajax filtering is supported. Available for: ajax loadJSON	`data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html" }`	URL
trigger	Initiate WET features of the inserted content. Available for: ajax	`data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html", "trigger": true }`	false (default): Content is kept as is true: Will initiate any WET feature that exist in the inserted content.
container	Specify the container to use to insert the ajax(ed) content Available for: ajax	`data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html", "container": "#jQuerySelector" }`	jQuery selector (By default the container will be a empty container inserted after the element that was clicked.)
type	Define how content will be inserted from the container perspective. Available for: ajax	`data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html", "type": "replace" }'`	replace(default) after append before prepend This value map how to call the data-ajax plugin
target	Define a postpone action that will be triggered when actions will be executed on the targeted (id) element. Once those action are run, they are removed from the stack. Available for: ajax tblfilter patch run addClass removeClass tocsv loadJSON withInput	`data-wb-doaction='{ "action": "ajax", "target": "[an ID]" } }'`	false (default): The action is immediatly executed string: ID that would be recongnized when future action will be executed on them.
trgbefore	Specify this action must be executed before the action on the target get executed. Could be use in combination with `target` configuration. Available for: ajax tblfilter patch run addClass removeClass mapfilter tocsv loadJSON withInput	`data-wb-doaction='{ "action": "ajax", "target": "[an ID]", "trgbefore": true } }'`	false (default): This action will be executed after the other action are executed on the target. true: This action will be executed before the other action are executed on the target.
trggroup	Define a group name for the targeted action. For run action, this represent the group that action need to be run. If the group contain some run action, those won't be executed. Available for: ajax tblfilter patch run addClass removeClass mapfilter loadJSON withInput	`data-wb-doaction='{ "action": "ajax", "target": "[an ID]", "trggroup": "[a name]" } }'`	Any valid string that could be used to identify the group.
source	jQuery selector that refer to an existing element on the page. This configuration option can be omited for a addClass and removeClass if the source are the element itself. This configuration option can also be omited for a selectinput. Available for: tblfilter patch addClass removeClass mapfilter tocsv loadJSON selectinput	`data-wb-doaction='{ "action": "tblfilter", "source": "#jQuerySelector" }'`	jQuery selector and when the action is set to `tblfilter` the source should refer to a data table enhanced with tables plugin.
column	Optional for table filtering, this specifies on which column the filter should be applied. If not defined, the filter will be applied on the whole table and the term will appear in the search field. Available for: tblfilter	`data-wb-doaction='{ "action": "tblfilter", "column": 5 }'`	Number Integer representing the column number where the first column of table is the number "0" Column selector A valid DataTable column selector
value	Required for table filtering, this specify on what value the filter should be applied. Required for `selectinput`. Every input where their `value` attribute matches this property will be selected. Available for: tblfilter selectinput	`data-wb-doaction='{ "action": "tblfilter", "value": "a value to be filtered about" }'`	A value that will be searched agains the specified column in order to filter the rows.
regex	Treat the searched value as a regular expression. Enable regular expressions without desabling smart search, as smart search use regular expressions, both might conflict and cause unexpected results. Available for: tblfilter	`data-wb-doaction='{ "action": "tblfilter", "column": 0, "regex":true, "smart":false }'`	Boolean, default false (as defined in DataTable search() API)
smart	Perform smart search. Note that to perform a smart search, DataTables uses regular expressions, so if enable regular expressions using the regex parameter to this method, you will likely want to disable smart searching as the two regular expressions might otherwise conflict and cause unexpected results. Available for: tblfilter	`data-wb-doaction='{ "action": "tblfilter", "column": 0, "smart":false }'`	Boolean, default true (as defined in DataTable search() API)
caseinsen	Do case-insensitive matching. Available for: tblfilter	`data-wb-doaction='{ "action": "tblfilter", "column": 0, "caseinsen":false }'`	Boolean, default true (as defined in DataTable search() API)
class	CSS Class name. Available for: addClass removeClass	`data-wb-doaction='{ "action": "addClass", "source": "#id", "class": "myclass" }'`	A CSS class name
patches	Apply patches. Required for: patch	`data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "patches": [ Patches object supported by the JSON manager ] }'`	Array [] of valid patches that could be executed by the JSON manager
fpath	Define a base path in order to apply a filter. This value is required when either or both configuration `filter` and `filternot` is used. Available for: patch	`data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "fpath": "/data" }'`	false (default): Filtering is undefined and wont be applied. JSON Pointer: A valid JSON Pointer (RFC6901)
filter	A evaluation object as defined in the JSON manager documentation under the configuration option section When this configuration is used, the `fpath` configuration must be set also. Available for: patch	`data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "fpath": "/data", "filter": "{evaluation object}" }'`	false (default): Filtering is undefined and wont be applied. Evaluation object: See the JSON manager documentation under the configuration option section
filternot	A evaluation object as defined in the JSON manager documentation under the configuration option section When this configuration is used, the `fpath` configuration must be set also. Available for: patch	`data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "fpath": "/data", "filternot": "{evaluation object}" }'`	false (default): Filtering is undefined and wont be applied. Evaluation object: See the JSON manager documentation under the configuration option section
cumulative	Apply persistant patches for the current page instance. That means that patches exectued will remain when further patches modification is completed by the JSON manager during the current page load. When WET is re-executed (on page load) then all the permently change are ignored. It do not change the data source, it just apply the change in the dataset. Available for: patch	`data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "patches": [ Patches object supported by the JSON manager ], "cumulative": true }'`	false (default): The patches will be ignored at the next patches update by the JSON manager. true: The patches will be cumulative for the next patches updated by the JSON manager, like from instruction received by fieldflow.
filter	Filter type Available for: mapfilter	`data-wb-urlmapping='{ "QueryStringToBeMapped": { "action": "mapfilter", "source": "#id", "filter": "aoi", "value"="64 -10 34 -177" } }'` `data-wb-urlmapping='{ "QueryStringToBeMapped": { "action": "mapfilter", "source": "#id", "filter": "layout", "value"="Layout name" } }'`	`aoi`: Area Of Interest (zoom filtering) and the configuration "value" contains a 4 cardinal point or Well-Known Text (WKT) string. `layout`: Layout (overlay filtering) and the configuration "value" contains the name of that layer as displayed in the legend if any or an empty string to select all.
value	The value for the action Available for: mapfilter	`data-wb-urlmapping='{ "QueryStringToBeMapped": { "action": "mapfilter", "source": "#id", "filter": "aoi", "value"="64 -10 34 -177" } }'` `data-wb-urlmapping='{ "QueryStringToBeMapped": { "action": "mapfilter", "source": "#id", "filter": "layout", "value"="Layout name" } }'`	`<string>` (aoi): 4 cardinal point or Well-Known Text (WKT) string for filter set to the Area Of Interest (zoom filtering). `<string>` (layer): The name of that layer as displayed in the legend or an empty string to select all for filter set to Layout (overlay filtering).
filename	Define the filename to use for downloading Available for: tocsv	`data-wb-doaction='{ "action": "tocsv", "source": "#myTable", "filename": "an awsome name.csv" }'`	false (default): It will use the table caption + ".csv", if not available it will fallback on "table.csv" String: The filename to use including the file extension, like `.csv`
srcInput	Define the input field so that it's value is available to the action Available for: withInput	`data-wb-doaction='{ "action": "withInput", "srcInput": "#myField", ... }'`	String: jQuery selector of an input field when the action is set to `withInput`

Events

Event	Trigger	What it does
`tocsv.wb-actionmng` tocsv	Triggered automatically on tocsv action execution.	Read the HTML table and initiate a file download.
`patch.wb-actionmng` patch	Triggered automatically on patch action execution.	Prepare the patches data to be sent to JSON manager throught the event "`patches.wb-jsonmanager`".
`ajax.wb-actionmng` ajax	Triggered automatically on ajax action execution.	Execute the ajax instruction by using the data-ajax plugin.
`addClass.wb-actionmng` addClass	Triggered automatically on addClass action execution.	Will add the specified class to the specified source element.
`removeClass.wb-actionmng` removeClass	Triggered automatically on addClass action execution.	Will removed the specified class to the specified source element.
`tblfilter.wb-actionmng` tblfilter	Triggered automatically on tblfilter action execution.	Filter the data table rows by searching on the specified column.
`do.wb-actionmng` Action Manager plugin core	Triggered automatically when a plugin want to run action.	Execute an action or an array of action provided through the property `actions` of the event object.
`clean.wb-actionmng` Action Manager plugin core	Triggered automatically when a plugin want to remove all action for a given group.	Remove all action for a given group identified through the property `trggroup` of the event object.
`wb-ready.wb-doaction` Plugin core	Triggered automatically after an wb-doaction is initialized.	Used to identify when an wb-doaction has initialized (target of the event) `$( document ).on( "wb-ready.wb-doaction", ".wb-doaction", function( event ) { });` `$( ".wb-doaction" ).on( "wb-ready.wb-doaction", function( event ) { });`
`wb-ready.wb-actionmng` Plugin core	Triggered automatically after an wb-actionmng is initialized.	Used to identify when an wb-actionmng has initialized (target of the event) `$( document ).on( "wb-ready.wb-actionmng", ".wb-actionmng", function( event ) { });` `$( ".wb-actionmng" ).on( "wb-ready.wb-actionmng", function( event ) { });`
`wb-init.wb-doaction` Plugin core	Triggered manually (e.g., `$( ".wb-doaction" ).trigger( "wb-init.wb-doaction" );`).	Used to manually initialize the wb-doaction plugin. Note: The wb-doaction plugin will be initialized automatically unless the required markup is added after the page has already loaded.
`wb-init.wb-actionmng` Plugin core	Triggered manually (e.g., `$( ".wb-actionmng" ).trigger( "wb-init.wb-actionmng" );`).	Used to manually initialize the wb-actionmng plugin. Note: The wb-actionmng plugin will be initialized automatically unless the required markup is added after the page has already loaded.
`wb-ready.wb` Plugin core	Triggered automatically when WET has finished loading and executing.	Used to identify when all WET plugins and polyfills have finished loading and executing. `$( document ).on( "wb-ready.wb", function( event ) { });`
`withInput.wb-actionmng` withInput	Triggered automatically on withInput action execution.	Used so that subsequent actions may use data from input field designated by srcInput.
`loadJSON.wb-actionmng` loadJSON	Triggered automatically on loadJSON action execution.	Load a JSON file designated by the url onto a JSON manager specified by source.

Source code

Do action plugin source code on GitHub

Action manager plugin source code on GitHub

Page details

Date modified:: 2019-09-04

Language selection

Search

Do action - Documentation

Purpose

Use when

Do not use when

Working examples

How to implement

Table filtering

Ajaxing

Patching

Load JSON

With Input

Binding actions to the page query

`match` and `default` configuration

Example 1 - Ajax

Example 2 - Ajax

Example 3 - Ajax

Example 4 - Table filtering

Default patch operation

Add pre-defined action identified by a group name

Configuration options

Events

Source code

Page details

Do action - Documentation

Purpose

Use when

Do not use when

Working examples

How to implement

Table filtering

Ajaxing

Patching

Load JSON

With Input

Binding actions to the page query

match and default configuration

Example 1 - Ajax

Example 2 - Ajax

Example 3 - Ajax

Example 4 - Table filtering

Default patch operation

Add pre-defined action identified by a group name

Configuration options

Events

Source code

Page details

`match` and `default` configuration