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:

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:

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

Thanks!

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:

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:

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

Thanks!

• javascript
• html
• twitter-bootstrap

• 1 +1 - You can now upload the images to clarify question further or provide more information about what's happening to your page. – Onimusha Commented May 28, 2014 at 1:26
• Thank you! :-) I already did the edit. – buzoherbert Commented May 28, 2014 at 1:30
• 1 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 Commented May 28, 2014 at 1:30
• 2 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 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 Commented May 28, 2014 at 5:10

1 Answer 1

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);
          }