Extender plugin jQuery

Question

I’m working on a project that uses the library X-Editable with Bootstrap 3. Throughout the page are several instances of the plugin, however, there was a need for some instances to have a different template. Reading the library documentation I discovered that I can make the modifications through:

$.fn.editableform.buttons

But this ends up affecting all the other X-editables on the page. My question here is how I can make this change only for certain instances. There is how to extend this plugin and change this default behavior, being referenced as something like this:

$(selector).customEditable();

I don’t really know much about jQuery, what I have so far is this:

(function($){
$.fn.customEditable = function(options) {

    // var defaults = {
        editableform = {
            buttons: '<button type="button" class="btn btn-primary btn-sm editable-trigger"><i class="glyphicon glyphicon-edit"></i></button>',
        }
    // };

    var options = $.extend({}, editableform, options);

    //Here you can create your extended functions, just like a base plugin.

    return this.each(function() {

        //Execute your normal plugin
        $(this).editable(options);

        console.log('customEditable');
    });
};

})(jQuery);

But still I can’t do editableform.Buttons overwrite for this custom plugin!

Answer 1

Example

In this example you can use a specific class to indicate who will have the custom behavior. In the example I set I used the class 'editableCustom'.

Functioning

The code is very simple. I overwritten the part of the plugin that shows the buttons to check if there is an editableCustom class in the element that will show the Popover. If it exists, display the Popover with the data of the editableCustom variable. This variable contains the custom model.

$.fn.editableform.customButtons = 
    '<button type="submit" class="btn btn-success editable-submit"><i class="icon-ok icon-white"></i></button>'+
    '<button type="button" class="btn btn-danger editable-cancel"><i class="icon-remove"></i></button>'+
    '<button type="button" class="btn editable-cancel3 editable-remove"><i class="icon-trash"></i></button>';
    
$.extend($.fn.editableform.Constructor.prototype, {
    initButtons: function() {
        var el = this.options.scope;
        var isCustom = $(el).hasClass("editableCustom");
        
        var $btn = this.$form.find('.editable-buttons');
        $btn.append($.fn.editableform[isCustom? 'customButtons' : 'buttons']);
        
        if(this.options.showbuttons === 'bottom') {
            $btn.addClass('editable-buttons-bottom');
        }
        
        this.$form.find('.editable-submit').button({
            icons: { primary: "ui-icon-check" },
            text: false
        }).removeAttr('title');
        this.$form.find('.editable-cancel').button({
            icons: { primary: "ui-icon-closethick" },
            text: false
        }).removeAttr('title');
    }
});

$('.editableDefault,.editableCustom').editable();

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>

<h4>X-editable: display checklist as UL</h4>
<ul id='lista'>
    <li class='editableDefault'>Editable Default</li>
    <li class='editableDefault'>Editable Default</li>
    <li class='editableCustom'>Editable Custom</li>
    <li class='editableCustom'>Editable Custom</li>
</ul>