CODEWITHSUNDEEP
jquery-ui
Amit
Amit

Reputation: 46323

Why is $(...).widget undefined?

According to jQueryUI Widget Factory documentation, it should be possible to call a method named widget on a jQuery object to manipulate the widget. For example:

$( ".selector" ).widget({
  disabled: true
});

However, trying to call this method throws an exception, and it actually appears that $(...).widget is undefined:

$('#btn').button();
$('body').append('<br/><br/>$(\'#btn\').widget is ' + $('#btn').widget);
console.log($('#btn').widget);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<button id="btn">Button</button>

Is the documentation wrong / out of date, or is there something else I'm missing here?

Upvotes: 2

Views: 2514

Answers (2)

blgt
blgt

Reputation: 8205

The documentation is perhaps a bit confusing. It uses the name "widget" as a placeholder for your custom widget, in order to provide an example of the options/methods provided by the default base widget. JQueryUI itself never provides a widget with the explicit name "widget". You can use

$.widget("ns.widget", {});

to make the sample run the way it is.

Also, note that due to the inheritance model, instantiating a derived widget on a node will only create the data for the derived widget, not for the base. Thus you can only call methods with the name of the instantiated widget:

$.widget("ns.subButton", $.ui.button, {});
$("#btn").subButton();
$("#btn").subButton("widget"); // <- correct use
$("#btn").button("widget"); // <- error


$.widget("my.widget", {});
$('#btn').widget();
$('body').append('<br/><br/>$(\'#btn\').widget is ' + $('#btn').widget);
console.log($('#btn').widget);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<button id="btn">Button</button>

Upvotes: 1

Matteo Tassinari
Matteo Tassinari

Reputation: 18584

After reading the docs you linked, it seems correct though misleading: I think here widget is meant to be replaced with the actual widget name, for example dialog or menu or whatever.

In fact, in order for example to enable or disable a button, one usually calls:

$('#your_button').button('disabled', true);

and to access the widget itself:

$('#your_button').button('widget');

Upvotes: 1

Related Questions