<!-- 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/bootstrap@4.6.0/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>