Inline Edits with Bootstrap Editable

Developed for http://stackoverflow.com/q/38462419

by Kabeer Shah

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<div>
  Dashboard represents summary for <span id="practice" class="bold"></span>, located in <span class="bold" id="city"></span> for provider <span class="bold" id="providers"></span>
</div>

<mark>only works on <a href='http://jsfiddle.net/xameeramir/b8eb83cb/' target='_blank'>http</a> </mark>

CSS

.bold {
  font-weight: bold;
  color: darksalmon;
}

JavaScript

$.fn.editable.defaults.mode = 'inline';
 $.fn.editable.defaults.showbuttons = false;
 $.fn.editable.defaults.type = 'select';

 var providers = [{
   value: 0,
   text: 'Select Provider'
 }, {
   value: 1,
   text: "1609079151"
 }, {
   value: 2,
   text: "1134127293"
 }, {
   value: 3,
   text: "1841291135"
 }, {
   value: 4,
   text: "1518960707"
 }, {
   value: 5,
   text: "1871575100"
 }];

 // make all items having class 'edit' editable
 $('#practice').editable({
   value: 0,
   source: [{
     value: 0,
     text: 'Select Practice'
   }, {
     value: 1,
     text: 'Bronze Medical Center'
   }, {
     value: 2,
     text: 'Mary Ann Health Center'
   }, {
     value: 3,
     text: 'Mary Jewish Medical'
   }, {
     value: 4,
     text: 'Parsonage Hospital'
   }, {
     value: 5,
     text: 'Wall Street Dental Clinic'
   }, {
     value: 6,
     text: 'Wall Street Medical Center'
   }]
 });

 $('#city').editable({
   value: 0,
   source: [{
     value: 0,
     text: 'Select City'
   }, {
     value: 1,
     text: 'Detroit'
   }, {
     value: 2,
     text: 'Ann Arbor'
   }, {
     value: 3,
     text: 'Bay City'
   }]
 });

 $('#providers').editable({
   value: 0,
   source: providers
 });

 $('#practice').on('save', function(e, params) {
   alert(params.newValue);
 });