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.

did you try the events documented for that plugin? – charlietfl Mar 04 '15 at 23:01 — charlietfl, Mar 04 '15 at 23:01

score 9 · Answer 1 · answered Mar 04 '15 at 23:06

9

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>

answered Mar 04 '15 at 23:06

Phil

10,948
17
69
101

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 – Jaylen Mar 05 '15 at 00:02

score 3 · Answer 2 · edited May 23 '17 at 12:02

3

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()

edited May 23 '17 at 12:02

Community

1
1

answered Mar 04 '15 at 23:04

Daved

2,082
1
18
23

That is the property, not the event. – Phil Mar 04 '15 at 23:06
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. – Daved Mar 04 '15 at 23:08
I am using twiter bootstrap 3.3.2 and I can't get it to work. Please check my question again as I updated. – Jaylen Mar 05 '15 at 00:02
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. – Daved Mar 05 '15 at 01:45

score 0 · Answer 3 · answered Mar 04 '15 at 23:33

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

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

3 Answers3