Error $option is undefined when clicking on an option in the multiselect

authyrtyr commented 9 years ago

If you have a div that's hidden and then shown that's containing a multiple select then you get an error when any of the options is clicked on. The exact error message TypeError: $option is undefined on line 477. After putting in some simple prints into the multiselect JS file I found that the source as far as I could follow was that $target.val() was an empty string. I was able to somewhat fix the problem in my site by creating the HTML for my select in the page after my show completed and then running multiselect then but it causes a jumpy effect during the show that isn't ideal. Here's my code that's generating the error. I'm using jQuery version 2.1.3 (but I also got the error with 1.10.1 which I was using before). I'm using bootstrap 3.x.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Manage Users</title>

        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- MetisMenu CSS -->
        <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
        <!-- Timeline CSS -->
        <link href="css/plugins/timeline.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/sb-admin-2.css" rel="stylesheet">
        <!-- Morris Charts CSS -->
        <link href="css/plugins/morris.css" rel="stylesheet">
        <!-- Custom Fonts -->
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <!-- Datepicker and Timepicker -->
        <link rel="stylesheet" href="datepicker/css/bootstrap-datepicker.css">
        <!-- multiselect -->
        <link rel="stylesheet" href="multiselect/dist/css/bootstrap-multiselect.css" type="text/css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Metis Menu Plugin JavaScript -->
        <script src="js/plugins/metisMenu/metisMenu.min.js"></script>
        <!-- Morris Charts JavaScript -->
        <script src="js/plugins/morris/raphael.min.js"></script>
        <script src="js/plugins/morris/morris.min.js"></script>
        <!-- // <script src="js/plugins/morris/morris-data.js"></script> -->
        <!-- Custom Theme JavaScript -->
        <script src="js/sb-admin-2.js"></script>
        <!-- Datepicker and Timepicker -->
        <script src="datepicker/js/bootstrap-datepicker.js"></script>
        <!-- Spectrum color picker -->
        <script src="spectrum/spectrum.js"></script>
        <link rel="stylesheet" href="spectrum/spectrum.css">
        <!-- multiselect -->
        <script src="multiselect/dist/js/bootstrap-multiselect.js"></script>

        <?php 
            require_once 'config.php';
            checkLogin($_SESSION['userID']);
        ?>

        <script>

            $(function(){
                //controls for the toggleAddUserForm
                $("#toggleAddUserForm").click(function(){
                    $("#addUserPanel select,input").val("");
                    $("#addUserPanel").slideToggle();
                });

                //load the user dropdown menu
                $("#userDropdownMenu").load("userDropdown.html");

                //call multiselect on the form elements
                $("#pageAccessList").multiselect();

            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <!-- Navigation -->
            <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.php">Manage Users</a>
                </div>
                <!-- /.navbar-header -->
                <ul class="nav navbar-top-links navbar-right" id="userDropdownMenu"></ul>
                <!-- /.navbar-top-links -->
                <div class="navbar-default sidebar" role="navigation">
                    <div class="sidebar-nav navbar-collapse" id="sideMenu"></div>
                    <!-- /.sidebar-collapse -->
                </div>
            </nav>
            <div id="page-wrapper">
                <div class="row">
                    <a href="#" class="btn btn-primary" id="toggleAddUserForm" style="margin-top: 5px;">Add User</a>
                    <div class="panel panel-default" id="addUserPanel" style="display: none;">
                        <div class="panel-body">
                            <form class="form">
                                <div class="form-group" id="usernameGroup">
                                    <label for="username">Username&nbsp;</label>
                                    <input type="text" id="username" class="form-control">
                                </div>
                                <div class="form-group" id="emailGroup">
                                    <label for="email">Email</label>
                                    <input type="email" id="email" class="form-control">
                                </div>
                                <div class="panel panel-default pageAccessPanel">
                                    <div class="panel-body">
                                        <div class="form-group" id="pageAccessListGroup">
                                            <label for="pageAccessList">Access List</label>
                                            <select id="pageAccessList" multiple="multiple">
                                                <option value="savedReports">Saved Reports</option>
                                                <option value="scheduledReports">ScheduledReports</option>
                                                <option value="dashboard">Dashboard</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /#page-wrapper -->
        </div>
    </body>
</html>

emergingdzns commented 9 years ago

Has anyone found the solution to this? I'm having the same problem sort of. The difference is that I don't have anything behind a hidden element. The multiselects load on the page and then the plugin does it's thing but if you inspect the checkbox element the "value" attribute is blank. If I console log the checkbox during the creation stage it says that the value is correct based on the select list but if I console log the "change" function value it's an empty string. I'm going nuts. Spent hours trying to fix this.

authyrtyr commented 9 years ago

I've been able to sort of solve it by running $("select").multiselect('rebuild'); every time I show() the surruondings. Certainly not perfect and it needs a bug fix but if you need your project to work I recommend trying this.

emergingdzns commented 9 years ago

@authyrtyr Thanks for the tip! I do have other non-multiple selects on the page so I had to do it by class or id, but that worked for all but the last one. The last one actually gets duplicated, the new one doesn't have the template applied but it is at least functional. I tried adding a delay on the rebuild. I tried renaming and everything else I could think of. Not sure why that one is having this problem. Thanks for the help though. The rebuild did the trick on the rest though.

davidstutz commented 9 years ago

I have not checked this yet, but as you were able to trace the problem to coming form the checkbox value being empty, this may be a result of the following line in your code:

$("#toggleAddUserForm").click(function(){
    // The following line resets all values, including checkboxes!
    // You intend to reset all selections and user input, but you would have to do this for
    // text inputs and checkboxes separately, because setting the value to "" for a
    // checkbox does not reset the selection!
    $("#addUserPanel select,input").val("");
    $("#addUserPanel").slideToggle();
});

davidstutz commented 9 years ago

I may add a similar example to the documentation, anyway just in case I am missing something.

adjenks commented 6 years ago

I had a similar error and it was because I was changing the value of a checkbox used internally by the multiselect. It looks like you are doing the same: $("#addUserPanel select,input").val(""); This probably selects more than what you think it does. Try to increase the specificity.

davidstutz / bootstrap-multiselect

Error $option is undefined when clicking on an option in the multiselect #512