How to fire an event when a drop down menu is closed using jQuery?

Question

I want to reload the page when a user closes a dropdown menu that is controlled by "bootstrap-multiselect" UI.

Here is what I have tried so far

    $('#ts_client_id').multiselect({
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        selectedClass: null,
        nonSelectedText: 'All Clients',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        maxHeight: 250
    }).on('blur', function () {
        console.log($('#ts_client_id').val());
        window.location.reload();
    });

also

$('#ts_client_id').multiselect({
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    selectedClass: null,
    nonSelectedText: 'All Clients',
    includeSelectAllOption: true,
    buttonWidth: '100%',
    maxHeight: 250
}).on('hide.bs.dropdown', function () {
    console.log($('#ts_client_id').val());
    window.location.reload();
});

I have also tried this and it is not working

    $('#ts_client_id').multiselect({
        onDropdownHidden: function(event){
            console.log('hi');
            window.location.reload();
        },
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        selectedClass: null,
        nonSelectedText: 'All Clients',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        maxHeight: 250
    });

here is my HTML code

<select name="ts_client_id[]" id="ts_client_id"  multiple="multiple"  class="form-control width-sm-size row-left-xxsm-margin" >
<option value="2"  selected="selected" >Option 1</option>
<option value="1"  selected="selected" >Option 2</option>
<option value="7"  selected="selected" >Option 3</option>
</select>

But for some reason nothing is printed to the console neither the page is reloading.

what can I do to detect when the menu is closed so I can reload the page.

Delainedelainey

did you try the events documented for that plugin? – Portraiture

Answer 1

It's clearly in the documentation:

The onDropdownHide option is not available when using Twitter Bootstrap 2.3.

With their example:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-onDropdownHide').multiselect({
            onDropdownHide: function(event) {
                alert('Dropdown closed.');
            }
        });
    });
</script>

Volatile

I am using twiter bootstrap 3.3.2 and I can't get it to work. Please check my question again as I updated it based on your feedback – Delainedelainey

Answer 2

You want to set the onDropdownHidden option. It's documented on the configuration options page:

http://davidstutz.github.io/bootstrap-multiselect/#configuration-options

Edited: Passing a function as the parameter for onDropdownHidden seems to work fine for me.

Posting Fiddle here for reference: http://jsfiddle.net/ge81dt1r/2/

You can try changing

window.location.reload();

to

location.href = location.href; 

and it should work, though no post data will be sent with it. To see the difference between the two and decide which is best, read the answers here: Difference between window.location.href=window.location.href and window.location.reload()

Anemophilous

That is the property, not the event. – Volatile

Yes. It's the property to set on options to bind an event handler to the event. That is the correct reference. Also refer to Phil's answer which clearly shows to what I was referring. – Anemophilous

I am using twiter bootstrap 3.3.2 and I can't get it to work. Please check my question again as I updated. – Delainedelainey

I edited my answer with a fiddle for reference. I also changed it to an alert so you can see it. If it was reloading the page and you used console.log, you wouldn't see the log because the page would refresh. – Anemophilous

Answer 3

You should use onDropdownHide event

Here an example

$(document).ready(function() {
  $('#example-getting-started').multiselect({
    onDropdownHide: function(event) {
        alert('Dropdown closed.');
        // to reload the page
        location.reload();
    }
  });
});

See on jsfiddle

Immoral

Answer 4

Update for Bootstrap 4 and 5

With the bootstrap-multiselect project, you now have to use the templates directive for it to correctly use the configuration options onDropdownHidden, onDropdownHide, onDropdownShow, and onDropdownShown, like so:

$('#ts_client_id').multiselect({
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    },
    onDropdownHidden: function(event) {
        alert('Dropdown closed.');
    },
    ...
});

I found this solution while perusing the issues list on the GitHub page for bootstrap-multiselect. In my example, I have removed btn btn-primary from the class list in the template because I did not want the dropdown to look like a blue button.

Link here for reference to the comment, but also I have copy and pasted the comment below:

Are there any plans to support bootstrap5?

It works with a template directive

Vanilla

document.addEventListener('DOMContentLoaded', function() {
  var checkboxes = document.getElementById('multiple-checkboxes');

  $(checkboxes).multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }
  });
});

jQuery

$(document).ready(function () { 
  $("#multiple-checkboxes").multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }, 
  }); 
}); 

Margo