Persistent Flags in Bootstrap Popovers Through Open
I have checkboxes inside a bootable popover that I use as part of the form. I am having a problem where users open the popover, select some checkboxes, close the popover, and then reopen the popover. A newly opened popover does not show the fields that the user checked the last time they opened the popover. I need custom settings to persist across all popover launches.
I assumed this problem was related to the template I am using without having any checkboxes marked as selected, so I tried to write some javascript for the checkboxes in the template when I check the checkboxes in my popover, but it doesn't work that way.
Here is my HTML:
<form>
<div id='filters-container' style='display: none;'>
<div id="div_id_filters" class="form-group">
<label for="id_filters_0" class="control-label">Filter</label>
<div class="controls ">
<div class="checkbox"><label><input type="checkbox" name="filter" id="id_filter_1" class="filter filters_1" value="Filter1">Filter1</label></div>
<div class="checkbox"><label><input type="checkbox" name="filter" id="id_filter_2" class="filter filters_2" value="Filter2">Filter2</label></div>
<div class="checkbox"><label><input type="checkbox" name="filter" id="id_filter_3" class="filter filters_3" value="Filter3">Filter3</label></div>
<!-- etc etc more filters -->
</div>
</div>
</div>
<button id='filter-btn' data-contentwrapper='#filters-container' class='btn' rel="popover" type="button">Filter</button>
<input class='btn' type="submit" value="Search">
</form>
<script>
// Open the popover
$('[rel=popover]').popover({
html:true,
placement:'bottom',
content:function(){
return $($(this).data('contentwrapper')).html();
}
});
// Close popover on click on page body outside popover
$('body').on('click', function (e) {
$('[rel="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
// My attempt to persist changes by modifying all occurrences of a changed checkbox class
// So that the next time the popover is created, the template will be the same
// as the previously opened popover
// NOT WORKING
$(document).on("change",".filters",function(){
// Make a selector to get both the popover and the template instances of the checkbox
var selector = '.' + $(this).attr('class');
// Set both equal to the recently changed box
var isChecked = $(this).checked;
$(selector).prop('checked', isChecked);
});
</script>
Here is a jsFiddle
I also, as a test, made a template that I use to make the popover visible and checked some fields on it to see if the checkboxes would also be checked in the popover and they weren't ... so it seems like the popover can't get the state checkbox from template.
source to share
Update the property of the checked item. Check if the checkbox is checked or not and apply the action as shown below. Refer this work jsFiddle
$(document).on("change",".filter",function(){
// Get id of checkbox clicked.
var itemIndex = $(this).attr("id").split("_")[2];
// find original element
var orig = $('#filters-container').find('.filter:eq(' + (itemIndex - 1)+ ')');
// add or remove checked property to the original content accordingly.
if($(this).is(":checked")) {orig.attr('checked','checked');}
else{orig.removeAttr('checked'); }
});
source to share