CODEWITHSUNDEEP
twitter-bootstrapgrailsmodal-dialogtaglib
SWS3D
SWS3D

Reputation: 109

Grails + Bootstrap: Can't get modal to "unhide"

I'm trying to use Bootstrap 3 with Grails and have gotten the basics down. I'm using the twitter-bootstrap plugin and installed it per instructions. Basic things seem to be working fine (I even installed a template), but for the life of me I can't figure out how to get a modal to pop-up with a "processing.../ please wait" message when I submit a form. I've included the following div in my main.gsp to setup the modal:

 <div class="row">
     <g:layoutBody/>
 </div>

 <div class="modal fade" id="pleaseWaitDialog" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Processing...</h1>
            </div>
            <div class="modal-body">
                <div class="progress progress-striped active">
                    <div class="progress-bar" style="width: 100%;">
                        <span class="sr-only">Please Wait...</span>
                    </div>
                </div>
            </div>
        </div>
     </div>
  </div>

In a separate .gsp file containing the page contents, I have a form that includes the following g:actionSubmit tag, as well as a plain button tag for testing purposes:

<g:form class="form-horizontal" url="[action:'search', controller:'personSearch']" method="PUT" >
        <g:render template="form"/>
        <div class="form-group">
            <div class="col-xs-offset-1 col-xs-10">
                <g:actionSubmit class="btn btn-primary" 
                                action="search" 
                                value="${message(code: 'search.label', default: 'Search')}" 
                                data-toggle="modal" 
                                data-target="#pleaseWaitDialog"/>

                <button class="btn btn-primary" data-toggle="modal" data-target="#pleaseWaitDialog">
                    <i class="glyphicon glyphicon-play"></i> Start Process...
                </button> 
            </div>
        </div>
    </g:form>

Neither button actually gets the modal to pop-up. What am I missing?

Upvotes: 1

Views: 316

Answers (1)

SWS3D
SWS3D

Reputation: 109

DOH! Figured it out. The main.gsp file I had was importing JS file from the bootstrap template I downloaded. For whatever reason, the bootstrap.min js file used in that template wasn't working properly. When I took out references to that js file and instead used the 

    <asset:javascript src="application.js"/>

tag to import the grails application.js file, which imports the bootstrap js:

//= require bootstrap

That fixed everything!

Upvotes: 1

Related Questions