-
Notifications
You must be signed in to change notification settings - Fork 481
Adding article on jQuery widget method invocation. #417
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
Closed
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
--- | ||
title: Widget Method Invocation | ||
level: intermediate | ||
--- | ||
|
||
Widgets created with [the widget factory](/jquery-ui/widget-factory/) use methods to change their state and perform actions after initialization. There are two ways widget methods can be invoked - through the plugin created by the widget factory, or by invoking the method on the element's instance object. | ||
|
||
### Plugin Invocation | ||
|
||
To invoke a method using the widget's plugin, pass the name of the method as a string. For example, here is how you call the [dialog widget's `close()` method](http://api.jqueryui.com/dialog/#method-close). | ||
|
||
``` | ||
$( ".selector" ).dialog( "close" ); | ||
``` | ||
|
||
If the method requires arguments, pass them as additional parameters to the plugin. Here is how you call [dialog's `option()` method](http://api.jqueryui.com/dialog/#method-option). | ||
|
||
``` | ||
$( ".selector" ).dialog( "option", "height" ); | ||
``` | ||
|
||
This returns the value of the [dialog's `height` option](http://api.jqueryui.com/dialog/#option-height). | ||
|
||
### Instance Invocation | ||
|
||
Under the hoods, every 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. Let's look at each. | ||
|
||
``` | ||
var dialog = $( ".selector" ).data( "ui-dialog" ); | ||
``` | ||
|
||
After you have a reference to the instance object, methods can be invoked on it directly. | ||
|
||
``` | ||
var dialog = $( ".selector" ).data( "ui-dialog" ); | ||
dialog.close(); | ||
``` | ||
|
||
In jQuery UI 1.11, the new `instance()` method will make this process even easier. | ||
|
||
``` | ||
$( ".selector" ).dialog( "instance" ).close(); | ||
``` | ||
|
||
### Return Types | ||
|
||
Most methods invoked through the widget's plugin will return a `jQuery` object so the method call can be chained with additional jQuery methods. | ||
|
||
``` | ||
$( ".selector" ) | ||
.dialog( "close" ) | ||
.css( "color", "red" ); | ||
``` | ||
|
||
The exception to this are methods that return information about the widget. For example [dialog's `isOpen()` method](http://api.jqueryui.com/dialog/#method-isOpen). | ||
|
||
``` | ||
$( ".selector" ) | ||
.dialog( "isOpen" ) | ||
// This will throw a TypeError | ||
.css( "color", "red" ); | ||
``` | ||
|
||
This produces a `TypeError` error as `isOpen()` returns a boolean, not a jQuery object. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about a line comment above the
.css
call, something like// this will throw a TypeError
(or whatever it throws). That will make the issue more clear, since the two examples look very similar.