bootstrap dropdown partially working in modal

Question

I have a table filled with server names. When I click on the link it goes to a page with various information about said server. I'm using SSO to determine is a user has the ability to change some of the fields via a dropbox box with selectable items. This is all working great....as a page

However, I want to convert that page into a modal. I have the modal working, it pulls all the information...however, the dropdown box only works every other time. No exaggeration, every other time. I click a server, the modal comes up and no values in the dropdown. I can inspect it with firebug and see it has values in the list for the dropdown but nothing happens. I close the modal, click on a link (the same or different) and the dropdown works just fine

This is my html

<td><a href="{{ url_for('vm', vm=vm.GuestName) }}" data-keyboard="false" data-target="#vmModal" data-toggle="modal"> {{ vm.GuestName }}</a></td>

Here is my modal

<div class="modal hide fade in" id="vmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Virtual Machine Info</h3>
    </div>
    <div class="modal-body" style="height: 600px; right: 12px">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div><!-- /.modal -->

Here is my dropdown

{% if access %}
        <div class="dropdown">
            <li>
                <strong>Service:</strong>
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> {{ item.Service }} <b
                        class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    {% for service in service_data %}
                        <li><a tabindex="-1"
                               href="/api?name={{ item.GuestName }}&service={{ service.name }}"> {{ service.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        </div>

Answer 1

I just solved a very similar problem where my modal-dialog caused the drop-down menu to work only every other time I opened the modal-dialog. The drop-down menu would work initially. but if I opened and closed the modal, it would stop working. Then if I opened the modal and closed it again, the drop-down menu would work again. The problem was simply that my target url that contained the modal-content was referencing the bootstrap.js file when it was already referenced in the parent page. Therefore, all I had to do is remove the following from the modal-content page:

<script src="../js/bootstrap.min.js"></script>  

Edit: Actually, when I removed it from the modal-content page, other elements stopped working so I added it back. Instead, I added it in their twice, once at the top of the page and again at the bottom of the page before the tag. Now it works every time. I don't get it. Does anyone else know why this is happening?

Fabrice G, I tried what you recommended but I couldn't get it to work that way. I must have a different problem.

Answer 2

Hi I have the same issue; After long analyse i find the solution : Adding "style="display:none;" on div modal. I don't know why but when you load the page the modal is hidden, but if you inspect with firebug the modal recover the dropdown. After shown the modal and hidden it; the js add "style="display:none;" and dropdown works.