Currently, as I work on developing an ASP.NET web application, I find myself facing significant challenges in getting the bootstrap-select feature to function correctly.
Despite browsing through various threads on SO for solutions, the problem remains unresolved, prompting me to seek assistance today.
Within the web application, there exists a master page that includes declarations to integrate all the necessary CSS and JavaScript files:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>MCTC - <%=Page.Title%></title>
<link href="../Content/styles.css" rel="stylesheet" /> <!-- Bootstrap CSS -->
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" /> <!-- jQuery-UI CSS -->
<link href="../Content/bootstrap-select.css" rel="stylesheet" /> <!-- Bootstrap-select CSS -->
<link href="../content/bootstrap-datepicker3.css" rel="stylesheet"/> <!-- Bootstrap-datepicker CSS -->
<link href="../content/mctc_styles.css" rel="stylesheet" /> <!-- custom site CSS -->
<script src="../../scripts/jquery-3.6.0.min.js"></script>
<script src="../../scripts/bootstrap.bundle.min.js"></script>
<script src="../../scripts/bootstrap-select.js"></script>
<script src="../../scripts/jquery-ui-1.13.1.js"></script>
<script src="../../scripts/bootstrap-datepicker.js"></script>
</head>
Within the content page, a bootstrap-select element is utilized to display a list of product categories fetched through an AJAX request. Below is the HTML markup for the bootstrap-select:
<div class="row mb-4">
<div class="col-lg-10 offset-lg-1 text-center">
<select class="selectpicker" id="ddlCategories" name="ddlCategories">
<option value="">Choose</option>
</select>
</div>
</div>
At the end of the $(document).ready(function () { script part, the following 2 lines pertain to the bootstrap-select:
$('#ddlCategories').selectpicker();
loadCategories();
The invocation of loadCategories() involves the following code snippet to perform an AJAX call for retrieving a record of category items from the database:
function loadCategories() {
$.ajax({
url: 'getcategories.ashx',
data: null,
method: 'post',
dataType: 'json',
success: function(response) {
$('#ddlCategories').empty();
for (var i = 0; i < response.length; i++) {
alert(response[i].Category_ID + '='+response[i].Title);
$('#ddlCategories').append("<option value='" + response[i].Category_ID + ">" + response[i].Title + "</option>");
}
$('#ddlCategories').selectpicker('refresh'); // without the []
},
error: function (e) {
console.log(e.responseText);
}
});
}
An alert call has been included to confirm data retrieval, which validates successfully.
Upon running the code, the on-screen output is as shown in the following image:
https://i.sstatic.net/4SvO8.png
No error messages appear in the console window, leaving me perplexed at the non-functioning bootstrap-select control. Despite trying multiple sequence variations of JS and CSS file loading in the master page, the issue persists, failing without any visible indication.
Your valuable assistance in resolving this matter would be immensely appreciated.