JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

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: MVC pattern in editable interface</p>
<div style="margin-top: 50px">
    <div style="text-align: right">
        <button id="controller" style="float: left">Click me</button>
        <strong>controller:</strong> show/hide editable popup
    </div>
    
    <div style="margin-top: 70px; text-align: right">
        <strong>model:</strong> store value and position popup
        <div style="text-align: left; float: left">
            <a href="#" id="model" data-value="custom value">model</a>
        </div>    
    </div>        
    <div style="margin-top: 70px; text-align: right">
       
        <div id="view" style="width: 150px; height: 50px; padding: 10px; border: solid 1px gray; float: left"></div>
        <strong>view:</strong> display value on page        
    </div>            
</div>

JavaScript

$('#model').editable({
    send: 'never',  
    title: 'Enter username',
    placement: 'right',
    toggle: 'manual',
    display: function(value) {
        $('#view').text(value);
    }
});

$('#controller').click(function(e){
    e.stopPropagation();
    $('#model').editable('toggle');
});