CODEWITHSUNDEEP
javascriptjquerycssasp.net-mvctwitter-bootstrap
Lance
Lance

Reputation: 611

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>

Upvotes: 3

Views: 1090

Answers (2)

Nick Mehrdad Babaki
Nick Mehrdad Babaki

Reputation: 12485

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

Upvotes: 2

tao
tao

Reputation: 90028

a) check console for any errors.

b) check for any of these common issues:

  • you're not loading jquery(.min).js
  • you're not loading bootstrap(.min).js
  • you're not loading jquery(.min).js before bootstrap(.min).js
  • you're not loading tether(.min).js before bootstrap(.min).js and you're using v4.

Unfortunately, without you being able to create a minimal, complete and verifiable example of your error (which you say you can't), that's about all the help I can provide. Best of luck!

Upvotes: 5

Related Questions