xeditable bootstrap4 + fontawesome5 + adhoc css

xeditable bootstrap4 + fontawesome5 + adhoc css

by frallain

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<div class="container">

  <h1>X-editable starter template</h1>

  <div>
    <span>Username:</span>
    <a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a>
  </div>

  <div>
    <span>Status:</span>
    <a href="#" id="status"></a>
  </div>


</div>

CSS

.glyphicon-ok::before {
  content: "\f00c";
}

.glyphicon-remove::before {
  content: "\f00d";
}

.glyphicon {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-style: normal;
}

JavaScript

$(document).ready(function() {
  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'inline';

  //make username editable
  $('#username').editable();

  //make status editable
  $('#status').editable({
    type: 'select',
    title: 'Select status',
    placement: 'right',
    value: 2,
    source: [{
      value: 1,
      text: 'status 1'
    },
             {
               value: 2,
               text: 'status 2'
             },
             {
               value: 3,
               text: 'status 3'
             }
            ]
    /*
            //uncomment these lines to send data on server
            ,pk: 1
            ,url: '/post'
            */
  });
});