jQuery UI Widget Method Invocation
Widgets are created by using methods to change their state and perform actions after initialization through the Widget Factory. There are two ways to invoke widget methods - through the plugin created by the Widget Factory, or by calling methods on the element's instance object.
Plugin Invocation
To use a widget's plugin method, pass the method name as a string. For example, click here to see how to invoke the dialog widget's close() method.
$( ".selector" ).dialog( "close" );
If the method requires parameters, pass them as additional arguments to the plugin. Click here to see how to invoke the dialog's option() method.
$( ".selector" ).dialog( "option", "height" );
This will return the value of the dialog's height option.
Instance Invocation
Each instance of a widget is stored on the element using jQuery.data(). To retrieve the instance object, call jQuery.data() using the widget's full name as the key. See the example below.
var dialog = $( ".selector" ).data( "ui-dialog" );
After referencing the instance object, you can call methods directly on it.
var dialog = $( ".selector" ).data( "ui-dialog" );
dialog.close();
In jQuery UI 1.11, the new instance() method simplifies this process.
$( ".selector" ).dialog( "instance" ).close();
Return Type
Most methods invoked through the widget's plugin will return a jQuery object, allowing method calls to be chained with additional jQuery methods. When invoked on the instance, they return undefined. See the example below.
var dialog = $( ".selector" ).dialog();
// Instance invocation - returns undefined
dialog.data( "ui-dialog" ).close();
// Plugin invocation - returns a jQuery object
dialog.dialog( "close" );
// Therefore, plugin method invocation allows chaining with other jQuery functions
dialog.dialog( "close" )
.css( "color", "red" );
An exception is made for methods that return information about the widget, such as the dialog's isOpen() method.
$( ".selector" )
.dialog( "isOpen" )
// This will throw a TypeError
.css( "color", "red" );
This will throw a TypeError because isOpen() returns a boolean value, not a jQuery object.