jQuery UI widget method call

Widgets (Widgets) are created through the Widget Factory using methods to change their initialized state and perform actions. There are two ways to call widget methods - through a plugin created by the Widget Factory, or by calling a method on an element instance object.

Plug-in call

Use the widget's plug-in call method and pass the method name as a string. For example, click here to see how to call the close() method of a dialog widget.

$( ".selector" ).dialog( "close" );

If the method requires parameters, please pass them to the plugin as additional parameters. Click here to see how to call the option() method of dialog.

$( ".selector" ).dialog( "option", "height" );

This returns the value of the dialog's height option.

Instance calls

Each instance of each widget is stored on the element using jQuery.data(). To retrieve an instance object, call jQuery.data() using the widget's full name as the key. The details are shown in the following examples.

var dialog = $( ".selector" ).data( "ui-dialog" );

After you refer to 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 will make this process easier.

$( ".selector" ).dialog( "instance" ).close();

Return type

Most methods called through a widget's plugin will return a jQuery object, so method calls can be chained through additional jQuery methods. When called on an instance, undefined is returned. The details are shown in the following examples.

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 makes it possible to
// chain method calls with other jQuery functions
dialog.dialog( "close" )
    .css( "color", "red" );

The exceptions are those methods that return information about widgets. For example, the isOpen() method of dialog.

$( ".selector" )
    .dialog( "isOpen" )
    // This will throw a TypeError
    .css( "color", "red" );

This will generate a TypeError error because isOpen() returns a Boolean value, not a jQuery object.