So i am using the play framework to make a online grocery delivery system. I am trying to add a grocery item to my cart using an ajax call and javascript routes.
I looked at this link and set up my files similar : Play 2.x: How to make an AJAX request with a common button
conf.routes:
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Home page
GET / controllers.Application.index()
GET /login controllers.Application.login()
GET /logout controllers.Application.logout()
POST /login controllers.Application.authenticate()
# User
GET /signup controllers.User.signup()
POST /signup controllers.User.doSignup()
# Other
GET /food/:cat/:sub controllers.Application.getFood(cat: String, sub: String)
# Cart
GET /cart controllers.Cart.index()
POST /cart/checkout controllers.Cart.checkout()
# Item
POST /item/addToCart controllers.Item.addToCart()
GET /javascriptRoutes controllers.Application.javascriptRoutes()
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.at(path="/public", file)
Javascript router:
public static Result javascriptRoutes(){
response().setContentType("text/javascript");
return ok(
Routes.javascriptRouter("myJsRoutes",
routes.javascript.Item.addToCart()
)
);
}
products.scala.html:
@(product: Product)
<li data-task-id="@product.id">
<img src="@product.imageUrl" alt="No Image Available">
<h2>@product.name</h2>
<!-- Price Display -->
@if(product.price != 0.0){
<span class="product-price">@product.price</span>
<p>
<form id="addToCart">
<input hidden="true" id="prodcutId" type="text" value="@product.id"/>
Qty: <input id="qty" type="text" id="cart" value="1"/>
<input id="addSubmit" type="submit" value="Add To Cart"/>
</form>
</p>
}
@if(product.price == 0.0){
<span class="available-in-store">Only Available in Store</span>
}
</li>
Javascript file in web/public/main/javascripts:
$("#addSubmit").click(function(e) {
var qty = $("#qty").val()
var product = $("#productId").val()
var json = new Object();
json.productId = productId;
json.quantity = qty;
myJsRoutes.controllers.Item.addToCart().ajax({
type : "POST",
data : json,
success : function(data){alert("Your Item was added to the Cart")};
});
});
Action that handles the POST call :
@Security.Authenticated(Secured.class)
public class Item extends Controller {
public static Result addToCart(){
Customer currCustomer = Customer.find.where().eq("email", session().get("email")).findUnique();
System.out.println(request().body().asFormUrlEncoded());
//int quantity = jsonPost.get("qty").asInt();
//String productId = jsonPost.get("productId").asText();
//Product product = Product.find.byId(productId);
//ShoppingCart cart = new ShoppingCart(currCustomer, product, quantity);
//cart.save();
//currCustomer.shoppingCartList.add(cart);
return null;
}
}
main.scala.html where i put the script router in the head:
@(walmartCategories: List[Category], amazonCategories: List[Category], user: Customer)(body: Html)
<html>
<head>
<title>Banana Now</title>
<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/dropmenu.css")">
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/search.css")">
<script type="text/javascript" src="@routes.Assets.at("javascripts/jquery-1.7.1.js")"></script>
<script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>
</head>
<body>
<header>
<a href="@routes.Application.index" id="logo"><span>Banana</span>Now</a>
<section class="webdesigntuts-workshop">
<form action="" method="">
<input type="search" placeholder="Search...">
<select id="search_select">
<option value="all">Entire Site</option>
</select>
<button>Search</button>
</form>
</section>
<dl id="user">
@if(user != null){
<dt>@user.name <span>(@user.email)</span></dt>
<dd>
<a href="@routes.Application.logout()">Logout</a>
</dd>
}
@if(user == null){
<dd>
<a href="@routes.Application.login()">Login</a>
</dd>
}
<dd>
<a href="@routes.Cart.index()">Cart</a>
</dd>
</dl>
</header>
<nav>
<h4 class="dashboard"><a href="#/">Walmart</a></h4>
@walmartCategories.groupBy(_.mainCategory).map {
case (group, subcategories) => {
@views.html.categories.group(group, subcategories)
}
}
<h4 class="dashboard"><a href="#/">Amazon Fresh</a></h4>
@amazonCategories.groupBy(_.mainCategory).map {
case (group, subcategories) => {
@views.html.categories.group(group, subcategories)
}
}
</nav>
<script type="text/javascript" src="@routes.Assets.at("javascripts/dropdown.js")"></script>
<section id="main">
@body
</section>
</body>
</html>
Can anyone point me in the right direction? Currently when i click the Add To Cart button it just performs a get request on that item.
