I have some multiselects inside a popover, but whenever the popover closes, the multiselect is deleted, is there a way to put a multiselect inside a popover without it losing the selected data?
in the code I create the multiselect when I click the button, I believe this may be the cause of the problem, but I couldn't find another way to add multiselect to the popover. I followed one of the answers to this question:
https//stackoverflow.com/questions/ 22409391/how-to-put-a-multiselect-in-a-popover
that is my code:
let popover_filters = '<div id="popover_filters" class="text-center">'+
'<select id="activity_filter_sector" class="form-control" name="multiselect[]" multiple="multiple" alt="setor" required>'+
'<option value="0">Contábil e Financeiro</option>'+
'<option value="1">Fiscal e Tributário</option>'+
'<option value="2">Pessoal e Trabalhista</option>'+
'<option value="3">Gestão e controladoria</option>'+
'</select>'+
'<select id="activity_filter_company" class="form-control" name="multiselect[]" multiple="multiple" alt="empresa" required>'+
'<option value="0">Contábil e Financeiro</option>'+
'<option value="1">Fiscal e Tributário</option>'+
'<option value="2">Pessoal e Trabalhista </option>'+
'<option value="3">Gestão e controladoria Gestão e controladoria Gestão e controladoria</option>'+
'</select>'+
'<select id="activity_filter_status" class="form-control" name="multiselect[]" multiple="multiple" alt="status" required>'+
'<option value="0">agendado</option>'+
'<option value="1">concluído</option>'+
'<option value="2">pendente</option>'+
'<option value="3">em atraso</option>'+
'</select>'+
'<select id="activity_filter_users" class="form-control" name="multiselect[]" multiple="multiple" alt="usuários" required>'+
'<option value="0">Contábil e Financeiro</option>'+
'<option value="1">Fiscal e Tributário</option>'+
'<option value="2">Pessoal e Trabalhista</option>'+
'<option value="3">Gestão e controladoria</option>'+
'</select>'+
'</div>'
$('#activity_filter_btn').popover({
html:true, placement : 'bottom', content: popover_filters, trigger:'click',
}).on('click',function () {
$('#activity_filter_sector').multiselect()
$('#activity_filter_company').multiselect()
$('#activity_filter_status').multiselect()
$('#activity_filter_users').multiselect()
}).on("hide.bs.popover", function(){
let total = 0
total += $('#activity_filter_sector').val().length
total += $('#activity_filter_company').val().length
total += $('#activity_filter_status').val().length
total += $('#activity_filter_users').val().length
if (total >0){
$(this).addClass('btn-primary')
$(this).removeClass('btn-default')
}else{
$(this).addClass('btn-default')
$(this).removeClass('btn-primary')
}
});<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- multiselect -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" integrity="sha512-EvvoSMXERW4Pe9LjDN9XDzHd66p8Z49gcrB7LCUplh0GcEHiV816gXGwIhir6PJiwl0ew8GFM2QaIg2TW02B9A==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" integrity="sha512-aFvi2oPv3NjnjQv1Y/hmKD7RNMendo4CZ2DwQqMWzoURKxcqAoktj0nNG4LU8m23+Ws9X5uVDD4OXLqpUVXD5Q==" crossorigin="anonymous"></script>
<button id="activity_filter_btn"class="mt-3 btn btn btn-default"><i class="fas fa-filter mr-2"></i>Filtrar</button>One way to go about solving this is by storing your selected values somewhere that persists between popover open/ close.
On open, set the select values using .multiselect('select', [value_arr]).
On close, store the values, so that they'll be accessible next time the popover is opened.
I just used 4 variables here, but you could conceivably use any storage mechanism that's convenient to your project.
let popover_filters = '<div id="popover_filters" class="text-center">' +
'<select id="activity_filter_sector" class="form-control" name="multiselect[]" multiple="multiple" alt="setor" required>' +
'<option value="0">Contábil e Financeiro</option>' +
'<option value="1">Fiscal e Tributário</option>' +
'<option value="2">Pessoal e Trabalhista</option>' +
'<option value="3">Gestão e controladoria</option>' +
'</select>' +
'<select id="activity_filter_company" class="form-control" name="multiselect[]" multiple="multiple" alt="empresa" required>' +
'<option value="0">Contábil e Financeiro</option>' +
'<option value="1">Fiscal e Tributário</option>' +
'<option value="2">Pessoal e Trabalhista </option>' +
'<option value="3">Gestão e controladoria Gestão e controladoria Gestão e controladoria</option>' +
'</select>' +
'<select id="activity_filter_status" class="form-control" name="multiselect[]" multiple="multiple" alt="status" required>' +
'<option value="0">agendado</option>' +
'<option value="1">concluído</option>' +
'<option value="2">pendente</option>' +
'<option value="3">em atraso</option>' +
'</select>' +
'<select id="activity_filter_users" class="form-control" name="multiselect[]" multiple="multiple" alt="usuários" required>' +
'<option value="0">Contábil e Financeiro</option>' +
'<option value="1">Fiscal e Tributário</option>' +
'<option value="2">Pessoal e Trabalhista</option>' +
'<option value="3">Gestão e controladoria</option>' +
'</select>' +
'</div>';
//Initialize storage vars:
let sector = [];
let company = [];
let status = [];
let users = [];
$('#activity_filter_btn').popover({
html: true,
placement: 'bottom',
content: popover_filters,
trigger: 'click',
}).on('click', function() {
//On open, set selects to the stored values
$('#activity_filter_sector').multiselect('select', sector)
$('#activity_filter_company').multiselect('select', company)
$('#activity_filter_status').multiselect('select', status)
$('#activity_filter_users').multiselect('select', users)
}).on("hide.bs.popover", function() {
//On close, store the values
sector = $('#activity_filter_sector').val()
company = $('#activity_filter_company').val()
status = $('#activity_filter_status').val()
users = $('#activity_filter_users').val()
let total = 0
total += sector.length
total += company.length
total += status.length
total += users.length
if (total > 0) {
$(this).addClass('btn-primary')
$(this).removeClass('btn-default')
} else {
$(this).addClass('btn-default')
$(this).removeClass('btn-primary')
}
});<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- multiselect -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" integrity="sha512-EvvoSMXERW4Pe9LjDN9XDzHd66p8Z49gcrB7LCUplh0GcEHiV816gXGwIhir6PJiwl0ew8GFM2QaIg2TW02B9A==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" integrity="sha512-aFvi2oPv3NjnjQv1Y/hmKD7RNMendo4CZ2DwQqMWzoURKxcqAoktj0nNG4LU8m23+Ws9X5uVDD4OXLqpUVXD5Q==" crossorigin="anonymous"></script>
<button id="activity_filter_btn" class="mt-3 btn btn btn-default"><i class="fas fa-filter mr-2"></i>Filtrar</button>