play framework 2.3, 2.4 or 2.5 - bootstrap modal dialog?

Simon Kaufmann

unread,

Jun 27, 2016, 11:49:15 PM6/27/16

to play-framework

Does anyone have a working code example for opening a bootstrap modal dialog and displaying a controller route inside it?

I'm using play 2.4.6, the bootstrap 3.3.6 webjar and I can get a modal dialog to fade the page it should pop up on top of, but the dialog itself doesn't appear.

I have a page template that looks like this -

@import play.i18n._
@(title: String)(content: Html)

<!DOCTYPE html>

<html lang="@lang().code()">
    <head>
        <title>@title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Some stuffs">
        <meta name="author" content="">
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery.js")"></script>
        
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/test.js")"></script> 
        
        <script type="text/javascript" src="@routes.Application.jsRoutes" defer="defer"></script> 
        
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.js")" data-main="@routes.Assets.versioned("javascripts/bootstrap.js")"></script>
        
        <link rel="stylesheet" href="@routes.Assets.versioned("stylesheets/bootstrap.css")">
        <link rel="stylesheet" href="@routes.Assets.versioned("stylesheets/main.css")">
    </head>
    <body>
        <section class="nav">@navigation(Application.getLocalUser())</section>
        
        <!-- Button to trigger modal -->

         <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
         
        <div class="container">
            <section class="content">@content</section>
        </div> <!-- /container -->
        
        <!-- Modal -->
        <div id="myModal" class="modal hide fade" 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">Modal header</h3>
          </div>
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
          </div>
        </div>
        
    </body>
    <footer>
        <p class="pull-left">© 2016</p>
    </footer>

</html>

and my application public assets directory structure is

when I click on the link that should activate the modal, the background fade occurs, suggesting that the bootstrap javascript is being called, but no modal dialog is displayed. Anyone know what's going wrong here? I had started with the simplest version of the bootstrap modal control to ensure I had that working before developing a play template, but I must admit I'm not sure how I will use a controller route to display, for example a form inside the modal once I can pop one up over page. Wondering if anyone can help.

gustavo....@trt14.jus.br

unread,

Jun 29, 2016, 9:25:12 AM6/29/16

to play-framework

Hi

I had the same problem

The section element cause the problem for me.

Simon Kaufmann

unread,

Jun 29, 2016, 9:15:18 PM6/29/16

to play-framework

Ok, I have a working solution. My layout template now includes the bootstrap.js script (path: assets/javascripts/) - and a short script to load the serverside content (/modaltest) into the modal dialog when it is shown.

(I have another view called - modaltest.scala,html, and a route to this which resolves to /modaltest - this allows the jquery call to replace '.modal-body' with a call to load(/modaltest) which retrieves the content from the server. You can put whatever you like into this template - that is what will be put into the modal as the modal body. Similarly you can adjust other DOM elements on modal shown using similar jquery scripts.

I was also having some difficulty accessing the public javascript assets - it's not clear from the play documentation that the relative path for public assets needs to start with "assets/" but that's how it works...

@import play.i18n._
@(title: String)(content: Html)

<!DOCTYPE html>

<html lang="@lang().code()">
    <head>
        <title>@title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">

        <meta name="author" content="">
        
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.js")"></script>

<script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery.js")"></script>

<script type="text/javascript" src="@routes.Application.jsRoutes"></script>

        
        <link rel="stylesheet" href="@routes.Assets.versioned("stylesheets/bootstrap.css")">
        <link rel="stylesheet" href="@routes.Assets.versioned("stylesheets/main.css")">
        
    </head>
    <body>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          Launch demo modal
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

        
        <section class="nav">@navigation(Application.getLocalUser())</section>

        <div class="container">
            <section class="content">@content</section>
        </div> <!-- /container -->

        <script type="text/javascript" src="assets/javascripts/bootstrap.js"></script>
        
        <script>
            $('#myModal').on('show.bs.modal', function (e) {
              $('.modal-body').load('/modaltest');
            })
        </script>

        
    </body>
    <footer>
        <p class="pull-left">© 2016</p>
    </footer>

</html>

Simon Kaufmann

unread,

Jun 30, 2016, 3:30:49 AM6/30/16

to play-fr...@googlegroups.com

the role="document" line in the modal is important too

--
You received this message because you are subscribed to a topic in the Google Groups "play-framework" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/play-framework/9Tl0XH6rr10/unsubscribe.
To unsubscribe from this group and all its topics, send an email to play-framewor...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/50a11f02-86ba-4d24-8717-0648d1baa59f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward