Extend Boot Plugin

Question

In my previous question, I talked about the bootstrap select plugin, where the destroy method does what I don't want. I manually edit the plugin, but this is not a good practice.

Bootstrap select destroy removes the original selection from the DOM

I would like to extend the plugin with a custom method so that it can do exactly what I want.

I extend the plugin with the following method:

$.extend(true, $.fn.selectpicker.prototype, { customRemove: function () { this.$newElement.remove(); this.$element.show(); } }); 

This is in another js file under the boot node, select the script file.

What should I call this new method? I tried the following without success:

 $('select#begin' + _week + _day).selectpicker("customRemove"); 

or

 $('select#begin' + _week + _day).selectpicker().customRemove(); 

Did I miss something?

The original method of the destroy function in the bootstrap select plugin:

 remove: function () { this.$newElement.remove(); this.$element.show(); } 

Answer 1

You can proxy a function with your own function using a mix closure, for example:

 (function() { // grab a reference to the existing remove function var _remove = $.fn.selectpicker.prototype.remove; // anything declared in here is private to this closure // so you could declare helper functions or variables // ... // extend the prototype with your mixin $.extend(true, $.fn.selectpicker.prototype, { // this will replace the original $.fn.selectpicker.prototype.remove function remove: function () { // call whatever code you want here // ... // ... like grabbing the DOM element // ... // then call the original remove function _remove.apply(this, arguments); // then call whatever you want here, like re-adding the DOM element } }); }()); 

Note. This will override the prototype for all Bootstrap samples and change their behavior.

Answer 2

I think you have the correct answer in another question:
fooobar.com/questions/979222 / ...

 jQuery.fn.selectpicker.Constructor.prototype.customRemove = function () { this.$newElement.remove(); this.$element.show(); }; 

then

 $smth.selectpicker("customRemove");