Search code examples
javascriptjquery-uidestroyjquery-ui-widget-factory

How to destroy a jQuery UI widgets from within it's prototype

I've gotten on board to using the Widget Factory for creating plugins. However I can't seem to find a way to destroy the plugin from within.

In all the examples and tutorials I've found so far they destroy the plugin from the DOM. Which is all good and well but I would also like to be able to destroy the plugin from within my prototype.

Say for example the plugin is invoked with incorrect parameters or a incorrect element or after some time it does not validate. I would like to be able to call this.destroy() afterwards and destroy the plugin. When i call this.destroy() it does call the $.Widget.prototype.destroy() and my subsequent _destroy() method but the instance is still on the DOM element. Only when calling $(el).pluginName('destroy') does it get truly destroyed.

Quick example here

Say we have some html

<p>Lorem ipsum</p>

and our jQuery UI widget, which aims to destroy it as soon as it's created

$.widget('ns.test', {
    _create: function() {
        this.destroy();
    },

    _destroy: function() {}
});

and we invoke the pluging so

$('p').test();

I would expect that the instance would not be set on the $('p') but it is

$('p').data();
>> Object {ns-test: $.widget.$.(anonymous function).(anonymous function)}

Only when calling the method from the DOM it gets destroyed

$('p').test('destroy');
>> Object {}

Any thoughts anyone?

Solution

  • +blgt insight was more or less correct. So I'm adding it and accepting it.

    You can call this.destroy() from any method other than _create and _init and it will work as you expect, but I'm not entirely sure why. Probably has something to do with how the .data data is managed