Using jquery with play framework 2.0

Question

I want to use jQuery to open a lightbox but it is causing the problem. Here is my Application.java code:

    @(products: List[Products])

    @import helper._

        <script type="text/javascript" src="../public/javascripts/jquery-1.7.2.min.js"></script>
        <!-- Add mousewheel plugin (this is optional) -->
        <script type="text/javascript" src="../public/javascripts/jquery.mousewheel-3.0.6.pack.js"></script>

        <!-- Add fancyBox main JS and CSS files -->
        <script type="text/javascript" src="../public/javascripts/jquery.fancybox.js?v=2.0.6"></script>
        <link rel="stylesheet" type="text/css" href="../public/stylesheets/jquery.fancybox.css?v=2.0.6" media="screen" />


        <script type="text/javascript">
        $(document).ready(function() {

$('.fancybox').fancybox();

// my code
           });
// rest of the code

It gives me the error

ReferenceError: $ is not defined showed in firebug. i even tried changing $ with jQuery but still it doesnt work at all. Also i saw that the jQuery gets loaded in the head section. Do help me with this.

conf/routes file:

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
#GET     /                           controllers.Application.index()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

# Products list (to fetch the list of all the products)
GET     /products                controllers.Application.list

GET     /products/:id           controllers.Application.findAll1(id:Integer)

Answer 1

I think that your JS paths are wrong.

If you use the default Play config, your Javascript paths should look like:

<script type="text/javascript" src="/assets/javascripts/jquery-1.7.2.min.js"></script>
...

And ever better, using the reverse routing, you should use:

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

The static assets are provided through a special route defined in your conf/routes file:

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

This route simply makes a binding between your local public folder and the /assets Url.