JSFiddle - React, Tailwind, and code Playground

by Doug Hill

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>
<h4>X-editable: autotext option for select</h4>
<p>Originally element is empty, but text is rendered when editable applied.</p>    
<div style="margin: 150px">
    Group: <a href="#" id="group" data-type="select" data-value="3" data-source="/groups"></a>
</div>

JavaScript

//ajax emulation
$.mockjax({
    url: '/post',
    status: 200,
    responseTime: 200
});

$.mockjax({
    url: '/groups',
    status: 200,
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
         {value: 0, text: 'Guest'},
         {value: 1, text: 'Service'},
         {value: 2, text: 'Customer'},
         {value: 3, text: 'Operator'},
         {value: 4, text: 'Support'},
         {value: 5, text: 'Admin'}
       ];
     }        
});

$('#group').editable({
    url: '/post',    
    pk: 1,    
    title: 'Select group'
});