CODEWITHSUNDEEP
javascriptjqueryjquery-uigrailsgrails-2.0
user1811107
user1811107

Reputation: 759

Grails+Jquery-ui - integration issue?

I have been trying to use grails with the jquery-ui plug-in, I have created a simple controller along with a gsp page that uses a datepicker, I have not been able to get the date picker to show a list of dates. I have read the plug in documentation + articles on forums etc. but have not found a resolution.

Plug in documentation - http://grails.org/plugin/jquery-ui

Dev environment = grails 2.2.0, JDK 7, GGTS latest version

Any pointers to getting this working would be great.

(I have tried copying/renaming files in web app/other folders but have not been successful)

Steps 1. Created a new grails project

  1. installed the jQuery-ui plug in

  2. Created a controller and gsp page - per the documentation

  3. When I navigate to the page it gives me the following error

    ERROR resource.ResourceMeta - Resource not found: /plugins/jquery-ui-1.8.24/jquery-ui/themes/darkness/jquery-ui-1.8.24.custom.css | Error ERROR [/Test2].[default] - Servlet.service() for servlet [default] in context with path [/Test2] threw exception Message: It looks like you are missing some calls to the r:layoutR

The correct solution on 23-jan-13 that worked in my environment as described in the original post is shown below, I found the code posted on the grails website does not necessarily work as is - hence this edit. (if anyone has any edits do let me know directly)

GSP Code:

<html>
    <head>
        <title>Simple GSP page</title>
        <g:javascript library="jquery" />
        <g:javascript library="jquery-ui"/>

        <script type="text/javascript">

            $(document).ready(function() { 
               $("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); }) 
        </script>
 <r:layoutResources/>   
 </head>
    <body>
        <div>
            <p> Between <input type="text" id="datepicker"> </p>        
        </div>
      <r:layoutResources/>
    </body>
</html>

Controller code:

def testDatePicker = { 
}

Upvotes: 1

Views: 3293

Answers (3)

Piyush Chaudhari
Piyush Chaudhari

Reputation: 1012

You need to add following line for plugin.

plugins {    
        runtime ":jquery:1.8.3"
        compile ":jquery-ui:1.8.24"
    }

And add the following line on which gsp page you use Jquery UI.

< head>
     < g:javascript library="jquery" />
     < r:require modules="jquery-ui"/>
     < r:script>
        $(document).ready(function() {
               your code...
        });
     < /r:script>
< /head>

Upvotes: 0

user1811107
user1811107

Reputation: 759

Note - I incorrectly edited my original question along with providing the answer, the original question also has the solution description.

I finally was successful integrating jquery-ui and grails, faced some issue which allow the solution to runs. Steps.

  1. Create new Grails project (my environment grails 2.2.0, JDK 7, GGTS latest version)
  2. Install jquery-ui plug-in, edit BuildConfig add runtime ":jquery-ui:1.8.24".
  3. Create a controller and gsp page, using grails

GSP Page content

 <html>
    <head>

    <title>Simple GSP page</title>
    <g:javascript library="jquery" />
    <g:javascript library="jquery-ui"/>

    <r:layoutResources/>   

    <script type="text/javascript">

       $(document).ready(function() { 
           $("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); }) 
    </script>


     </head>
        <body>
            <div>
                <p> Between <input type="text" id="datepicker"> </p>        
            </div>
          <r:layoutResources/>
        </body>
    </html>

Controller code:

    def testDatePicker = { 
    }

4. Run the solution in grails, navigate to the date picker on your page, it should show you the sleek date picker

Upvotes: 0

Benoit Wickramarachi
Benoit Wickramarachi

Reputation: 6216

Are you using the Resource framework? If yes, you should use the jquery-ui module like this:

<r:require module="jquery-ui"/>

Documentation on jquery-ui and resource framework.

Upvotes: 1

Related Questions