Including the result of calling a route inside a view in Play

Question

I have this view that displays a forum post:

@(answers: Set[Answer])(implicit request: RequestHeader, flash : Flash)
{
<div class="row">
    <ul class="list-group list-group-flush align-items-center">

        @for(answer <- answers) {

        <li class="list-group-item bg-dark">
            <div class="card border" style="width: 40rem;" [email protected]>

                <div class="card-body">
                    <div class="row d-flex align-items-center">
                        @if(request.session.get("loggedIn").isDefined) {
                        <div class="col-sm-auto">
                            <div class="row">

                                <svg class="btn btn-outline-success btn-sm" onclick="location.href='/post/@answer.id/upvote'" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor"><path d="M4 0h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm6 7.172l-3.536 3.535a1 1 0 1 1-1.414-1.414L9.293 7.05a1 1 0 0 1 1.414 0l4.243 4.243a1 1 0 0 1-1.414 1.414L10 9.172z"></path></svg>
                            </div>
                            <div class="row">
                                <h4 class="container d-flex justify-content-center">@answer.votes</h4>
                            </div>
                            <div class="row">
                                <svg class="btn btn-outline-danger btn-sm" onclick="location.href='/post/@answer.id/downvote'" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor"><path d="M4 0h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm6 9.828l3.536-3.535a1 1 0 0 1 1.414 1.414l-4.243 4.243a1 1 0 0 1-1.414 0L5.05 9.707a1 1 0 0 1 1.414-1.414L10 11.828z"></path></svg>
                            </div>
                        </div>
                        }
                        <div class="col-11 ">
                            <div class="card-text d-flex justify-content-end">
                                @answer.date
                            </div>
                            <h6 class="card-text">@answer.user</h6>
                            <h3 class="card-title">@answer.title</h3>
                            <p class="card-text">@answer.text</p>
                            <div class=" container bg-light">
                                <pre><code >@answer.code</code></pre>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-10 col-xs-9 col-xs-offset-10"></div>
                        <div class="col-md-auto container d-flex justify-content-end">
                            <a href="/post/@answer.postId" class="btn btn-secondary d-flex justify-content-end">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -2 24 24" width="24" fill="currentColor"><path d="M5 16.573V3.419L2.464 5.954A1 1 0 0 1 1.05 4.54L5.293.297a1 1 0 0 1 1.414 0L10.95 4.54a1 1 0 1 1-1.414 1.414L7 3.42v13.154l2.536-2.536a1 1 0 1 1 1.414 1.414l-4.243 4.243a.997.997 0 0 1-1.414 0L1.05 15.451a1 1 0 1 1 1.414-1.414L5 16.573z"></path></svg>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </li>
        @routes.Posts.answerComments(answer.id)
        }
    </ul>
</div>
}

At the end, I want to show the comments to this post. I have a controller route set up to return the HTML of these comments. Ìs it possible to call a route and include the result of this request as html from within a view? I've tried using the @Html method, but that only formats HTML code, it does not call a route. I read somewhere about using the wAction method to call a route and include the result, but that does not seem to exist in the current Play version. I can't directly call another view because I need to fetch the comments from the server, and for this I have the controller action.

Answer 1

To achieve that (i.e. render everything server side), what makes more sense is to:

• have a common template (.scala.html) for displaying a list of comments
• use this common template in your current HTML that you've shown to display a forum post, thus having comments as an input of the HTML (maybe as a Map if fits better your need)
• in your controller, have a common Scala method to load comments and reuse this method in both routes

Technically, you could also call the route to display comments from your controller and get that as a String that you'd inject in the main HTML but that would not be idiomatic at all.

Or, move to a more dynamic approach with JavaScript and load comments HTML when the page is rendered in the browser.