2

I'm a little confused as to which _destroy or destroy method in a jQuery UI Widget to implement.

In this MSDN Widget Reference it says to implement destroy(), but in this Tutorial Plus reference it says to implement _destroy().

Both references say those methods should return the element to it's pre-widget state. So that part I understand, but why are there two versions of this method in the widget factory?

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • 3
    Why not look to the jQuery UI documentation for the jQuery UI widget system instead of the microsoft MSDN or a tutorials Plus reference? – Kevin B Apr 08 '13 at 18:16
  • There's both a destroy method: http://api.jqueryui.com/jQuery.widget/#method-destroy and a _destroy method: http://api.jqueryui.com/jQuery.widget/#method-_destroy each with a different purpose. One is public, the other is private. when you call the public, it eventually delegates to the private method. – Kevin B Apr 08 '13 at 18:19
  • @KevinB It does not answer the above question with it's simple two sentence documentation of those methods. – Reactgular Apr 08 '13 at 18:19
  • I think it does. you should implement only the ones that your specific widget needs. If you don't need to clean up common events etc and only need to clean up widget specific stuff, then only implement the private one. – Kevin B Apr 08 '13 at 18:20
  • @Kevin, actually, the underscore prefix in jQuery UI widget methods means `protected` rather than `private`. But yes, the public `destroy()` method delegates to `_destroy()`. Widgets are now supposed to override the protected method instead of the public one. – Frédéric Hamidi Apr 08 '13 at 18:21
  • private was obviously enough to express which one i was referring to though. – Kevin B Apr 08 '13 at 18:23

2 Answers2

2

Read the docs from jQuery UI and not on MSDN

http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

// Use the destroy method to clean up any modifications your widget has made to the DOM
destroy: function() {
  // In jQuery UI 1.8, you must invoke the destroy method from the base widget
  $.Widget.prototype.destroy.call( this );
  // In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method
}

});

epascarello
  • 204,599
  • 20
  • 195
  • 236
  • "In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method". Can you clarify what the means, because I'm using jQuery UI 1.10. Should I `not` call this._super() at the end of destroy()? – Reactgular Apr 08 '13 at 18:22
  • @Mathew, after double-checking, that depends. Does your widget directly inherit from `ui.widget`? – Frédéric Hamidi Apr 08 '13 at 18:26
  • 1
    It is saying it would just be `_destroy : function(){ /* your code here */ }` – epascarello Apr 08 '13 at 18:28
  • Ok thanks. See this wasn't clear to me. I think the UI docs need to be updated to better reflect this for new users like myself. – Reactgular Apr 08 '13 at 18:29
  • 1
    You can always look at the source of the jQuery widgets yourself and see what they do. – epascarello Apr 08 '13 at 18:31
1

Just to clarify (and based on this):

In jQuery UI 1.8 your widget should look like so:

$.widget( "demo.widget", {
    destroy: function() {
        // Invoke the base destroy method
        $.Widget.prototype.destroy.call( this );
        // Perform widget-specific cleanup
        ...
    }
});

and in jQuery UI 1.9, like so:

$.widget( "demo.widget", {
    _destroy: function() {
        // Perform widget-specific cleanup
        ...
    }
});

That is, in 1.9 you shouldn't define a (public) destroy method; define _destroy instead; and within it there is no need to call the base call destructor.

Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • Note that if you're [extending another widget](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/), it looks like you *do* need to call `this._super()` in your widget's _destroy -- if not, the destructors won't run for the widget you're extending. – medmunds Oct 04 '15 at 20:52