How to initialize bootstrapSwitch()?

Question

I am missing something simple, but can'T find it. In my asp.net MVC5 project, I want to use bootstrap-switch. This is what I've done:

BundleConfig.cs: added bootstrap-switch.css and bootstrap.switch.js as follows,

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/bootstrap-switch.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-switch.css",
                  "~/Content/site.css"));

(and made sure the files are at those locations).

Then, in a view I tried the following three checkboxes,

<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" name="box" />
<input type="checkbox" 
    data-on-text="Option A"
    data-off-text="Option B"
    data-size="mini"
    name="box2" />

and added, at the bottom of the view file,

<script>
    $("[name='box']").bootstrapSwitch();
    $("[name='box2']").bootstrapSwitch();
</script>

But when I run the project, the checkbox looks like the standard checkbox (no CSS, or functions have been added).

I've read a lot of posts on this (my code follows http://www.bootstrap-switch.org/ verbatim), but can't find my mistake.

The console shows no errors, just 15 Messages, e.g., "Message 1 JsHint (W116): Expected '===' and instead saw '=='." in the `bootstrap-switch.js file` - but I didn't change any code in that file ... — EluciusFTW, May 13 '15 at 12:57
Or another one: "Message 11 JsHint (W093): Did you mean to return a conditional instead of an assignment?", also in `bootstrap-switch.js` — EluciusFTW, May 13 '15 at 12:59

score 2 · Answer 1 · edited Oct 14 '16 at 05:42

2

Late and obvious, but perhaps useful for someone. The checkboxes need to be initialized when the document is ready.

<script>
    $(document).ready(function() {
        $("[name='box']").bootstrapSwitch();
        $("[name='box2']").bootstrapSwitch();
    });
</script>

edited Oct 14 '16 at 05:42

fujiiface

1,262
11
15

answered Sep 15 '15 at 12:54

devries48

111
1
5

score 0 · Accepted Answer · answered May 20 '15 at 13:02

The problem was that if you include the js files in the bundle, it is rendered last on the page. Hence, if you use javascipt on your view that references a .js library loaded in the bundle, it does not work to put it at the end of the view file, rather render the scripts section,

@section scripts{
    <script>
        $(".indent-1").css("background", "green");
    </script>
}

This will then appear on the html file after the libraries are imported.

How to initialize bootstrapSwitch()?

2 Answers2