Dynamic population of dropdown menu with Bootstrap

Question

I'm doing this web page using Bootstrap to handle the layout customization. It uses a dropdown menu that I'm trying to populate with live information from elsewhere.

Right now I'm doing it like this on the html:

  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Tijuana</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Site Select<span class="caret"></span></a>
      <ul class="dropdown-menu" id="projectSelectorDropdown">
      </ul>
    </li>         
  </ul>

And on Javascript:

var list = document.getElementById("projectSelectorDropdown"); 
for (var i = 0; i < rows; i++){                
    var opt = table.getValue(i, 0);  
    var li = document.createElement("li");
    var text = document.createTextNode(opt);
    text.href = "#";
    li.appendChild(text);
    // alert("option " + opt); 
    list.appendChild(li);
  }

The script is being called just before the Bootstrap script at the end of the HTML part:

<script>queryProjects();</script>
<script src="js/bootstrap.min.js"></script>

The results look like this:

Not working

The information is there, but the shading when hovering and the links on the items don't work anymore. I want it to look as it looked like when the information for the dropdown was hardcoded on the HTML file:

Working

Is there a direct way to make the dropdown behave as if it was populated directly from the HTML?

Thanks!

+1 - You can now upload the images to clarify question further or provide more information about what's happening to your page. — Onimusha
– Onimusha, Commented May 28, 2014 at 1:26
HTML and CSS would be wonderful as this is looking like a formatting (CSS) problem more than Javascript to me. That's what my +1 buys me :P — Deryck
– Deryck, Commented May 28, 2014 at 1:30
If you are using chrome, you can right click on it and select inspect element to see what the "current" html is like. This shows you the dynamically generated html which is not visible in through view source. If you right click at the "Site Select" button, it shows you the html. — Bhaskar Shrestha
– Bhaskar Shrestha, Commented May 28, 2014 at 4:59
Try giving a jsfiddle sample to reproduce the error. Maybe you will figure it out. Also compare the existing html for both cases, which can help you debug this. You can do this both in Chrome and Firefox. — user568109
– user568109, Commented May 28, 2014 at 5:10

buzoherbert · Accepted Answer · 2014-05-28 05:23:02Z

14

Thanks for all your feedback. The dropdown wasn't working because the <li> element has to have an <a> element inside and i was missing that part. The only change was on the javascript part:

var list = document.getElementById("projectSelectorDropdown"); 
        for (var i = 0; i < rows; i++){                
            var opt = table.getValue(i, 0);  
            var li = document.createElement("li");
            var link = document.createElement("a");             
            var text = document.createTextNode(opt);
            link.appendChild(text);
            link.href = "#";
            li.appendChild(link);
            list.appendChild(li);
          }

answered May 28, 2014 at 5:23

buzoherbert

1,6881 gold badge15 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic population of dropdown menu with Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related