I tried to import jquery ui support into a very simple java application.
My first goal is to get the example jquery ui site (http://jqueryui.com/themeroller/) that comes with each jquery installation running.
My problem is that
http://localhost:9000/
returns me the file, but without working javascripts (Accordion is e.g. just displaying the text but not displaying the accordion).
Once this works my next step would be to fill the components with data from controllers.Applicaiton. Suggestions on how this works (e.g. for the accordion) are also highly welcome.
Thank you in advance!
My public directory:
- public
- images
- javascripts
- jquery-ui.js
- jquery.js
- stylesheets
- jquery-ui.css
- jquery-ui.structure.css
- jquery-ui.theme.css
My conf/routes file:
GET / controllers.Application.index()
My controllers.Application class has just one method:
public static Result index() {
return ok(index.render("Your new application is ready."));
}
My main.scala.html (EDIT: Order of imports changed after comment below.)
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/jquery-ui.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/jquery-ui.structure.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/jquery-ui.theme.css")">
<link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
<script src="@routes.Assets.at("javascripts/jquery.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery-ui.js")" type="text/javascript"></script>
</head>
<body>
@content
</body>
</html>
And finally my index.scala.html (shortended).
@(message: String)
@main("NuMap") {
<script type="text/javascript">
$( "#accordion" ).accordion();
... the script from the sample file...
</script>
<h1>Welcome to jQuery UI!</h1>
<div class="ui-widget">
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
</div>
<h1>YOUR COMPONENTS:</h1>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<!-- Autocomplete -->
... all the other components from sample file...
}
My generated HTML has the following header:
<head>
<title>NuMap</title>
<link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui.structure.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui.theme.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-my.css">
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
<script src="/assets/javascripts/jquery.js" type="text/javascript"></script>
<script src="/assets/javascripts/jquery-ui.js" type="text/javascript"></script>
</head>
So everything looks ok, but still jquery-ui is not working...
