Twitter Bootstrap Question posted in

Problems implementing bootstrap-multiselect checkbox using Jquery /ASP-Twitter bootstrap

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.stack.imgur.com/jrvyK.png

Here is what it ends up looking like for me. . .
[![My Failed Version][2]][2] [2]: https://i.stack.imgur.com/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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    For selecting id this is the best practice

    <script type="text/javascript">
    $(function () {
        $("#lstFruits").multiselect({
            includeSelectAllOption: true
        });
    });
</script>

    and if designing is not working then try to give some inline tag in the dropdown box with in the style tag.

    but i marked jquery is works flowlesly by selecting the class name which denoted by ".class" like this

    <script type="text/javascript">
$(function () {
    $("#lstFruits").multiselect({
        includeSelectAllOption: true
    });
});
    Login or Signup to reply.
  3. 0

    I found this a day too late, but it is terrific to know that I haven’t lost my mind just yet. I found another example earlier today that works nicely and is driven by a dropdown list and not a list box, which I like better anyhow, in the event someone else ever needs it. Thank you.

    Here’s the link:
    https://www.aspsnippets.com/questions/155676/Bind-TextBox-based-on-multi-select-DropDownList-using-C-and-VBNet-in-ASPNet/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search