admin管理员组文章数量:1326636
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:
- Populate the container with tags with markup
- Get the clean tags (without markup) to be fetched the x-editable widget
- After doing the changes on the x-editable widget, return the clean tags and send them to the server
- 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:
- Populate the container with tags with markup
- Get the clean tags (without markup) to be fetched the x-editable widget
- After doing the changes on the x-editable widget, return the clean tags and send them to the server
- 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?
Share Improve this question edited Apr 4, 2013 at 13:51 David Planella asked Apr 4, 2013 at 13:45 David PlanellaDavid Planella 2,3533 gold badges25 silver badges30 bronze badges1 Answer
Reset to default 6I'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 indata-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.
本文标签: javascriptHow to format tags with select2 and xeditableStack Overflow
版权声明:本文标题:javascript - How to format tags with select2 and x-editable - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742208288a2433226.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论