JQuery UI widget "destroy" method - inconsistent errors

Wow, my first question is about StackOverflow!

For the jQuery UI wizards that are there, I am stuck on this, which requires a lot. I have read all the api documentation and continue to be empty.

So this example is very simple, and don’t worry about why I am doing this, I am just looking for an explanation of the simple inconsistency in jQuery UI .destroy()when calling the widget.


In my first example, I call the method destroyin the datepicker widget, and then reinitialize it as a datepicker widget. This works as I expected. Since datepicker does not currently exist, the method is destroyignored and the datepicker widget is created.

$("#datepicker").datepicker("destroy").datepicker();

In my second example, I selected another widget, a button this time. I try to make an exact exact method, as in my first example, except for this moment, I get an error message: Error: cannot call methods on a button before initialization; tried to call the destroy method

$("#button").button("destroy").button();

So how and why is this happening? The documentation reads the same for both datepicker widgets ; button . It seemed strange to me that it will be implemented only for the datepicker widget, and not for all other jQuery UI widgets.


Just in case anyone is interested, I can reproduce the same results in Chrome 47.0.2526.106 m and IE 11.0.9600.18097 (update 11.0.25)


, , , , , , . , .

(function ($){
  try {
    $("#datepicker").datepicker("destroy").datepicker();
  }
  catch (e) {
    $("#datepickerError").html(e);
  }
  
  try {
    $("#button").button("destroy").button();
  }
  catch (e) {
    $("#buttonError").html(e);
  }
  
  try {
    $("#dialog").dialog("destroy").dialog(); 
  }
  catch (e) {
    $("#dialogError").html(e);
  }
})(window.jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<input type="text" id="datepicker" />
<br />
<span id="datepickerError">(no error)</span>
<br /><br />
<input type="button" id="button" value="Button" />
<br />
<span id="buttonError">(no error)</span>
<br />
<br />
<div id="dialog" title="test"></div>
<br />
<span id="dialogError">(no error)</span>
+4
1

, , DatePicker jquery , factory, . $.fn . ,

$.fn.datepicker = function(options){

factory factory, factory :

$.widget( "ui.button", { .... });

, , factory.

http://wiki.jqueryui.com/w/page/12137778/Datepicker

, :

, factory API jQuery

factory - , , , , , , . DatePicker factory, , , factory , , , jquery , jquery, , .

, jquery ui DatePicker , , , . . factory , . UI Core . . ! $.widget.bridge.

if ( !instance ) {
    return $.error( "cannot call methods on " + name + " prior to initialization; " + 
    "attempted to call method '" + options + "'" );
}

, , , . _destroyDatepicker. $.fn , , datePicker, , destroy -

if (!$target.hasClass(this.markerClassName)) {
    return;
}

, , , , , - .

, . . , , , .

+1

Source: https://habr.com/ru/post/1624177/


All Articles