CODEWITHSUNDEEP
javascriptjqueryjquery-ui-multiselectbootstrap-multiselect
Jaylen
Jaylen

Reputation: 40381

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

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.

Upvotes: 5

Views: 11029

Answers (4)

TomT64
TomT64

Reputation: 76

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>',
    }, 
  }); 
});

Upvotes: 0

Daved
Daved

Reputation: 2082

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

Upvotes: 3

Blas Pico
Blas Pico

Reputation: 11

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

Upvotes: 0

Phil
Phil

Reputation: 11175

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>

Upvotes: 10

Related Questions