I am having an issue with Boostrap multi-select selected count not working after my AJAX call.
I have a parent list that I make multiple selections from, which then sends an AJAX call to retrieve the ids and text of the child list.
I am using JSON data to append additional checkboxes (li items) on the success function of my call. I also am adding the <option> items to my select as I thought that would have fixed the issue.
For some reason, now, when I click a checkbox in my new child list of the new checkboxes, the label in the control is not keeping a record of my selected count.
Can anyone help me understand what I am missing? I have seen some recommendations to re-initialize multi-select after creating my list items, but this has not made a difference.
$jq.ajax({
async: false,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: 'Messages.aspx/GetSeriesforFormIds',
data: "{'data':'" + JSON.stringify(formIds) + "'}",
success: function(data) {
//debugger;
if (data.d != null) {
var $checkboxContainer = $('.ddlchkSeriesCheckboxes .multiselect-container');
var temp = data.d;
if (temp != '') {
//debugger;
var obj = $.parseJSON(temp);
debugger;
var $container = $('.ddlchkSeriesCheckboxes select');
if ((obj != '') && (obj.data.length > 0)) {
for (i = 0; i < obj.data.length; i++) {
$container.append('<option value="' + obj.data[i].Id + '">' + obj.data[i].text + '</option>')
$checkboxContainer.append('<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="' + obj.data[i].Id + '">' + obj.data[i].text + '</label ></a ></li >')
}
}
}
}
debugger;
//$('.ddlchkSeriesCheckboxes select').multiselect('reload');
},
error: function(response) {
//alert(JSON.stringify(response));
}
});<select size="4" name="ctl00$ContentPlaceHolder1$ddlchkSeries$ddlListBox" multiple="multiple" id="ctl00_ContentPlaceHolder1_ddlchkSeries_ddlListBox" class="ddlchkBox form-control form-select" style="display: none;">
<option value="30">EDB</option>
<option value="31">JDBW</option>
<option value="32">KLD</option>
<option value="72">JDSW</option>
<option value="84">KLD2</option>
<option value="30">EDB</option>
<option value="31">JDBW</option>
<option value="32">KLD</option>
<option value="58">CMB</option>
<option value="72">JDSW</option>
<option value="84">KLD2</option>
</select>The Html checkboxes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="ddlchkSeriesCheckboxes">
<style>
.btn-group {
width:fit-content;
border: 1px solid #000000;
}
.btn-group ul {
width:500px !important;
}
.btn-group ul li:hover{
/*border:1px solid red;*/
background-color: #3D59AB;
color:white;
}
</style>
<div class="form-group col-sm-5">
<select size="4" name="ctl00$ContentPlaceHolder1$ddlchkSeries$ddlListBox" multiple="multiple" id="ctl00_ContentPlaceHolder1_ddlchkSeries_ddlListBox" class="ddlchkBox form-control form-select" style="display: none;">
<option value="30">EDB</option><option value="31">JDBW</option><option value="32">KLD</option><option value="72">JDSW</option><option value="84">KLD2</option><option value="30">EDB</option><option value="31">JDBW</option><option value="32">KLD</option><option value="58">CMB</option><option value="72">JDSW</option><option value="84">KLD2</option></select><div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-bs-toggle="dropdown" title="All" aria-expanded="false"><span class="multiselect-selected-text">All</span></button><ul class="multiselect-container dropdown-menu" style=""><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="30">EDB</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="31">JDBW</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="32">KLD</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="72">JDSW</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="84">KLD2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="30">EDB</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="31">JDBW</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="32">KLD</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="58">CMB</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="72">JDSW</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="84">KLD2</label></a></li></ul></div>
</div>
<script type="text/javascript">
$(function () {
$('[id*=ddlListBox]').multiselect({
includeSelectAllOption: false,
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'
}
});
});
</script>
</div>
You need to sign in to view this answers
Leave feedback about this