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

Question

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:

here is my 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());
  }
}

here is my view:

@(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>
}

here is my routes:

# 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)

here is my model(if needed): https://github.com/playforjava/ch03/blob/master/app/models/Product.java

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.

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>

Answer 1

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.

Detailed solution:

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>

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)