Inline Edits with Bootstrap Editable

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>

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);
});