Bootstrap.js (3.1) collapse ('hide') does not hide the element if called too soon after collapse ('show')
I have the following code that calls the bootstrap 3.1 js method collapse()
on a div with "show" or "hide" as a parameter based on the value of the selected element in a select input.
The problem is that if the user changes the selection too quickly with the up / down arrows on the keyboard, it will instantly jump through the "Angle" and the div will be shown, but when she continues with another selection, the div will not be hidden, although the final value is $selectedText
not equals Angle.
I'm guessing it's because it $col.collapse('hide')
gets called before completion $col.collapse('show')
, but I'm not sure what to do about it.
Html
<div id="cubicleConfigurationForm">
<div class="row cubicleConfigurationForm_rowWorkSurfaceConfiguration">
<div class="col-md-2">
<div class="form-group">
<label><abbr title="Work Surface" class="initialism">WS</abbr> Depth</label>
<select name="cubicleConfigurationForm_cubicle1_ddlWorkSurfaceDepth" class="form-control">
<option value="0">Undefined</option>
<option value="24">D24</option>
<option value="30">D30</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label><abbr title="Work Surface" class="initialism">WS</abbr> Configuration</label>
<select name="cubicleConfigurationForm_cubicle1_ddlWorkSurfaceConfig" class="form-control cubicleConfigurationForm_ddlWorkSurfaceConfig">
<option value="0">Undefined</option>
<option value="2">Corner</option>
<option value="1">L Shape</option>
</select>
</div>
</div>
<div class="col-md-3 cubicleConfigurationForm_colCurvedCorner collapse in" style="height: auto;">
<label>Curved Corner?</label>
<br>
<div class="checkbox">
<label>
<input type="checkbox" name="cubicleConfigurationForm_cubicle1_cbCurvedCornerRequested">
Curved Corner
</label>
</div>
</div>
</div>
</div>
Js
$('#cubicleConfigurationForm').on('change', '.cubicleConfigurationForm_ddlWorkSurfaceConfig', function () {
var $this = $(this);
var $selectedText = $this.find(':selected').text();
var $col = $this.parents('div.cubicleConfigurationForm_rowWorkSurfaceConfiguration').children('div.cubicleConfigurationForm_colCurvedCorner');
if ($selectedText === 'Corner') {
$col.collapse('show');
}
else {
$col.collapse('hide');
ClearFormFields($col);
}
});
source to share
You can turn it off select
until the animation is done so the problem doesn't occur. I tried checking $col
after quickly changing from Corner
to L Shape
and found I $col
had a class collapsing
, which meant the previous transition had not been completed.
Js
//disabling the select here
if ($selectedText === 'Corner') {
$col.collapse('show');
$('select').prop('disabled', 'disabled')
} else {
$col.collapse('hide');
$('select').prop('disabled', 'disabled')
ClearFormFields($col);
}
//enabling the select after the animation is done i.e on shown or hidden. #test is given for this demo
$('#test').on('shown.bs.collapse', function () {
console.log("shown");
$('select').prop('disabled', '')
})
$('#test').on('hidden.bs.collapse', function () {
console.log("hidden");
$('select').prop('disabled', '')
})
Fiddle here
source to share
Another possible solution is to just toggle the visibility of the div instead of using the collapse animation. Using jQuery methods hide()
and show()
as shown below seems to work well enough to get the job done.
if ($selectedText === 'Corner') {
$col.show();
}
else {
$col.hide();
ClearFormFields($col);
}
source to share