Tutorial: AJAX calling in Play Framework 2.3.4

In this tutorial we will discuss about the following topics of AJAX calling in Play Framework 2.3.4:

  1. Generating a Javascript router
    1. Embedded router
    2. Router resource
  2. Use of Javascript router
    1. jQuery Ajax
    2. Success/Error handler for each router
    3. Single Success/Error handler for all routers

Generating a Javascript router

The first step to using Play’s Javascript router is to generate it. The router will only expose the routes that you explicitly declare thus minimising the size of the Javascript code.

There are two ways to generate a Javascript router. One is to embed the router in the HTML page using template directives. The other is to generate Javascript resources in an action that can be downloaded, cached and shared between pages.

 ∗ Embedded router

An embedded router can be generated using the @javascriptRouter directive inside a Scala template. This is typically done inside the main decorating template.

Follow the following steps to generate embedded router in the your application:

Step 1: Update and Add new action called ajaxCall in your Application.scala file.

Step 2: Add the above action entry in conf/routes file.

GET   /ajax-call          controllers.Application.ajaxCall

Step 3: Update index.scala.html with following code.

Step 4: Create new js file public/javascripts/app.js to implement Ajax calling

Step 5: Update following code in main.scala.html file to generate embedded Javascript router

The first parameter is the name of the global variable that the router will be placed in. The second parameter is the list of Javascript routes that should be included in this router. In order to use this function, your template must have an implicit RequestHeader in scope. For example this can be made available by adding (implicit req: RequestHeader) to the end of your parameter declarations.

Step 6: Run the application from the console

saurabh@knoldus:~/projects/knoldus/ajax-with-play$ activator
[info] Loading project definition from /home/saurabh/projects/knoldus/ajax-with-play/project
[info] Set current project to ajax-with-play (in build file:/home/saurabh/projects/knoldus/ajax-with-play/)
[ajax-with-play] $ run

--- (Running the application from SBT, auto-reloading is enabled) ---

[info] play - Listening for HTTP on /0:0:0:0:0:0:0:0:9000

(Server started, use Ctrl+D to stop and go back to the console...)

Step 7: Open the browser the hit the URL: http://localhost:9000/


Source code from the browser

∗ Router resource

A router resource can be generated by creating an action that invokes the router generator. It has a similar syntax to embedding the router in a template. We can generate router resource with the help of following steps:

Step 1: Create a Scala object as Controller called controllers/JavascriptRoute.scala

Step 2: Add the following code it conf/routes file

#Javascript Routes
GET   /javascriptRoutes   controllers.JavascriptRoute.javascriptRoutes

Step 3: Now we can include it as a resource in our templates views/main.scala.html:

<script type="text/javascript" src="@routes.JavascriptRoute.javascriptRoutes"></script>

∗ Use of Javascript router

Using the javascript router with jQuery is same like writing a normal jQuery function but Play provides some more feature to make it more easier using Javascript router.

∗ jQuery Ajax

Using jQuery as an example, making a call is as simple as:

To know more about jQuery ajax: here

 ∗ Success/Error handler for each router

Here we can define callback function for each router.

∗ Single Success/Error handler for all routers

To explore more check the Github code: here

4 thoughts on “Tutorial: AJAX calling in Play Framework 2.3.4

Leave a Reply

%d bloggers like this: