JSFiddle - React, Tailwind, and code Playground

by Ted Jardine

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link rel="stylesheet" href="http://gent.softcatala.org/dplanella/select2/css/select2.css">
<script src="http://gent.softcatala.org/dplanella/select2/js/select2.js"></script>
<a href="#" class="team" data-type="select2" data-pk="1" data-source="/list" data-value="100" data-text="Team A" data-name="home" data-title="Update home team" data-url="/post">Team A</a>

<a href="#" class="team" data-type="select2" data-pk="1" data-source="/list2" data-value="103" data-text="Team D" data-name="away" data-title="Update away team" data-url="/post">Team D</a>

JavaScript

// `/list` emulation
$.mockjax({
    url: '/list',
    responseTime: 400,
    responseText: [
        {id: 100, text: 'Team A'},
        {id: 101, text: 'Team B'},
        {id: 102, text: 'Team C'}
    ]
}); 

$.mockjax({
    url: '/list2',
    responseTime: 400,
    responseText: [
        {id: 103, text: 'Team D'},
        {id: 104, text: 'Team E'},
        {id: 105, text: 'Team F'}
    ]
}); 

$('a.team').editable({
    ajaxOptions: {
        dataType: 'json',
        type: 'POST'
    },
    emptytext: 'TBD',
    placement: 'bottom',
    success: function (response, newValue) {
        return editableResponse(response, newValue);
    },
    select2: {
        allowClear: true,
        placeholder: 'Select a team',
        width: '200px',
        id: function (item) {
            return item.id;
        },
        ajax: {
            dataType: 'json',
            results: function (data, page) {
                return { results: data };
            }
        },
    }
});


// `/post` emulation
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
           this.status = 200;  
    }
});