As I navigate through using jQuery steps and bootstrap toggle, I've noticed a peculiar behavior that I can't quite explain. It seems like there might be some connection between the two, as when jQuery plugins or extensions are utilized within jQuery steps, various CSS issues tend to arise.
My approach involves loading content via ajax and implementing partial views through @Html.Render()
The issue at hand:
If I refrain from loading my html markup (which includes my toggles) with ajax and insert the code for toggle inputs directly into the view, the toggles don't seem to respond. They appear correctly but fail to react to any user input.
On the other hand, if I do employ ajax, the toggles don't display properly unless initialized via JavaScript. While this workaround does make them functional, it's not ideal to always rely on ajax for content loading.
Below is the snippet of the partial view:
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input id="course" data-toggle="toggle" name="Rate.OfferingRates" type="checkbox" >
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="offeringRateContainerSubscription">
<div class="col-md-2">
</div>
<div class="col-md-6">
<div class="checkbox disabled">
<label>
<input id="subscription" disabled data-toggle="toggle" name="Rate.OfferingRates" type="checkbox" value="@SlRateBaseTypes.Subscription">
</label>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
// This section runs twice when using @Html.Render()
debugger;
$('#course').bootstrapToggle({
on: 'Yes',
off: 'No'
});
$('#subscription').bootstrapToggle({
on: 'Yes',
off: 'No'
});
$('#course').change(function () {
debugger;
var isCourse = $('#course').filter(":checked");
if (isCourse.length) {
$('#subscription').bootstrapToggle('enable');
$('#subscription').parent().parent().parent().removeClass('disabled');
} else {
$('#subscription').bootstrapToggle('off');
$('#subscription').bootstrapToggle('disable');
$('#subscription').parent().parent().parent().addClass('disabled');
}
});
});
</script>
Additionally:
I have inserted a debugger marker in the JavaScript within this particular partial view called MyPartialView that initializes the toggles.
Interestingly, the debugger stops execution twice while being loaded via ajax. I'm puzzled by this occurrence and unsure if it poses a problem.