JSFiddle - React, Tailwind, and code Playground

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>
<h4>X-editable: display checklist as UL</h4>
<div style="margin: 100px 10px">
    <div>Groups: <a href="#" id="edit">[edit]</a></div>    
    <br>
    <div id="list"></div>
</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'}
       ];
     }        
});

$('#edit').editable({
    type: 'checklist',    
    source: '/groups',
    url: '/post',     
    pk: 1,    
    title: 'Select groups',
    placement: 'right',
    display: function(value, sourceData) {
        var $el = $('#list'),
            checked, html = '';
        if(!value) {
            $el.empty();
            return;
        }            
        
        checked = $.grep(sourceData, function(o){
              return $.grep(value, function(v){ 
                   return v == o.value; 
              }).length;
        });
        
        $.each(checked, function(i, v) { 
            html+= '<li>'+$.fn.editableutils.escape(v.text)+'</li>';
        });
        if(html) html = '<ul>'+html+'</ul>';
        $el.html(html);
    }
});