x-Editable

by Reusablecode

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: render server response into element</p>
<div style="margin: 150px 0 0 150px">
    <a href="#" id="username">awesome</a>
</div>

JavaScript

$('#username').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'Enter username',
    display: function(value, response) {
        //render response into element
        $(this).html(response);
    }
});



//ajax emulation. 
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
       this.responseText = 'New value: <b>'+settings.data.value+'</b>';
   }
});