Grails+Jquery-ui - 集成问题？答案

【问题标题】：Grails+Jquery-ui - integration issue?Grails+Jquery-ui - 集成问题？
【发布时间】：2013-01-21 06:55:54
【问题描述】：

我一直在尝试将 grails 与 jquery-ui 插件一起使用，我创建了一个简单的控制器以及一个使用日期选择器的 gsp 页面，我无法让日期选择器显示一个列表日期。我已经阅读了论坛等上的插件文档+文章，但没有找到解决方案。

插件文档 - http://grails.org/plugin/jquery-ui

开发环境 = grails 2.2.0、JDK 7、GGTS 最新版本

任何让这个工作的指针都会很棒。

（我曾尝试复制/重命名网络应用/其他文件夹中的文件，但没有成功）

步骤 1.新建grails项目

安装了jQuery-ui插件
创建了一个控制器和 gsp 页面 - 根据文档
当我导航到页面时，它给了我以下错误

错误 resource.ResourceMeta - 找不到资源：/plugins/jquery-ui-1.8.24/jquery-ui/themes/darkness/jquery-ui-1.8.24.custom.css |错误 ERROR [/Test2].[default] - Servlet.service() for servlet [default] in context with path [/Test2] throw exception 消息：您似乎错过了对 r:layoutR 的一些调用

13 年 1 月 23 日在我的环境中工作的正确解决方案如下所示，我发现 grails 网站上发布的代码不一定按原样工作 - 因此进行了此编辑。（如果有人有任何修改，请直接告诉我）

普惠制代码：

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

控制器代码：

def testDatePicker = { 
}

【问题讨论】：

您是否了解如何在您的解决方案中切换主题？
此时我只是坚持使用默认主题（UI 亮度） - 接下来我计划使用 themeroller 设计自己的主题，然后将其链接到应用程序，如果你愿意，我可以 ping 你当我完成时。
我会很好的，谢谢 :)

标签： javascript jquery jquery-ui grails grails-2.0

【解决方案1】：

您使用的是资源框架吗？如果是，您应该像这样使用jquery-ui 模块：

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

jquery-ui and resource framework 上的文档。

【讨论】：

我遇到了同样的错误。也许问题是由 grails 组成的 URL 以 /plugins/jquery-ui-... 开头，它实际上并没有引用 Java 脚本文件的本地 c:/...local 路径，这意味着它不会引用到适当的 CSS/js 文件。我知道这可能是资源框架的关键......我还没有弄清楚......任何提示指针表示赞赏。
我终于让它工作了 - 查看对原始帖子所做的编辑
是的，调整代码必须存在的顺序需要时间才能完成。在做这一切的同时——我最终学习了如何使用资源库，这非常有用。出于某种原因，添加

【解决方案2】：

注意 - 我错误地编辑了原始问题并提供了答案，原始问题也有解决方案说明。

我终于成功地集成了 jquery-ui 和 grails，但遇到了一些允许解决方案运行的问题。步骤。

新建Grails项目（我的环境grails 2.2.0，JDK 7，GGTS最新版本）
安装jquery-ui插件，编辑BuildConfig添加runtime ":jquery-ui:1.8.24"。
使用 grails 创建控制器和 gsp 页面

GSP 页面内容

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

控制器代码：

    def testDatePicker = { 
    }

4。在 grails 中运行解决方案，导航到页面上的日期选择器，它应该会向您显示时尚的日期选择器

【讨论】：

【解决方案3】：

您需要为插件添加以下行。

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

并在您使用 Jquery UI 的 gsp 页面上添加以下行。

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

【讨论】：