未捕获的ReferenceError:未定义$(使用播放框架) [英] Uncaught ReferenceError: $ is not defined (using play framework)
问题描述
我是Play Framework的新手，正在阅读一本名为"Play for Java"的书，同时还对本书的所有内容进行了编程.您可以在此处找到完整的源代码.
I am new to Play Framework and I'm reading a book called "Play for java" , I'm also programming everything alongside the book. you can find the complete source code here.
我想为列表中的每个产品添加删除功能.根据这本书，这是我代码的不同部分:
I want to add a delete functionality for every product in a list. according to the book , here are my different parts of the code:
这是我的控制器:
package controllers;
import models.Product;
import play.data.Form;
import play.mvc.Result;
import play.mvc.Controller;
import views.html.products.*;
import java.util.List;
public class Products extends Controller {
private static final Form<Product> productForm = Form.form(Product.class);
public static Result list() {
List<Product> products = Product.findAll();
return ok(list.render(products));
}
public static Result newProduct() {
return ok(details.render(productForm));
}
public static Result details(String ean) {
final Product product = Product.findByEan(ean);
if (product == null) {
return notFound(String.format("Product %s does not exist.", ean));
}
Form<Product> filledForm = productForm.fill(product);
return ok(details.render(filledForm));
}
public static Result save() {
Form<Product> boundForm = productForm.bindFromRequest();
if(boundForm.hasErrors()) {
flash("error", "Please correct the form below.");
return badRequest(details.render(boundForm));
}
Product product = boundForm.get();
product.save();
flash("success",
String.format("Successfully added product %s", product));
return redirect(routes.Products.list());
}
public static Result delete(String ean) {
final Product product = Product.findByEan(ean);
if(product == null) {
return notFound(String.format("Product %s does not exists.", ean));
}
Product.remove(product);
return redirect(routes.Products.list());
}
}
这是我的观点:
@(products: List[Product])
@main("Products catalogue") {
<h2>All products</h2>
<script>
function del(urlToDelete) {
$.ajax({
url: urlToDelete,
type: 'DELETE',
success: function(results) {
// Refresh the page
location.reload();
}
});
}
</script>
<table class="table table-striped">
<thead>
<tr>
<th>EAN</th>
<th>Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
@for(product <- products) {
<tr>
<td><a href="@routes.Products.details(product.ean)">
@product.ean
</a></td>
<td><a href="@routes.Products.details(product.ean)">@product.name</a></td>
<td><a href="@routes.Products.details(product.ean)">@product.name</a></td>
<td>
<a href="@routes.Products.details(product.ean)"><i class="icon icon-pencil"></i></a>
<a onclick="javascript:del('@routes.Products.delete(product.ean)')"><i class="icon icon-trash"></i></a>
</td>
</tr>
}
</tbody>
</table>
<a href="@routes.Products.newProduct()" class="btn">
<i class="icon-plus"></i> New product</a>
}
这是我的路线:
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Home page
GET / controllers.Application.index()
GET /products/ controllers.Products.list()
GET /products/new controllers.Products.newProduct()
GET /products/:ean controllers.Products.details(ean: String)
POST /products/ controllers.Products.save()
DELETE /products/:ean controllers.Products.delete(ean: String)
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.at(path="/public", file)
这是我的模型(如果需要): https://github.com/playforjava/ch03/blob/master /app/models/Product.java
here is my model(if needed): https://github.com/playforjava/ch03/blob/master/app/models/Product.java
当我转到应该获得产品列表的页面(localhost:9000/products/)，并且单击删除"图标删除产品时，什么也没有发生.
when I go to the page where I should get a list of products (localhost:9000/products/) and I click on the "delete" icon to delete a product, nothing happens.
我使用Chrome的开发者工具检查了发生了什么.在我看来(list.scala.html)在此部分的第三行中有一个Uncaught ReferenceError: $ is not defined:
using Chrome's Developer tools I checked what is going on. in my view (list.scala.html) there is a Uncaught ReferenceError: $ is not defined in the 3rd line of this part:
<script>
function del(urlToDelete) {
$.ajax({
url: urlToDelete,
type: 'DELETE',
success: function(results) {
// Refresh the page
location.reload();
}
});
}
</script>
推荐答案
感谢注释，解决方案是在<head> ... </head>标记内添加JQuery库.因为书中没有提到它，所以我忘记了.
Thanks for the comments, the solution was to add the JQuery library inside the <head> ... </head> tag. Because it wasn't mentioned in the book, I forgot about that.
详细解决方案:
添加此行(取决于您的jQuery版本)
add this line (depending on your version of jQuery)
<script src="@routes.Assets.at("javascripts/jquery-2.2.1.min.js")" type="text/javascript"></script>
到 app/views/main.scala. html .对我来说，此模板正在为每个页面加载. 但首先您需要下载jQuery并将其添加到您的javascripts文件夹(在公共目录下)
to the app/views/main.scala.html . for me, this template is loading for every page. but first you need to download jQuery and add it to your javascripts folder (under public)
这篇关于未捕获的ReferenceError:未定义$(使用播放框架)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
