Bootstrap Dropdown not working Locally but works on Fiddle

I'm building an MVC 5 webapp and trying to create a split drop down button. My code works on Fiddle just fine:

<div class="btn-group pull-right">
     <button id="ClearRules" type="button" class="btn btn-xs btn-default" title="Clear all of the rules"><span class="glyphicon glyphicon-remove"></span> Clear</button>
     <button id="AddRule" type="button" class="btn btn-xs btn-default" title="Add a new rule"><span class="glyphicon glyphicon-plus"></span> Add</button>
     <button id="AddRules" class="btn btn-xs btn-default dropdown-toggle" title="Add several rules" data-toggle="dropdown">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a href="#">5</a></li>
         <li><a href="#">10</a></li>
         <li><a href="#">15</a></li>
         <li><a href="#">20</a></li>
     </ul>
</div>

My js and css bundles include bootstrap:

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

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

I even copied the example from the Boostrap site and dropped it into my code to no avail. The button appears correctly but the drop down does not expand when it is clicked.

Edit:

Here are my script and style imports exactly as they appear in the rendered html head. As suggested by Andrei, I was wondering if I might be missing something or importing something in the wrong order:

<script src="/Scripts/jquery-3.1.1.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-toggle.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/Tether/Tether.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-toggle.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-dialog.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>    
<script src="/Scripts/TheRandomizer.ItemListMaintenance.js"></script>

Answers 1

  • One of very common mistakes causing this issue is loading jquery file twice. I suggest you using View page Source and inspect in the browser menu go to source code and search for jquery and make sure you cannot find jquery twice in the output html


Related Articles