EditableOfficial Website

Editable for Bootstrap In-place editing with Bootstrap Form and Popover. About. Invokes in-place editing feature to any element of your page.

CSS
<!-- Editable css -->
<link rel="stylesheet" href="{% static 'libs/bootstrap-editable/css/bootstrap-editable.css' %}" type="text/css" />
Javascript
<!-- Editable js -->
<script src="{% static 'libs/bootstrap-editable/js/index.js' %}"></script>
<script src="{% static 'libs/moment/min/moment.min.js' %}"></script>
Initjs (Custom js)
<!-- File upload js -->
<script src="{% static 'js/pages/form-xeditable.init.js' %}"></script>
Add Package
yarn add bootstrap-editable --save
Remove Package
yarn remove bootstrap-editable or you can remove package by removing specific package from package.json
Examples:
Title Javascript
Simple Text Field 
$('#inline-username').editable({
        type: 'text',
        pk: 1,
        name: 'username',
        title: 'Enter username',
        mode: 'inline',
        inputclass: 'form-control-sm'
    });
Empty text field, required 
$('#inline-firstname').editable({
        validate: function (value) {
            if ($.trim(value) == '') return 'This field is required';
        },
        mode: 'inline',
        inputclass: 'form-control-sm'
    });
Select, local array, custom display 
$('#inline-sex').editable({
        prepend: "not selected",
        mode: 'inline',
        inputclass: 'form-select form-select-sm',
        source: [
            {value: 1, text: 'Male'},
            {value: 2, text: 'Female'}
        ],
        display: function (value, sourceData) {
            var colors = {"": "#98a6ad", 1: "#5fbeaa", 2: "#5d9cec"},
                elem = $.grep(sourceData, function (o) {
                    return o.value == value;
                });

            if (elem.length) {
                $(this).text(elem[0].text).css("color", colors[value]);
            } else {
                $(this).empty();
            }
        }
    });
Combodate 
$('#inline-dob').editable({
    mode: 'inline',
    inputclass: 'form-select form-select-sm'
});
Textarea, buttons below. Submit by ctrl+enter 
$('#inline-comments').editable({
    showbuttons: 'bottom',
    mode: 'inline',
    inputclass: 'form-control-sm'
});
© Skote.