Bootstrap Dropdown Button

Question

I am currently using Bootstrap 3, with Ruby on Rails and I'm having some issues with a dropdown button. The button does drop down and shows the list items, but upon clicking on one I'm taken to the top of the page and no list item was selected.

Here's the code for the dropdown button - html.erb file

   <div class="col-md-5 col-md-offset-2 col-xs-12"> 
          <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    How many?

  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">1</a></li>
    <li><a href="#">2-9</a></li>
    <li><a href="#">10+</a></li>
  </ul>
</div>
</div>
        </div>

My knowledge of JS is non-existent so I've been looking at other people's questions but I'm still unable to work it out.

The script also in the html.erb file

<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

When running the app the Javascript console throws up a 404 not found for bootstrap.js. I currently have the bootstrap under Vendor/assets/javascripts/bootstrap.js

Should the bootstrap JS files be under app/assets/javascripts?

Hopefully someone is able to shed some light on what I'm doing wrong.

Answer 1

It seems to a href attribute problem in the "a" element. Remove a literal "#" and try again.

And all of loaded file path whatever you want to load from your local storage should be path for based on your local storage too. that is, apps/asset/javascript path is correct.