YouTip

# jQuery UI Widget Method Calls Widgets are created using the (#) and use methods to change their state after initialization and perform actions. There are two ways to call widget methods - through the plugin created by the Widget Factory, or by calling methods on the instance object of the element. ### Plugin Invocation To use the plugin invocation method for a widget, pass the method name as a string. For example, click here to see how to call the [`close()` method of the dialog widget](#). $( ".selector" ).dialog( "close" ); If the method requires parameters, pass them as additional arguments to the plugin. Click here to see how to call the [`option()` method of the dialog](#). $( ".selector" ).dialog( "option", "height" ); This will return the value of the [`height` option of the dialog](#). ### Instance Invocation Each instance of every widget is stored on the element using [`jQuery.data()`](http://api.jquery.com/jQuery.data/). To retrieve the instance object, call `jQuery.data()` using the widget's full name as the key. As shown in the example below. var dialog = $( ".selector" ).data( "ui-dialog" ); Once you have a reference 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 makes this process simpler. $( ".selector" ).dialog( "instance" ).close(); ### Return Types Most methods called via the widget's plugin invocation will return a `jQuery` object, so method calls can be chained with additional jQuery methods. When called on an instance, they return `undefined`. As shown in 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 makes it possible to// chain method calls with other jQuery functions dialog.dialog( "close" ) .css( "color", "red" ); The exception is methods that return widget-related information. For example, the [`isOpen()` method of the dialog](#). $( ".selector" ) .dialog( "isOpen" ) // This will throw a TypeError .css( "color", "red" ); This will produce a `TypeError` because `isOpen()` returns a boolean value, not a jQuery object.