JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
    <div>
        <button id="controller">Update</button>
    </div>

<div class="editable" data-asset="tags"></div>


<div id="console">
</div>

JavaScript

$.fn.editable.defaults.mode = 'popup';

var count = 4, sources = [];

for(var i = 1; i <= count; i++){
    sources.push({ id : i, text : 's-'+String(i) })
}

var getSource = function() {
    //i want this function must be called whenever available options is rendred. to ensure NO references issues, i used JSON.parse
    return JSON.parse(JSON.stringify(sources));
};

var getQuery = function(options){
    options.callback({ results : getSource() });
};

var getInitSel = function(multiple) {
    return function(el, cb){
        var t, toSet = [], sc = getSource();
        el[0].value.split(',').forEach(function(a){
            t = _.findWhere(sc, { id : Number(a.trim()) });
            if(t) toSet.push(t);
        });
        cb(multiple ? toSet : (toSet.length ? toSet[0] : null));
    };
};

/*
$('#controller').click(function(e){
    count++;
    sources.push( {id : count, text : 's-'+String(count) });
    //$('#username').editable('option', 'source', getSource()); //  <---------------- THIS LINE HAS NO EFFECT SO PRODUCING UNDESIRED RESULT
    //with above line, the source option should get updated and should be handing the new records to render. but nothing happens such.
    //LUCKLY NO NEED TO UPDATE THE SOURCE, so commented above line
    $('#username').editable('setValue', [1, count]);
});
*/

$('[data-asset="tags"]').editable({  //to keep track of selected values in multi select
    type: 'select2',
    pk: 1,
    //url: '/post',
    autotext : 'always',
    source : getSource(),
    value : [1,2],
    emptytext: 'None',
    display: function(value, sourceData) {
    //alert(value)
       //display checklist as comma-separated values
       var html = [],
           checked = $.fn.editableutils.itemsByValue([1, 4], getSource(), 'id');
           
           //alert(checked)
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       }
       /*
     ...