Popover Html bootstrap content change not saved
I have the following popover settings:
popup icon launcher
<label id="settings-layout" class="icon-th" rel="popover" data-original-title="Switch Layout"></label>
Popover content
<div id="settings-layout-content" style="display:none;">
<ul style='margin-left:5px;' >
<li class='popover-list layout-list' data-id="badge">
<label class='icon-ok' style='color:#6ABD3D !important;position:relative;right:5px;'></label>
<label class='icon-th' style='position:relative; top:1px;right:4px;'></label>Badge
</li>
<li class='popover-list layout-list' data-id="table">
<label class='icon-ok' style='color:#6ABD3D !important;position:relative;right:5px;'></label>
<label class='icon-table' style='position:relative; top:1px;right:4px;'></label>Table
</li>
</ul>
</div>
* Script Assign content to move
$('.icon-th').popover({
html: true, placement: 'bottom',
trigger: 'manual', content: function () { return $('#settings-layout-content').html(); }
}).click(function (e) {
$('.icon-font').popover('hide');
$('.icon-filter').popover('hide');
$(this).popover('toggle');
e.stopPropagation();
});
Now when I click on one of the li inside the popover content, I change the content like this:
$('.layout-list').live('click', function () {
$(this).find(">:first-child").addClass("display");
});
This works great. But when I close the popover and click on the icon to show the popover again, the changes are not saved.
Any suggestions would be much appreciated.
source to share
The problem is you are sending a copy of the #settings-layout-content
html to the Popover plugin for display. When you click on a list item in the popup, the changes are applied to the items that were copied, and when the popup is closed, those items will be destroyed.
To save your changes, you need to apply them to the original element that you are copying into the popup content:
// .live() is deprecated, use .on() instead
$(document).on('click', '.layout-list', function () {
// get clicked item index used to matched the same element in the original content
var itemIndex = $(this).index();
// get original element that holds the popover content
var orig = $('#settings-layout-content').find('.layout-list:eq(' + itemIndex + ')');
// add the class to the original content
orig.children(":first").addClass("display");
// close the popover
$('#settings-layout').popover('hide');
});
Also . live () is deprecated, it is recommended to use . on () from now on.
Here's a DEMO on how it works: http://jsfiddle.net/ZdJUC/1/
source to share