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.
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>
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()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With