jquery - Uncaught ReferenceError : $ is not defined (using play framework)

Question

我是 Play Framework 的新手，我正在阅读一本名为“Play for java”的书，我还根据这本书对所有内容进行编程。您可以找到完整的源代码here 。

我想为列表中的每个产品添加删除功能。根据这本书，这是我的代码的不同部分:

这是我的 Controller :

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

当我转到应该获取产品列表的页面 (localhost:9000/products/) 并单击“删除”图标删除产品时，没有任何反应。

使用 Chrome 的开发者工具我检查了发生了什么。在我看来(list.scala.html)，这部分的第三行有一个 Uncaught ReferenceError: $ is not Define :

    <script>
     function del(urlToDelete) {
        $.ajax({
          url: urlToDelete,
          type: 'DELETE',
          success: function(results) {
            // Refresh the page
            location.reload();
          }
        });
      }
   </script>

Answer 1

感谢您的评论，解决方案是在 <head> ... </head> 中添加 JQuery 库标签。因为书上没有提到，所以我忘记了。

详细解决方案:

添加此行(取决于您的 jQuery 版本)

<script src="@routes.Assets.at("javascripts/jquery-2.2.1.min.js")" type="text/javascript"></script>

至app/views/main.scala.html 。对我来说，这个模板正在为每个页面加载。 但首先你需要下载 jQuery 并将其添加到你的 javascripts 文件夹(在 public 下)