RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-25 22:36:03 +03:00
Code Issues Projects Releases Wiki Activity

Improvements to event docs (see #2)

Browse Source
This commit is contained in:
alexweissman 2017-09-22 12:19:30 -04:00
parent 2b8f165539
commit 139fb04f92
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/12.programmatic-control/01.add-select-clear-items/docs.md
View File

@ -85,15 +85,6 @@ $.ajax({
Notice that we manually trigger the `select2:select` event and pass along the entire `data` object. This allows other handlers to [access additional properties of the selected item](/programmatic-control/events#triggering-events). Notice that we manually trigger the `select2:select` event and pass along the entire `data` object. This allows other handlers to [access additional properties of the selected item](/programmatic-control/events#triggering-events).
### Limiting the scope of the `change` event
It's common for other components to be listening to the `change` event, or for custom event handlers to be attached that may have side effects. To limit the scope to **only** notify Select2 of the change, use the `.select2` event namespace:
```
$('#mySelect2').val('US'); // Change the value or make some change to the internal state
$('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
```
## Clearing selections ## Clearing selections
You may clear all current selections in a Select2 control by setting the value of the control to `null`: You may clear all current selections in a Select2 control by setting the value of the control to `null`:

23
pages/12.programmatic-control/04.events/docs.md
View File

@ -9,19 +9,20 @@ process:
never_cache_twig: true never_cache_twig: true
--- ---
Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions. Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions. You may also manually trigger these events on a Select2 control using `.trigger`.
| Event | Description | | Event | Description |
| ----- | ----------- | | ----- | ----------- |
| `change` | Triggered whenever an option is selected or removed. | | `change` | Triggered whenever an option is selected or removed. |
| `change.select2` | Scoped version of `change`. See [below](#limiting-the-scope-of-the-change-event) for more details. |
| `select2:closing` | Triggered before the dropdown is closed. This event can be prevented. | | `select2:closing` | Triggered before the dropdown is closed. This event can be prevented. |
| `select2:close` | Triggered whenever the dropdown is closed. <code>select2:closing</code> is fired before this and can be prevented. | | `select2:close` | Triggered whenever the dropdown is closed. `select2:closing` is fired before this and can be prevented. |
| `select2:opening` | Triggered before the dropdown is opened. This event can be prevented. | | `select2:opening` | Triggered before the dropdown is opened. This event can be prevented. |
| `select2:open` | Triggered whenever the dropdown is opened. <code>select2:opening</code> is fired before this and can be prevented. | | `select2:open` | Triggered whenever the dropdown is opened. `select2:opening` is fired before this and can be prevented. |
| `select2:selecting` | Triggered before a result is selected. This event can be prevented. | | `select2:selecting` | Triggered before a result is selected. This event can be prevented. |
| `select2:select` | Triggered whenever a result is selected. <code>select2:selecting</code> is fired before this and can be prevented. | | `select2:select` | Triggered whenever a result is selected. `select2:selecting` is fired before this and can be prevented. |
| `select2:unselecting` | Triggered before a selection is removed. This event can be prevented. | | `select2:unselecting` | Triggered before a selection is removed. This event can be prevented. |
| `select2:unselect` | Triggered whenever a selection is removed. <code>select2:unselecting</code> is fired before this and can be prevented. | | `select2:unselect` | Triggered whenever a selection is removed. `select2:unselecting` is fired before this and can be prevented. |
## Listening for events ## Listening for events
@ -75,8 +76,14 @@ $('#mySelect2').trigger({
}); });
``` ```
### What events can be prevented? How can I prevent a selection from being made? ### Limiting the scope of the `change` event
It's common for other components to be listening to the `change` event, or for custom event handlers to be attached that may have side effects. To limit the scope to **only** notify Select2 of the change, use the `.select2` event namespace:
```
$('#mySelect2').val('US'); // Change the value or make some change to the internal state
$('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
```
## Examples ## Examples
@ -128,6 +135,10 @@ function log (name, evt) {
} }
</script> </script>
## Preventing events
See https://stackoverflow.com/a/26706695/2970321.
## Internal Select2 events ## Internal Select2 events
Select2 has an [internal event system](/advanced/default-adapters/selection#eventrelay) that works independently of the DOM event system, allowing adapters to communicate with each other. This internal event system is only accessible from plugins and adapters that are connected to Select2 - **not** through the jQuery event system. Select2 has an [internal event system](/advanced/default-adapters/selection#eventrelay) that works independently of the DOM event system, allowing adapters to communicate with each other. This internal event system is only accessible from plugins and adapters that are connected to Select2 - **not** through the jQuery event system.