I'm writing an application based on Django and Bootstrap that displays media files as thumbnails, along with a description and tags. I'd like these tags to be styled as regular Bootstrap labels and to be clickable.

I'm using X-editable to individually edit the description and tags (via Select2) inline and send them back to the server. That works well except for the tags. I cannot manage to:

1. Populate the container with tags with markup
2. Get the clean tags (without markup) to be fetched the x-editable widget
3. After doing the changes on the x-editable widget, return the clean tags and send them to the server
4. Add markup to the returned tags from the widget and re-populate the container with tags with markup.

Step 3 (sending clean data to the server) is something I can probably figure out or could be the subject of another question.

This fiddle should illustrate what I'm trying to do and the results: notice that when the edit button is clicked the widget loads the data with the unwanted markup.

HTML: X-editable tags setup and tag styling

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

Javascript: set up X-editable and Select2

$('.tags').editable({
    placement: 'right',
    select2: {
        tags: ['cake', 'cookies'],
        tokenSeparators: [",", " "]
    },
});

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

So the actual question is for steps 2 and 4: how can I strip the markup sent to the x-editable widget and re-add it to the results it returns?

I'm writing an application based on Django and Bootstrap that displays media files as thumbnails, along with a description and tags. I'd like these tags to be styled as regular Bootstrap labels and to be clickable.

I'm using X-editable to individually edit the description and tags (via Select2) inline and send them back to the server. That works well except for the tags. I cannot manage to:

1. Populate the container with tags with markup
2. Get the clean tags (without markup) to be fetched the x-editable widget
3. After doing the changes on the x-editable widget, return the clean tags and send them to the server
4. Add markup to the returned tags from the widget and re-populate the container with tags with markup.

Step 3 (sending clean data to the server) is something I can probably figure out or could be the subject of another question.

This fiddle should illustrate what I'm trying to do and the results: notice that when the edit button is clicked the widget loads the data with the unwanted markup.

HTML: X-editable tags setup and tag styling

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

Javascript: set up X-editable and Select2

$('.tags').editable({
    placement: 'right',
    select2: {
        tags: ['cake', 'cookies'],
        tokenSeparators: [",", " "]
    },
});

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

So the actual question is for steps 2 and 4: how can I strip the markup sent to the x-editable widget and re-add it to the results it returns?

• javascript
• jquery
• twitter-bootstrap
• jquery-select2

1 Answer 1

I've found out after some experimentation, although the solution is not 100% perfect.

• To preload data, I can use the data-value attribute in the HTML, as in data-value="apples, oranges, pie"
• To display data in the format I want, I specify a function for the display option in X-editable. Here's the relevant bit.

.

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(" "));

• To load clean data in the editing widget, I'm using the shown callback.

.

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

This fiddle shows the code and a working example.