Weird behavior using bootstrap toggle

Question

I find my self having a really weird behaviour using jQuery steps and bootstrap toggle . I really don't know if there's any connection between both but I know that there are at least many css problems if you're about to use jQuery plugins/extensions within jQuery steps .

I load content per ajax and use partial views using @Html.Render()

My problem: If I don't load my html markup containing my toggles using ajax but place the code for toggle inputs directy in the (partial) view toggles won't work. They are displayed correctly but simply don't react on any input.

If I do use ajax the toggles will not be displayed correctly without initializing per javaScript . If I do so they work but I don't want to always load my content using ajax .

Here is the code for 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 () {
        // reached 2 times using @Html.Render()
        debugger;
        $('#course').bootstrapToggle({
            on: 'Ja',
            off: 'Nein'
        });

        $('#subscription').bootstrapToggle({
            on: 'Ja',
            off: 'Nein'
        });

        $('#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>

Moreover: I placed a debugger mark in the javaScript in this partial view MyPartialView that initializes toggles

The debugger mark breaks two times when loading per ajax . I have no idea how this is possible. I don't know if this is a problem either.

Answer 1

I just found the solution to the problem.

jQuery steps internally renders again. Replacing the code in the .js file like suggested in https://github.com/rstaib/jquery-steps/issues/42 worked for me!