Problems implementing bootstrap-multiselect checkbox using Jquery /ASP

I have been working on this all day and have progressively backed off to the most basic sample I could find. It just appears I am not successfully implementing Jquery. Is there some simple step I am missing beyond the code? An import or reference in VS2019? As I read it, I should be able to reference everything I need with a CDN. This is a reference that I used as a sample

https://www.aspsnippets.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-in-ASPNet-using-jQuery.aspx

After spending the day with this

http://davidstutz.github.io/bootstrap-multiselect/ which seems to be the hub around which all of the samples are fashioned. It all makes sense. It all compiles. But for some reason, my listboxes look like regular old list boxes, not the fancy lists with checkboxes that are demonstrated in all of these links.

I am confident this is some simple reference problem. ..I am a Jquery novice but I cant accomplish this task server side unfortunately.

Here is the sample code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Sandbox.About" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=lstFruits]').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
        <asp:ListItem Text="Mango" Value="1" />
        <asp:ListItem Text="Apple" Value="2" />
        <asp:ListItem Text="Banana" Value="3" />
        <asp:ListItem Text="Guava" Value="4" />
        <asp:ListItem Text="Orange" Value="5" />
    </asp:ListBox>
    <asp:Button Text="Submit" runat="server" OnClick="Submit" />
    </form>
</body>
</html>

And the code behind. . .nothing relevant here. . .

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Sandbox
{
    public partial class About : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
        protected void Submit(object sender, EventArgs e)
        {
            foreach (ListItem item in lstFruits.Items)
            {
                if (item != null && item.Selected)
                {
                    string Name = item.Text;
                    string Value = item.Value;
                    // write your code here to save to database
                }
            }
        }
    }
}

Here is what it should look like: [![bootstrap multiselect checkbox][1]][1] [1]: https://i.sstatic.net/jrvyK.png

Here is what it ends up looking like for me. . . [![My Failed Version][2]][2] [2]: https://i.sstatic.net/65m6S.png

Which looks alot like a normal listbox. . .making me think my jquery code is not even recognized. I originally thought I had some other css impacting it, but I removed everything from my project css file as well.

So. . .If anyone has thoughts on what I may be forgetting to do, Id appreciate it.

Solution

As I suspected, this came down to something simple:

Where I referenced the external files:

<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

I changed to https:

With this change everything worked. I am NOT sure why as I can browse to either the ssl or non-ssl address. There must be a setting somewhere in VS2019 or web config or something. . .but that was THE ENTIRETY of the issue.

That being said, I spent a long time on this issue and I want to point out that in asp that the # reference identifier does not in fact work here (where it would in a css reference for example).

This WORKS:

$('[id*=lstFruits]').multiselect(function () {    
    includeSelectAllOption: true
})

This DOES NOT WORK:

$('#lstFruits').multiselect(function () {    
    includeSelectAllOption: true
})

If a class is added:

<asp:ListBox ID ="lstFruits" runat="server" class="fruit" SelectionMode="Multiple">

This WORKS:

$('.fruit').multiselect(function () {    
    includeSelectAllOption: true
})

As for the # target selector. . .if I have a button like:

<button id="Button2">Click</button>

Then THIS jquery function will work with that target ID:

$(document).ready(function () {
    $("#Button2").click(function () {
      alert("Hello World");    
    });
});

However, as soon as it becomes an asp button

<asp:Button Text="Submit" runat="server" id="Button1" />

I need to use:

$(document).ready(function () {
    $("[id*=Button1]").click(function () {
       alert("Hello World");    
    });
});