This topic explains the events of the igPopover™ control and provides code examples of attaching event handlers.
The following topics are prerequisites to understanding this topic:
Using Events in Ignite UI for jQuery: This topic demonstrates how to handle events raised by Ignite UI for jQuery® controls. Also included is an explanation of the differences between binding events on initialization and after initialization.
igPopover Overview: This topic provides conceptual information about the igPopover control including its main features and functionality.
Adding igPopover: This topic explains, with code examples, how to add the igPopover control to an HTML page in either JavaScript or ASP.NET MVC.
This topic contains the following sections:
Attaching event handler functions to the Ignite UI for jQuery controls is commonly done upon the initialization of the control. When the event occurs, the handling function is called.
jQuery supports the following methods for assigning event handlers:
The following table discusses the details of each function:
| Function | Purpose |
|---|---|
| bind | Attaches an event handler to existing DOM elements that match a given selector. |
| live | Attaches an event handler to existing and any new DOM elements that match a given selector. Event handlers do not propagate up the DOM tree. |
| delegate | Attaches an event handler to existing and any new DOM elements that match a given selector. Event handlers do propagate up the DOM tree. |
| on | Attaches an event handler to existing and any new DOM elements that match a given selector. (The delegate function is obsolete in jQuery version 1.7, making on the preferred approach for establishing event handlers.) |
When using bind(), keep in mind that it attaches the specified handler only on the currently available elements, which means dynamically added items (after the DOM is loaded) aren't included in the event handler assignments.
From these, the delegate() method is the recommended one because it offers the best performance and allows the event handler to be automatically re-attached if the control instance is destroyed and then re-created.
The following table explains briefly the event handling cases related the igPopover. Further details are available after the table.
| Event handling case | Details |
|---|---|
| Handling events upon initialization in jQuery | When binding to events on widget initialization, you subscribe to the event using an option which in the following format:eventName: <handler>The valid settings for the eventName option are:
|
| Handling events at run-time in jQuery and ASP.NET MVC | You can assign the event handler to the name of a function in order to implement the handler outside control initialization. |
The following table summarizes the purpose and functionality of the events supported by the igPopover control.
| Event | Description |
|---|---|
| showing | Fired before showing the popover. |
| shown | Fired after showing the popover is shown. |
| hiding | Fired before hiding the popover. |
| hidden | Fired after hiding the popover is hidden. |
The following table lists the code examples included in this topic.
| Example | Description |
|---|---|
| Handling the Event Upon Initialization in jQuery | This example assigns an event handling function to the showingevent at initialization. |
| Handling the Event at Run-Time in ASP.NET MVC | This example assigns an event hander to the showing event at run-time. |
| Modifying the Content of igPopover in the Handler of the Event | This example demonstrates how to change the content of igPopover’s container using the handler for the showing event. |
| Re-Positioning igPopover in the Handler of the Event | This example demonstrates how to change the position of the popover container using the shown event at run-time. |
This example assigns an event handling function to the showing event at initialization.
In JavaScript:
$(".selector").igPopover({
showing: function(evt, ui) {
// Handle event
}
});
This example assigns an event handler for the showing event at run-time.
In JavaScript:
$(document).delegate(".selector", "igpopovershowing", function(evt, ui) {
// Handle event
});
This example demonstrates how to change the content of igPopover’s container using the handler for the showing event.
In JavaScript:
$(document).delegate(".selector", "igpopovershowing", function(evt, ui) {
// Handle event
ui.content = ui.content + “ Updated”;
});
This example demonstrates how to change the position of the popover container using the shown event at run-time.
In JavaScript:
$(document).delegate(".selector", "igpopovershown", function(evt, ui) {
// Handle event
var position = { top: 300, left: 450 };
$("#img1").igPopover("setCoordinates", position);
});
The following topics provide additional information related to this topic.
Configuring igPopover: This topic explains how to configure the content, activation, and positioning of the igPopover control.
Accessibility Compliance (igPopover): This topic explains the accessibility features of the igPopover control and provides information on how to achieve accessibility compliance for pages containing this control.
Known Issues and Limitations (igPopover): This topic provides information about the known issues and limitations of the igPopover control and the available workarounds for them.
jQuery and MVC API Links (igPopover): This topic provides links to the API reference documentation for the jQuery and its ASP.NET MVC helper class for the igPopover control.
The following samples provide additional information related to this topic.
Basic Usage: This sample demonstrates the igPopover control in an ASP.NET MVC scenario. The control is initialized in the View using chaining syntax.
ASP.NET MVC Basic Usage: This sample demonstrates the basic initialization scenarios (on a single target element and on multiple target elements) of igPopover in JavaScript.
View on GitHub