Bootstrap-select won’t drop down when clicked in ASP.NET web application

I am building an ASP.NET web application, and I am having serious trouble getting bootstrap-select to work properly.

I have looked at other posts on SO on this, and nothing seems to fix the issue, so I’m hoping I can get some help today.

The web application uses a master page, which contains the following declarations to include all of the 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>

JavaScript
​x
 
<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>
​

In the content page I have a bootstrap-select which is intended to display a list of product categories which are retrieved using an AJAX call. The HTML for the bootstrap-select is as follows:

        <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>

JavaScript
 
        <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 section, I have the following 2 lines of code related to the bootstrap-select:

$('#ddlCategories').selectpicker();
loadCategories();

JavaScript
 
$('#ddlCategories').selectpicker();
loadCategories();
​

The call to loadCategories() uses the following code to make an AJAX call to retrieve a list of category records from the database. Here is that code:

        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);
                }
            });
        }

JavaScript
 
        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);
                }
            });
        }
​

I included a call to an alert to ensure the data is being returned, and it is.

When I execute this code, here’s what I get on-screen:

I get no errors or messages in the console window, so I don’t know what the issue is, but clicking the bootstrap-select control does nothing – it doesn’t drop down, and it doesn’t show the data either. Whatever’s going on, it fails silently. I thought maybe it had to do with the order I have the Javascript and CSS files loading in the master page, and I’ve followed every example I can find, but it still doesn’t seem to work.

Any help that can be provided would be GREATLY appreciated.

Answer

The short answer to this is that bootstrap-select doesn’t work with Bootstrap 5. When I regressed to version 4.1.3, it now works. Hopefully this is fixed soon.

Advertisement

Answer