Bootstrap-multiselect: Bootstrap multiselect does not work on bootstrap modal popup

[dsinghrs]

Hi,
I am facing problem with the multiselectnot working on bootstrap popup. Actually this multiselect I am building as part of ajax response and then showing this response in the bootstrap modal popup. While the same multiselectworks pretty well if it is embedded in the page and getting constructed with document.ready with code something like $('#multiselect_id').multiselect(). But the same arrangement is not working with above described scenario in case of ajax. I think multiselect is not binding in cases of ajax as it binds and initializes with document ready. Any help is well appreciated.

[davidstutz]

Yes, this issue was mentioned a couple of times and if I remember it right, this was also an issue using usual dropdowns within modals. However, I will add an example and see if there is an easy workaround or fix. Thanks for the note.

[Yaki2000]

@dsinghrs
I have actually created a select using ajax and then used the $('#selectSelector').multiselect() in the success function and it worked perfectly.

[dsinghrs]

Thanks for you response, actually with the plain ajax and without bootstrap.min.js, it works just fine, but it is not behaving properly when we have little complex scenario like showing ajax response in modal(popup) and then calling $('#selectSelector').multiselect() in success or done function.

[Yaki2000]

Umm that's so wierd.

One of the reasons I am using this plugin is BECAUSE I had issues running another one in a bootstrap modal.

Can you js fiddle an example of your code?

[dsinghrs]

Hope following code would not confuse you. Let me know if you have any question.
////////////////main.jsp - start/////////////////
//modal popup

function triggetmultiselect(){
$('#multiple_id').multiselect();
}
function populateConnections() {
$.ajax({
url: '',
method: "get",
datatype: 'html',
success: function(resultData) {
$('#palceholder').html(resultData);
$('#technicalModal').show();
triggetmultiselect();
}
});
}
////////////////main.jsp - end/////////////////

          ////////////////ajaxResponse.jsp - start/////////////////

         //Content of <some_url> which is getting loaded as part of ajax response in above code
            <select class="form-control" name="browsers" multiple id="multiple_id">
                <option value="chrome">Google Chrome</option>
                <option value="firefox">Firefox</option>
                <option value="ie">IE</option>
                <option value="safari">Safari</option>
                <option value="opera">Opera</option>
                <option value="other">Other</option>
            </select>
          ////////////////ajaxResponse.jsp - end/////////////////

[Yaki2000]

Can you try serround populateConnections with $(document).ready(function(){ //code });

[Yaki2000]

@dsinghrs check this out:
http://jsfiddle.net/go1ou12j/1/

Btw, which bootstrap are you using? I am using 2.3.2.

[davidstutz]

Independent of the discussion above, and just for reference: I added an example running a multiselect within a modal to the documentation. However this example does not use Ajax.

[dsinghrs]

Thanks a lot David and Yaki2000. I will let you know if I face any issue.

[JoelDerrick]

I have the following issue when i put the "select" tag inside knockout "with" binding the select option doesn't properly work....i think the reason for this is the jquery function is not working inside knockout "with" binding ...........so if any one know the solution kindly post it.....

[IMM0rtalis]

Hey :)

following situation:
Ajaxloaded modal-content with select.

The following is working (does not matter if you type this in the console or have it in a script):

• jQuery("[name='your_select_name']").multiselect();
• jQuery(".classname").multiselect();

The following is NOT working:

• jQuery("#Id_of_select").multiselect();

I does absolutely not know why this is so... Spend hours of finding the workaround...

Best regards from Berlin,
Florian

[kunaivi]

Hello IMM0rtalis , thanks a lot you save my three days.
it also works on my situation.

[marcellopato]

Doesn't work at all!

[vohrahul]

@IMM0rtalis Doesn't work for me. Tried both, class wise and name wise. not sure why it still doesn't work inside a modal popup when it is opened by jquery and data is loaded by ajax.

[mallikkolli987]

Tried all..it's not working with Ajax Post

[tiesont]

It would be helpful to include an example, rather than just saying "doesn't work". Granted, this isn't an Ajax example, but it loads data after the modal has been shown: https://jsfiddle.net/s2bny8hc/26/

<div id="sample-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Sample select</label>
          <select id="example-getting-started" multiple="multiple" class="form-control"></select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="load-now">Load options now</button>
      </div>
    </div>
  </div>
</div>

$(function() {
  try {
    $('#example-getting-started').multiselect();
    var $mymodal = $('#sample-modal').modal();

    $('#load-now').on('click', function(e) {

      var data = [{
          value: 'cheese',
          text: 'Cheese'
        },
        {
          value: 'tomatoes',
          text: 'Tomatoes'
        },
        {
          value: 'mozzarella',
          text: 'Mozzarella'
        },
        {
          value: 'mushrooms',
          text: 'Mushrooms'
        },
        {
          value: 'pepperoni',
          text: 'Pepperoni'
        },
        {
          value: 'onions',
          text: 'Onions'
        }
      ];

      var size = data.length;

      for (var i = 0; i < size; i++) {
        var opt = $('<option />').val(data[i].value).text(data[i].text);
        $('#example-getting-started').append(opt);
      }

      $('#example-getting-started').multiselect('rebuild');

    });
  } catch (err) {
    console.error(err);
  }
})

The plugin seems to work just fine (if you ignore the styling, which needs some overrides for BS4). The key is applying the plugin before showing the modal, then using the rebuild function to have the plugin rebuild the dropdown.

[markdalpozzo]

Most likely there is a duplicate element (i.e. the select element in the modal has the same name as an element in the parent page).