X-Editable tags example

by Avi Algaly

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>
<h4>X-editable: tags custom display </h4>

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

CSS

#container {
     margin: 100px 10px;
}

JavaScript

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

$('.tags').editable({
    placement: 'right',
    select2: {
        tags: ['cake', 'cookies'],
        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(" "));
    }
});

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

$('[id^="tags-edit-"]').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#' + $(this).data('editable') ).editable('toggle');
});

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