Question

I’m using the twitter boot-strap library within groovy grails and can currently get both modals and dropdowns to work, but not one inside the other. Here’s the code I’m writing, it’s so close, when I click on something inside of the dropdown, a psuedo modal shows up, it turns the screen black (transparency included in modals) but doesn’t display the box with the info I supplied. Also I’ve noticed upon further inspection with firebug that only the first set of modals are made but the rest aren’t, I’m confused why this is the case. Can anyone help?

Code:

             <table>
                <thead>
                    <tr>

                        <g:sortableColumn property="name" title="${message(code: 'course.name.label', default: 'Name')}" />

                        <g:sortableColumn property="description" title="${message(code: 'course.description.label', default: 'Description')}" />

                    </tr>
                </thead>
                <tbody>
                <g:each in="${courseInstanceList}" status="i" var="courseInstance">

                    <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                    <td>
                                            <ul class="nav nav-pills">
                                        <li class="dropdown" id="menu${courseInstance.id}">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu${courseInstance.id}">
                                          ${courseInstance.name}
                                          <b class="caret"></b>
                                        </a>
                                        <ul class="dropdown-menu">
                                                <g:each in="${courseInstance.hasMany}" var="param">
                                                        <a data-toggle="modal", href="#myModal${courseInstance.id}${param.getProperties().key}", id="${courseInstance.id}${param.getProperties().key}">${param.getProperties().key}</a>
                                <div class="modal" id="myModal${courseInstance.id}${param.getProperties().key}">
                                                        <div class="modal-header">
                                                        <a class="close" data-dismiss="modal">x</a>
                                                        <h3>Students in ${courseInstance.name}</h3>
                                                            </div>
                                                        <div class="modal-body">
                                                            <g:javascript>
                                                            $('#myModal${courseInstance.id}${param.getProperties().key}').modal({
                                                        keyboard: true
                                                            })
                                                            $('#myModal${courseInstance.id}${param.getProperties().key}').modal('hide')
                                                            </g:javascript>
                                                        </div>
                                                            <div class="modal-footer">
                                                        <a href="#" class="btn">Close</a>
                                                        <a href="#" class="btn btn-primary">Save changes</a>
                                                        </div>
                                                            </div>
                                                        </li>
                                         </g:each>
                                        </td>


                        <td>${fieldValue(bean: courseInstance, field: "description")}</td>

                    </tr>
                </g:each>
                </tbody>
            </table>

Answer 1

There is a missing <li> element between the g:each and the a reference…but this should not be the point.

I’am using bootstrap with grails too, and I also use a modal within a navbar dropdown button, it works (but takes me several hours…).

I dont know for sure that it matters but i render the modal template outside of the dropdown. I also set the javascript to “modalize” the dialog below the modal div (not inside the modal-body).

Are you sure that everywhere the expression: myModal${courseInstance.id}${param.getProperties().key} is evaluated to same?

Also make sure that you dont import the modal.js manually (it is already imported in bootstrap.js). This caused some weird behaviour.

I’m using <div class="modal hide fade" id="..."> for the modal. This auto hides the div and adds some nice fade transitions (requires transitions.js).
Then the code reduces to: $('#...').modal({
keyboard: true,
show : false
})

Maybe some of these tips helps…

M.