Inline Edits with Bootstrap Editable

by 1eddy87

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>
<p>X-editable: submit via PUT method</p>
<div style="margin: 5px">
    This is the <span pk="1" id="username1" data-showbuttons="true" data-mode="popup" data-placement="right">awesome</span> user.<br>
	<table class="table table-striped">
        <thead><tr><th>Name</th><th>Value</th><th>Comments</th></tr></thead>
        <tbody>
            <tr><td>Parm 1</td><td><span class="edit">Value 1</span></td><td><span class="edit">Editable coments about the field</span></td></tr>
            <tr><td>Parm 2</td><td><span class="edit">Value 2</span></td><td>Some coments about the field. Errors maybe.</td></tr>
            <tr><td>Parm 3</td><td><span class="edit">Value 3</span></td><td>Errors maybe.</td></tr>
            <tr><td>Parm 4</td><td><span class="edit">Value 4</span></td><td>Some coments about the field</td></tr>
        </tbody>
    </table>
    <br><a href="#" class="btn" id="savebtn">Save</a> <a href="#" class="btn" id="resetbtn">Reset</a>
</div>

JavaScript

// setting defaults for the editable
$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.showbuttons = false;
$.fn.editable.defaults.url = '/post';
$.fn.editable.defaults.type = 'text';

// make all items having class 'edit' editable
$('.edit').editable();

// make username1 editable
$('#username1').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200,
    response: function(settings) {
        console.log('done!');
    }
}); 

// this is to automatically make the next item in the table editable
$('.edit').on('save', function(e, params){
    var that = this;
    // persist the old value in the element to be restored when clicking reset
    var oldItemValue = $(that)[0].innerHTML;
    if (!$(that).attr('oldValue')) {
        console.log('persisting original value: ' + oldItemValue)
    	$(that).attr('oldValue', oldItemValue);
    }
    setTimeout(function() {
        // first search the row
        var item = $(that).closest('td').next().find('.edit');
        console.log(item);
        if (item.length == 0) {
            // check the next row
            item = $(that).closest('tr').next().find('.edit');
        }
        item.editable('show');
    }, 200);
});

$('#resetbtn').click(function() {
    $('.edit').each(function() {
        var o = $(this);
        o.editable('setValue', o.attr('oldValue'))	//clear values
         .editable('option', 'pk', o.attr('pk'))	//clear pk
         .removeClass('editable-unsaved')
    	 .removeAttr('oldValue');
    });
});

$('#savebtn').click(function() {
   $('.edit').editable('submit', { 
       url: '/post', 
       //ajaxOptions: { dataType: 'json' },           
       success: function(data, config) {
           $(this).removeClass('editable-unsaved') //remove unsaved class
           		  .removeAttr('oldValue');	// clear oldValue
       },
       error: function(errors) {
          ...