Bootstrap-switch plugin for X-editable

toggleswitch.js

/**
 ToggleSwitch editable input.

 @class toggleswitch
 @extends abstractinput
 @final
 @example
 <a href="#" id="toggleswitch" data-type="toggleswitch" data-pk="1"></a>
 <script>
 $(function(){
    $('#toggleswitch').editable({
        mode: 'inline',
            showbuttons: false,
            onblur: 'ignore',
            onchange: 'submit',

            bootstrap_switch: false,
            bootstrap_switch_options: {
                onText: 'YES',
                offText: 'NO',
                onColor: 'success',
                offColor: 'danger',
                size:'mini',
                inverse: true
            },

            pk: 2,
            url: '/post',
            title: 'Verified',
        }).editable('show');
});
 </script>
 **/
(function ($) {
    "use strict";

    var ToggleSwitch = function (options) {
        this.init('toggleswitch', options, ToggleSwitch.defaults);
    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(ToggleSwitch, $.fn.editabletypes.abstractinput);

    $.extend(ToggleSwitch.prototype, {
        /**
         Renders input from tpl. Can return jQuery deferred object.
         Can be overwritten in child objects

         @method render()
         **/
        render: function () {
            this.$input = this.$tpl.find('input');
            this.setClass();
        },

        /**
         Sets element's html by value.

         @method value2html(value, element)
         @param {mixed} value
         @param {DOMElement} element
         **/
        value2html: function (value, element) {
            var html = value === true ? 'ON' : 'OFF';
            $(element).html(html);
        },

        /**
         Converts element's html to value

         @method html2value(html)
         @param {string} html
         @returns {mixed}
         **/
        html2value: function (html) {
            /*
              ** This is unused for now, will be used in future **
              you may write parsing method to get value by element's html
              but for complex structures it's not recommended.
              Better set value directly via javascript, e.g.
              editable({
                  value: {
                      checked: "Yes",
                      unchecked: "No",
                  }
              });
            */
            return;
        },

        /**
         Converts value to string (for internal compare). For submitting to server used value2submit().

         @method value2str(value)
         @param {mixed} value
         @returns {string}
         **/
        value2str: function (value) {
            return (value === 1 || value === true) ? 1 : 0;
        },

        /**
         Converts string received from server into value. Usually from `data-value` attribute.

         @method str2value(str)
         @param {string} str
         @returns {mixed}
         **/
        str2value: function (str) {
            return (str === 1 || str === true) ? true : false;
        },

        /**
         Sets value of input.

         @method value2input(value)
         @param {mixed} value
         **/
        value2input: function (value) {
            this.$input.prop('checked', value);
        },

        /**
         Returns value of input.

         @method input2value()
         **/
        input2value: function () {
            if (this.options.bootstrap_switch === true) {
                return this.$input.bootstrapSwitch('state');
            }
            return this.$input.prop("checked");
        },

        /**
         Activates input. For text it sets focus on the first field.

         @method activate()
         **/
        activate: function () {
            var onchange = this.options.onchange;
            if (this.options.bootstrap_switch === true) {
                var bootstrap_switch_options = this.options.bootstrap_switch_options;
                // Merge onSwitchChange callback to other bootstrap-switch options
                $.extend(bootstrap_switch_options, {
                    'onSwitchChange': function (event, state) {
                        if(onchange === 'submit' || onchange === 'submitandshow') {
                            $(this).closest('form').submit();
                        }
                    },
                });
                this.$input.bootstrapSwitch(bootstrap_switch_options);
            } else {
                this.$input.on('change', function () {
                    if(onchange === 'submit' || onchange === 'submitandshow') {
                        $(this).closest('form').submit();
                    }
                });
            }
        },

        /**
         Attach handler to automatically submit form when value changed (useful when buttons not shown)

         @method autosubmit()
         **/
        autosubmit: function () {
            var onchange = this.options.onchange;
            this.$input.closest('.editable-container').siblings('.editable').on('hidden', function (e, reason) {
                if (onchange === 'submitandshow') {
                    if (reason === 'save' || reason === 'nochange') {
                        $(this).editable('show');
                    }
                }
            });

            this.$input.on('keydown', function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        }
    });

    ToggleSwitch.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        /**
         HTML template of input. Normally you should not change it.

         @property tpl
         @type string
         @default <div></div>
         **/
        tpl: '<div class="editable-toggleswitch"><input type="checkbox"></div>',

        /**
         Action when user changes the input value in container. Can be <code>submit|submitandshow|ignore</code>.
         Setting <code>ignore</code> allows to have several containers open.

         @property onchange
         @type string
         @default 'ignore'
         **/
        onchange: 'ignore',

        /**
         Enable bootstrap-switch plugin

         @property bootstrap_switch
         @type boolean
         @default false
         **/
        bootstrap_switch: false,

        /**
         Bootstrap-Switch options goes here as json Object. for example
         {
           onText: 'ON',
           offText: 'OFF',
           onColor: 'primary',
           offColor: 'default',
           size:'normal',
           inverse: false
         }

         @property bootstrapSwitch
         @type json
         @default {}
         **/

        bootstrap_switch_options: {},

    });

    $.fn.editabletypes.toggleswitch = ToggleSwitch;

}(window.jQuery));

You can use this script with () or without () bootstrap-switch plugin:

.editable('show') is to make sure that the control is always shown
If bootstrap_switch: true make sure you include bootstrap-switch library (tested with v3.3.4)

html:

<span>Verified:</span>
    <span id="verified"
      data-type="toggleswitch"
      data-value="{'true'}">
</span>

script:

$('#verified').editable({
    mode: 'inline',
    showbuttons: false,
    onblur: 'ignore',
    pk: 2,
    url: '/post.php',
    title: 'Verified',

    // toggleswitch specific options
    onchange: 'submit',
    bootstrap_switch: true,
    bootstrap_switch_options: {
        onText: 'YES',
        offText: 'NO',
        onColor: 'success',
        offColor: 'danger',
        size:'mini',
        inverse: true
    },
}).editable('show');