davidstutz Multiselect: options not passed

32 views Asked by At

We are working with the davidstutz multiselect plugin (https://davidstutz.github.io/bootstrap-multiselect/) and it seems that the options that we pass when initiating the select don't seem to be working.

If I log the options into the console, it seems like the value "false" is passed instead of the object with options.

Here's the relevant code:

<link href="/libraries/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css" rel="stylesheet">
<script src="/libraries/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js"></script>

(downloaded the latest version from github)

css (to ensure all dynamically created elements are initiated as well):

@keyframes initiate-select {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.initiate-select {
  animation-duration: 0.001s;
  animation-name: initiate-select;
}

initiation:

document.addEventListener("animationstart", function (event) {
    if (event.animationName == "initiate-select") {
      initiateSelect(event.target);
    }
});

var initiateSelect = function(select) {
  if ($(select).hasClass("initiate-select") && !$(select).hasClass("select-initiated")) {
    $(select).addClass("select-initiated");
    var nonSelectedText = 'None selected';
    var nSelectedText = 'selected';
    var allSelectedText = 'All selected';
    if(currentLanguage == 'nl') {
        nonSelectedText = 'Geen geselecteerd';
        nSelectedText = 'geselecteerd';
        allSelectedText = 'Allemaal geselecteerd';
    }
    var options = {
        enableFiltering: true,
        templates: {
            filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><div class="input-group-prepend"><i class="input-group-text fas fa-search"></i></div><input class="form-control multiselect-search" type="text" /><div class="input-group-append"><button class="multiselect-clear-filter input-group-text" type="button"><i class="fas fa-times"></i></button></div></div></div>'
        },
        buttonClass: 'form-control',
        buttonWidth: '100%',
        nonSelectedText: nonSelectedText,
        nSelectedText: nSelectedText,
        allSelectedText: allSelectedText
    }
    $(select).multiselect(options);
    $(select).multiselect('setOptions', options); // have tried both ways individually and combined as well, but nothing seems to be working
  }
}

The html instantiation:

<div class="col-md-2 title-col">
</div>
<div class="col-md-10">
    <div class="form-group">
        <label data-localize="contentInfosheetsGolfclub.overlayPicture">Customizable image</label>
        <select id="overlay-picture" name="overlay-picture" class="form-control overlay-picture-selector initiate-select" multiple>
        </select>
    </div>
</div>

The select is dynamically filled with options afterwards, might that be the problem? However that wouldn't explain why debugging the options returns nothing.

But unfortunately, none of the options work, the search isn't shown nor are the fields translated.

PS, i tried filling the select with options first and the initiating it, but same result.

0

There are 0 answers