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:
|
data-wb-doaction='{ "action": "[Name of the action]" } |
|
url | Specify the url to load. Ajax filtering is supported. Available for:
|
data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html" } |
URL |
trigger | Initiate WET features of the inserted content. Available for:
|
data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html", "trigger": true } |
|
container | Specify the container to use to insert the ajax(ed) content Available for:
|
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:
|
data-wb-doaction='{ "action": "ajax", "url": "path/to/my/file.html", "type": "replace" }' |
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:
|
data-wb-doaction='{ "action": "ajax", "target": "[an ID]" } }' |
|
trgbefore | Specify this action must be executed before the action on the target get executed. Could be use in combination with Available for:
|
data-wb-doaction='{ "action": "ajax", "target": "[an ID]", "trgbefore": true } }' |
|
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:
|
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:
|
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:
|
data-wb-doaction='{ "action": "tblfilter", "column": 5 }' |
|
value | Required for table filtering, this specify on what value the filter should be applied. Available for:
|
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:
|
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:
|
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:
|
data-wb-doaction='{ "action": "tblfilter", "column": 0, "caseinsen":false }' |
Boolean, default true (as defined in DataTable search() API) |
class | CSS Class name. Available for:
|
data-wb-doaction='{ "action": "addClass", "source": "#id", "class": "myclass" }' |
A CSS class name |
patches | Apply patches. Required for:
|
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 Available for:
|
data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "fpath": "/data" }' |
|
filter | A evaluation object as defined in the JSON manager documentation under the configuration option section When this configuration is used, the Available for:
|
data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "fpath": "/data", "filter": "{evaluation object}" }' |
|
filternot | A evaluation object as defined in the JSON manager documentation under the configuration option section When this configuration is used, the Available for:
|
data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "fpath": "/data", "filternot": "{evaluation object}" }' |
|
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:
|
data-wb-doaction='{ "action": "patch", "source": "#myJSONmanager", "patches": [ Patches object supported by the JSON manager ], "cumulative": true }' |
|
filter | Filter type Available for:
|
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" } }' |
|
value | The value for the action Available for:
|
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" } }' |
|
Events
Event | Trigger | What it does |
---|---|---|
patch.wb-actionmng
|
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
|
Triggered automatically on ajax action execution. | Execute the ajax instruction by using the data-ajax plugin. |
addClass.wb-actionmng
|
Triggered automatically on addClass action execution. | Will add the specified class to the specified source element. |
removeClass.wb-actionmng
|
Triggered automatically on addClass action execution. | Will removed the specified class to the specified source element. |
tblfilter.wb-actionmng
|
Triggered automatically on tblfilter action execution. | Filter the data table rows by searching on the specified column. |
do.wb-actionmng
|
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
|
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
|
Triggered automatically after an wb-doaction is initialized. | Used to identify when an wb-doaction has initialized (target of the event)
|
wb-ready.wb-actionmng
|
Triggered automatically after an wb-actionmng is initialized. | Used to identify when an wb-actionmng has initialized (target of the event)
|
wb-init.wb-doaction
|
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
|
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
|
Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
|
Source code
Report a problem on this page
- Date modified: