Question

I want to perform some AJAX style data retrieval using the Java Play Framework and have come across an issue with the ‘route’ script syntax.

The problem is that in the code below @{Movies.show("'+movie.id+'")} gets compiled to url/etc/+movie.id+ rather than url/etc/1.

<script type="text/javascript">
       function showMoreMovies()
       {
       $.getJSON('@{Movies.jsonAllMovies()}', function(movies) {

          var items = [];

          $.each(movies, function(i, movie) 
          { 
          var div_data =  '<div class="movie">'+
                          '<h2 class="movie-title"><a href="@{Movies.show("'+movie.id+'")}">'+movie.title+'</a></h2>'+
                          '<div class="release-date">' + movie.releasedString + '</div>'+
                          '<div class="comments">| comments: ' + movie.commentCount + '</div>'+
                          '</div>';

          $(div_data).appendTo("#movie_results");

          });
       });
       }
</script>

A work around is to hard-code the route url:

<a href="url/etc/'+movie.id+'">

which works, but you lose the benefits of automatic routing.

Has anyone else come across this or found a new solution to this problem?

Answer 1

It’s quite normal…
Remind that a groovy script is precompiled at server side and not executed at client side.

<a href="@{Movies.show("'+movie.id+'")}"> is compiled and groovy parses @{Movies.show("'+movie.id+'")} and generates "url/etc/+movie.id+" which is the URL of action Movies.show(id="+movie.id+")

You should use this: http://www.playframework.org/documentation/1.2.3/ajax

var showAction = #{jsAction @Movies.show(':id') /}

And then use it like that:

var div_data =  '<div class="movie">'+
                '<h2 class="movie-title"><a href="'+ showAction({id: movie.id}) +'">'+movie.title+'</a></h2>'+
                '<div class="release-date">' + movie.releasedString + '</div>'+
                '<div class="comments">| comments: ' + movie.commentCount + '</div>'+
                '</div>';