Play Framework - Defining my Javascript file within a function

Question

I'm using the Play Framework and am trying to define a javascript file within a function in another javascript file (the reason being that I don't want these functions to be usable outside of the container function).

So I have two javascripts files, ./public/javascripts/main.js, ./public/javascript/custom.js.

From my html pages (index.scala.html) I define this as follows:

  <script src="@routes.Assets.at("javascripts/main.js")"></script>

Using "@routes...." doesn't work in main.js, so I tried adding the following:

  $.getScript("public/javascripts/custom.js", function(){
       alert("Script loaded and executed.");
    });

I've tried a variety of paths but it always says it can't find it.

Any idea how to do this in Play please? Looked through as much documentation as I can and nothing is there...

Any help would be brilliant!

Thank you.

Kind Regards,

Gary Shergill

josephpconley · Accepted Answer · 2014-01-24 14:40:15Z

4

Make sure you have the following declaration in your routes file:

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

Then the following should work:

$.getScript("/assets/javascripts/custom.js", function(){
   alert("Script loaded and executed.");
});

answered Jan 24, 2014 at 14:40

josephpconley

1,72312 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gary Over a year ago

This returns the following: GET localhost:9000/assets/javascript/custom.js?_=1390575856602 404 Not Found

mantithetical Over a year ago

Which directory contains your js files? javascript or javascripts? The path returning 404 is looking in javascript (singular). Is that right?

Gary Over a year ago

Good spot... I seem to have missed out the "s" when typing it out. Thanks!

Gary Over a year ago

Question - In the future, is it more efficient to use "<script src="javasciript file"></script>" or to use the above method ($.getScript....)?

Artsiom Miklushou · Accepted Answer · 2014-01-24 17:54:14Z

1

Try to use Javascript Routing mechanism. As described here

Define javascriptRoutes

  import play.api.mvc._
  object Application extends Controller {

    def javascriptRoutes = Action { implicit request =>
      import routes.javascript._
      Ok(
        Routes.javascriptRouter("jsRoutes")(
           javascript.Assets.at     
        )
      ).as("text/javascript")
    }
  }

Update your .routes file

   GET  /routes   controllers.Application.javascriptRoutes

Include it into the page:

<script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>

And then use jsRoutes variable in your javascript:

$.getScript(jsRoutes.controllers.Assets.at('javascripts/custom.js').url, function(){
    alert("Script loaded and executed.");
});

edited Jan 24, 2014 at 17:54

answered Jan 24, 2014 at 14:42

Artsiom Miklushou

7669 silver badges23 bronze badges

1 Comment

Gary Over a year ago

I don't fully understand the documentation regarding this. I need to add the def javascriptRoutes into the Application.java, but then what do I add to the routes file for this? Or is that wrong?

Collectives™ on Stack Overflow

Play Framework - Defining my Javascript file within a function

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related