Sélection de la langue

Recherche


Exécuter des actions - Documentation

Needs translation

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.

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

Détails de la page

Date de modification :