X-Editable tags example

by Farzad Cyrus

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/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/select2/select2.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/select2/select2.css">
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<table>
<tr>
  <td class="column column-3"><strong>Tags:</strong></td>
                                    <td class="column column-9">
                                        <span class="editable" data-asset="tags"></span>
                                        </td>
                                        <td>
                                        <div class="button-group">
                                            <button id="asset-button-tags-edit">Edit Tag</button>
                                            <button id="asset-button-tags-paste">Paste Tags</button>
                                        </div>
                                        </td>
</tr>
</table>


<!--
<div id="container" class="row">
    <div class="controls controls-row">      
    
        <span class="editable" data-asset="tags"
            data-toggle="manual" data-type="select2" data-pk="1"
            data-value=" " data-original-title="Enter tags"><span class="label">tag 1</span></span>
        <a href="#" id="tags-edit" data-editable="tags-editable-1" class=""><i class="icon-pencil"></i></a>
    </div>
</div>
-->

CSS

body {background: #fff;}

table {
  margin: 32px;
}

table td {border: 1px solid #dddddd;padding: 8px;vertical-align: top;}

table .editable {float: left;display:inline-block;}

table .button-group {margin: 0 8px;display: inline-block;float: left;}
table button {float: left;display: inline-block;}

JavaScript

//$.fn.editable.defaults.mode = 'popover';

var tags = ['50 Tons', 'Big Truck', 'Tractor', 'Sportscar', 'Mini'];


$('[data-asset="tags"]').editable({
    placement: 'right',
    type: 'select2',
    pk: 1,
    value: tags,
    select2: {
        tags: [],
        tokenSeparators: [",", " "]
    },
    display: function(value) {
        $.each(value,function(i){
           // value[i] needs to have its HTML stripped, as every time it's read, it contains
           // the HTML markup. If we don't strip it first, markup will recursively be added
           // every time we open the edit widget and submit new values.
           value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
        });
        $(this).html(value.join(" "));
    }
});

$('[data-asset="tags"]').on('shown', function() {
    var editable = $(this).data('editable');
    
    console.log(editable)
    
    value = editable.value
    $.each(value,function(i){
       value[i] = $('<p>' + value[i] + '</p>').text()
    });
});

$('#asset-button-tags-edit').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('[data-asset="tags"]').editable('toggle');
    
    //console.log($('#' + $(this).data('editable') ));
});

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