xdega's avatar
Level 4

bootstrap data-toggle breaks with app.js

So I am running into this perplexing issue when creating a Bootstrap dropdown menu as part of a user/admin dashboard for my web app. I have the following in my dashboard view:

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>            
    {{strtoupper(Auth::user()->name) }} <b class="caret"></b></a>
    <ul class="dropdown-menu">
    ...

This works just fine until I include at the bottom of the corresponding blade layout as such:

    <!-- Global Scripts -->
    <script src="/js/app.js"></script>

    <!-- jQuery -->
    <script src="/admin/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/admin/js/bootstrap.min.js"></script>

I am not seeing anything in the console, the dropdown just fails to trigger. It doesn't appear to matter which order I include the app.js.

Does anyone know any reason that the inclusion of app.js would break my dropdowns?

0 likes
1 reply
xdega's avatar
xdega
OP
Best Answer
Level 4

/facepalm. Nevermind. I got it fixed.

I should have just realized that app.js loads both JQuery and Bootstrap, and my issue would have been fixed sooner.

2 likes

Please or to participate in this conversation.