CODEWITHSUNDEEP
javajquery-uiplayframework
user1729603
user1729603

Reputation: 83

Integrate JQuery UI into Play Framework

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:

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...

Upvotes: 0

Views: 1002

Answers (1)

Runcorn
Runcorn

Reputation: 5224

I am not fully sure the issue are having. But if the jQuery is working and you are only having an issue regarding the jquery-ui , then the <script> import order might be the reason. You are using, 

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

Since jquery-ui is heavily dependent on jquery. jQuery must be loaded first and after which the jquery-ui.

Hope this help you.

Regards

Upvotes: 1

Related Questions