X-Editable header small text goes here...
| Field Name | Field Value | Description |
|---|---|---|
| Username | superuser | Simple text field |
| Firstname | Required text field, originally empty | |
| Sex | Select, loaded from js array. Custom display | |
| Group | Admin | Select, loaded from server. No buttons mode |
| Error While Loading | Active | Error when loading list items |
| Plan vacation? | 25.02.2022 | Datepicker |
| Date of birth | Date field (combodate) | |
| Setup event | Datetime field (combodate) | |
| Meeting start | 15/03/2022 12:45 | Bootstrap datetime |
| Comments |
awesome user! |
Textarea. Buttons below. Submit by ctrl+enter |
| Type State | Twitter typeahead.js | |
| Fresh fruits | Checklist | |
| Tags | html, javascript | Select2 (tags mode) |
| Country | Select2 (dropdown mode) | |
| Address | Your custom input, several fields | |
| Notes |
WYSIWYGWYSIWYG means What You See Is What You Get.But may also refer to:
Source:wikipedia.org |
[edit]
Wysihtml5 (bootstrap only). Toggle by another element |
<!-- required files -->
<link href="../assets/plugins/x-editable-bs4/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="../assets/plugins/x-editable-bs4/dist/inputs-ext/address/address.css" rel="stylesheet" />
<link href="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/address/address.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/lib/typeahead.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/typeaheadjs/typeaheadjs.js"></script>
<script src="../assets/plugins/x-editable-bs4/dist/inputs-ext/wysihtml5/wysihtml5.js"></script>
<script src="../assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script>
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/plugins/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"></script>
<script src="../assets/plugins/select2/dist/js/select2.full.min.js"></script>
<script src="../assets/plugins/jquery-mockjax/dist/jquery.mockjax.min.js"></script>
<script src="../assets/plugins/moment/min/moment.min.js"></script>
<!-- html -->
<a href="javascript:;" id="username" data-type="text" data-pk="1" data-title="Enter Username">
superuser
</a>
<!-- script -->
<script>
$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.inputclass = 'form-control input-sm';
$.fn.editable.defaults.url = '/post';
$('#username').editable();
</script> Popover edit mode is not supported in Bootstrap 5 yet.
We are now implement it with the inline edit mode until the plugin support with the popover in Bootstrap 5.