jQuery UI widget method call

The jQuery UI widget method calls

This section describes two ways to call the jQuery UI widget (widget) method.

Widgets are created by using the Widget Factory method to change their initialized state and perform actions. There are two ways to call widget methods - plug-ins created through widget Factor, or methods on element instance objects.

Plug-in call

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

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

If the method requires parameters, pass them to the plug-in as additional parameters. Click here to see how to call dialog's option() method.

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

This returns the value of height option.

The instance call

Each instance of each widget is jQuery.data() I n order to retrieve the instance object, call jQuery.data() with the full name of the widget as the key name. This is shown in the following example.

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

After you reference an instance object, you can call the method directly above.

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

In jQuery UI 1.11, the instance() approach makes the process easier.

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

Returns the type

Most methods called through widget plug-ins return jQuery so method calls can be linked through additional jQuery methods. W hen a call is made on the instance, a undefined This is shown in the following example.

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 exception is those methods that return information about the widget. For example, dialog(dialog) isOpen() method.

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

This results in TypeError because isOpen() returns a Boolean value instead of a jQuery object.