6

I have been trying without success to get multiselect to function as expected. I can wrap the multiSelect call like the following and it works, but for some reason if it is not wrapped like the immediate example code, it does not work.

(function ($) {
    $(function () {
        $('#mySelectList').multiSelect();
    })
})(jQuery);

I could get over this annoyance if I could call $('#keep-order').multiSelect('select', 'whatIwant');

But calling the multiselect select does not work elsewhere due to the scope, if I understand correctly.

Here is what I right now, if it helps. To clarify, the below will work, except the bit marked with "does not work".

Here is the html loading scripts:

<link type="text/css" href="~/css/multiselect/multiselect.css" rel="stylesheet" />
<link type="text/css" href="~/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="~/js/quicksearch/jquery.quicksearch.js"></script>
<script type="text/javascript" src="~/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/multiselect/multiselect.js"></script>
<script type="text/javascript" src="~/Scripts/myjavascript.js"></script>

Contents of myjavascript.js

    // This is a combination of quicksearch and multiselect.
; (function ($) {
    $(function () {
        $('#mySelectList').multiSelect({
            keepOrder: true,
            selectableHeader: "<div class='searchTitle'>Select: Sap</div><input type='text' id='searchSelectable' class='search-input' autocomplete='off' placeholder='Search: Sap'>",
            selectionHeader: "<div class='searchTitle'>Selection:</div><input type='text' class='search-input' autocomplete='off' placeholder='Search: Selection'>",
            afterInit: function (ms) {
                var that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                    .on('keyup', function (e) {
                        if (e.which === 40) {
                            that.$selectableUl.focus();
                            return false;
                        } else if (e.which === 86 && e.ctrlKey) { // Ctrl + V
                            // ############################################ //
                            // ######## The following does not work ######## //
                            // ############################################ //
                            $('#mySelectList').multiSelect('select', 'something');
                        });

                        $('#searchSelectable').val('');

                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
            },
            afterDeselect: function () {
                this.qs1.cache();
                this.qs2.cache();
            }
        });

        // Hide everything until multiselect does its thing
        $("#hideReady").show();
    })
})(jQuery);
Jeff Click
  • 889
  • 9
  • 20
  • Can you confirm that your conditional is actually passing? i.e., `e.which === 86 && e.ctrlKey` is evaluating to true at some point? – monners Jul 23 '18 at 22:30
  • @monners yes, I have been able to confirm that the conditional is passing and by pasting into the textbox it evaluates to true. – Jeff Click Jul 24 '18 at 12:42
  • 2
    Are you encountering any errors? Can you post a snippet or JSFiddle for testing? – Munim Munna Jul 24 '18 at 18:33
  • @Munim Munna I get a "Function not found" error when trying to call `$('#keep-order').multiSelect('select', 'whatIwant');` Additionally, if I try instantiating the multiselect (4th line in the JS code) without wrapping it like this `(function ($) { $(function () { $('#mySelectList').multiSelect(); }) })(jQuery);` it gives the same error, that function multiSelect does not exist. – Jeff Click Jul 24 '18 at 18:38
  • If you do not wrap like that it should not work, this is how it works, the first function is the `jQuery` wrapper and the second one goes to `document.ready` event of `jQuery`. Are you using multiple `jQuery`? Multiple version of `jQuery` or loading `jQuery` in multiple places in your HTML? – Munim Munna Jul 24 '18 at 18:55
  • Huzzah. Initially I was going to say, "only one version of jquery is loaded" but I checked all of the sources and found jquery being loaded in one of the template pages. `` – Jeff Click Jul 24 '18 at 19:29
  • @MunimMunna, I was wrong, it's bootstrap that is competing with it... Post an answer so I can send you the reputation :) – Jeff Click Jul 24 '18 at 19:51
  • Glad to hear that, if the problem solved outside the scope of the question, that question should not be answered, answers posted should not be accepted, the question should rather be closed as it's deemed unhelpful for any future visitor. The system will take care of it after bounty expires. Keep up the good work :) – Munim Munna Jul 24 '18 at 20:08
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176720/discussion-between-jeff-click-and-munim-munna). – Jeff Click Jul 25 '18 at 12:44

0 Answers0