Play 2.x: How to make an AJAX request with a common button

For this job you should go with javascriptRoutes as it generates correct JS paths based on your routes.conf. You’ll find usage sample in Zentask sample

Anyway, for now you can fix your AJAX call by changing the url to

url : '@routes.Application.saveDefaultPhoneForUser()',

This way requires it to place the whole JS in template, which is wrong. It can or even should be moved to separate JS file and to make it possible you need to use javascriptRoutes.

More…

javascriptRoutes are not described yet in official documentation, but here’s step-by-step introduction to it. Although the description looks sophisticated de facto using this way brings a lot of benefits.

1. Create the common routes

First you need to create common routes in conf/routes file:

GET     /item/:id     controllers.Application.getItem(id: Long)
POST    /item/new     controllers.Application.newItem
PUT     /item/:id     controllers.Application.updateItem(id: Long)

Of course, you need to create at least these three actions in Application controller:

getItem(Long id){ ... }
newItem() { ... }
updateItem(Long id) { ... }

2. Create an action translating common routes to JS

place it somewhere, ie. in your Application controller
Let’s call it javascriptRoutes()

In that action you’ll point the existing routes from the conf/routes file

public static Result javascriptRoutes() {
    response().setContentType("text/javascript");
    return ok(
        Routes.javascriptRouter("myJsRoutes",
            routes.javascript.Application.getItem(),
            routes.javascript.Application.newItem(),
            routes.javascript.Application.updateItem(),
            //inside somepackage
            controllers.somepackage.routes.javascript.Application.updateItem()
        )
    );
}

Note: Don’t set any params in brackets.

3. Create a route for `javascriptRoutes` action and include it in your template

Route conf/routes

GET     /javascriptRoutes     controllers.Application.javascriptRoutes

View in <head> part of /views/main.scala.html

<script type="text/javascript" src="https://stackoverflow.com/questions/11133059/@routes.Application.javascriptRoutes()"></script>

4. Use javascriptRoutes where you want

Up from now you can use routes in JS to get the correct path without need to specify the url and type. For an example instead of:

 $('.getAjaxForThisContainer').click(function(e) {
    var idToGet = $("#someField").val();
    $.ajax({
        type : 'GET',
        url : '@routes.Application.getItem()',
        data : {
            id: idToGet
        },
        success : function(data) {
            // ... some code on success
        }
    });
    return false;
});

you can use simplified version (myJsRoutes from point 2):

myJsRoutes.controllers.Application.getItem(idToGet).ajax({
    success : function(data) { ... some code ... }
});

myJsRoutes.controllers.Application.newItem().ajax({
    success : function(data) { ... some code ... }
});

etc…

you don’t need to specify type: "POST" – JS router will use correct method according to conf/routes rule
you can set id of the record (or other params) to GET or PUT (or other methods) using routes-like syntax in pure JS
If your route rule contains all required params you can really minimize yours JS:

for route:

GET   /some/:a/:b/:c    controllers.Application.getABC(a: String, b: Integer, c: String)

JS:

myJsRoutes.controllers.Application.getABC("a", 1, "b" ).ajax({});

1. Create the common routes

2. Create an action translating common routes to JS

3. Create a route for javascriptRoutes action and include it in your template

4. Use javascriptRoutes where you want

More Related Contents:

Leave a Comment Cancel reply

3. Create a route for `javascriptRoutes` action and include it in your template