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 example

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.

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
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
url

Specify the url to load. Ajax filtering is supported.

Available for:

  • ajax
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
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
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
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 itselft.

Available for:

  • tblfilter
  • patch
  • addClass
  • removeClass
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

Required for table filtering, this is specify on which column the filter should be applied

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.

Available for:

  • tblfilter
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.

Events

Event Trigger What it does
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 ) {
});

Source code

Do action plugin source code on GitHub

Action manager plugin source code on GitHub

Date modified: