So I have successfully gotten ajax requests to work before but I have always had to use a form, and then at the end of the submit do return false so that it doesnt refresh the page.
I have also just recently moved my javascript into a seperate file this has caused my @ commands to fail. Because of this I do not no how to set my url to my route?
Html:
<button id="saveAsDefaultButton">Save as default</button>
Playframework java code:
public static Result saveDefaultPhoneForUser(String handset) {
User currentUser = User.findByName(session("name"));
currentUser.lastControlledHandset = theHandset;
currentUser.save();
return ok();
}
routes:
POST / controllers.Application.saveDefaultPhoneForUser(handset : String)
javascript:
$('#saveAsDefaultButton').click(function(evt) {
$('#errors').hide();
$.ajax({
type : 'POST',
url : "controllers.Application.saveDefaultPhoneForUser",
data : $('#controlledPhone option:selected').text(),
dataType : "text",
success : function(data) {
//setError('Call succedded');
//$('#test1').attr("src", data)
},
error : function(data) {
setError('Make call failed');
}
});
return false;
});
Im sure there is a way to do this I am just having no luck finding anything. Any help greatly appreaciated.
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.
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) { ... }
Application
controllerjavascriptRoutes()
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.
javascriptRoutes
action and include it in your templateRoute conf/routes
GET /javascriptRoutes controllers.Application.javascriptRoutes
View in <head>
part of /views/main.scala.html
<script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>
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 ... }
});
or
myJsRoutes.controllers.Application.newItem().ajax({
success : function(data) { ... some code ... }
});
etc...
type: "POST"
- JS router will use correct method according to conf/routes
ruleid
of the record (or other params) to GET
or PUT
(or other methods) using routes-like
syntax in pure 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({});