如何在 Grails 中包含 jquery.js？

Question

提问by Steve Kuo

I have a Grails 2.0.0 project that was created using grails create-app. In my HTML and GSP files, I'm trying to include jquery.js. I've tried all of the following without success:

我有一个使用grails create-app. 在我的 HTML 和 GSP 文件中，我试图包含jquery.js. 我已经尝试了以下所有方法都没有成功：

<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<g:javascript library="jquery"/>

The first two <script>tags results in 404 Not Found (verified with Firebug). The <g:javascript>tag results in nothing being included (verified using view source).

前两个<script>标签导致 404 Not Found（用 Firebug 验证）。该<g:javascript>标签不会包含任何内容（使用查看源代码进行验证）。

On my Grails application's home page, it indicates that jquery 1.7.1 is installed (under "INSTALLED PLUGINS").

在我的 Grails 应用程序的主页上，它表明安装了 jquery 1.7.1（在“INSTALLED PLUGINS”下）。

What is the correct way in Grails to include the jquery .js file?

Grails 中包含 jquery .js 文件的正确方法是什么？

Follow-up:The .GSP file:

后续：.GSP 文件：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <title>Test</title>
    <g:javascript library="jquery/jquery"/>
  </head>
  <body>
    <h1>Test</h1>
  </body>
</html>

Results in the follow HTML source:

结果在以下 HTML 源代码中：

<html>
  <head>
    <title>Test</title>

  </head>
  <body>
    <h1>Test</h1>
  </body>
</html>

Note the lack of jquery.js being included.

请注意缺少 jquery.js 被包括在内。

Follow-up 2:

后续2：

I'm creating my app using grails create-app:

我正在使用grails create-app以下方法创建我的应用程序：

13:56:40 ~/grailsDev $ grails create-app helloworld
| Created Grails Application at /Users/steve/grailsDev/helloworld
13:56:57 ~/grailsDev $ cd helloworld/
13:57:06 ~/grailsDev/helloworld $ ls -al web-app/js
total 8
drwxr-xr-x  3 steve  staff  102 Jan 21 13:56 .
drwxr-xr-x  7 steve  staff  238 Dec 15 08:04 ..
-rw-r--r--  1 steve  staff  183 Dec 14 22:56 application.js
13:57:23 ~/grailsDev/helloworld $ grails -version

Grails version: 2.0.0

Answer 1

回答by Steve Kuo

Apparently <r:layoutResources/>needs to be included in <head>(after <q:javascript library='jquery' />). The following actually works:

显然<r:layoutResources/>需要包含在<head>(after <q:javascript library='jquery' />) 中。以下实际有效：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <title>Simple GSP page</title>
    <g:javascript library='jquery' />
    <r:layoutResources/>
  </head>
  <body>
    Place your content here
  </body>
</html>

Answer 2

回答by Burt Beckwith

The jquery plugin is installed by default in 2.0 - see grails-app/conf/BuildConfig.groovy. To use jquery.js in a GSP just add this line:

jquery 插件默认安装在 2.0 中 - 请参阅grails-app/conf/BuildConfig.groovy。要在 GSP 中使用 jquery.js，只需添加以下行：

<g:javascript library='jquery' />

Answer 3

回答by Wasim

Steve after installing Jquery plugin thru grails install-plugin jquery you have to execute another grails command to download the jquery file in your app

史蒂夫通过 grails install-plugin jquery 安装 Jquery 插件后，您必须执行另一个 grails 命令才能在您的应用程序中下载 jquery 文件

grails installJQuery

This target downloads and installs jquery-1.7.1.js and jquery-1.7.1.min.js under web-app/js/jquery/

该目标在 web-app/js/jquery/ 下下载并安装 jquery-1.7.1.js 和 jquery-1.7.1.min.js

Answer 4

回答by Nick Grealy

As per the current docs - http://grails.org/plugin/jquery(Grails version: 1.3 > *) on 18th Sept, 2015

根据当前文档 - http://grails.org/plugin/jquery（Grails版本：1.3 > *），2015 年 9 月 18 日

Installation

安装

To install the jQuery plugin type this command from your project's root folder:

要安装 jQuery 插件，请从项目的根文件夹中键入以下命令：

grails install-plugin jquery

Targets:

目标：

grails installJQuery

This target downloads and installs jquery-1.4.2.js and jquery-1.4.2.min.js under web-app/js/jquery/

该目标在 web-app/js/jquery/ 下下载并安装 jquery-1.4.2.js 和 jquery-1.4.2.min.js

The complete jQuery distribution is downloaded and installed under your project's /web-app/js/jQuery folder.

完整的 jQuery 发行版已下载并安装在项目的 /web-app/js/jQuery 文件夹下。

Usage

用法

Ajax via jQuery

通过 jQuery 的 Ajax

To have the Grails' adaptive AJAX support adapt itself to jQuery (rather than the default of Prototype, or another choice like YUI or Dojo):

要让 Grails 的自适应 AJAX 支持使其自身适应 jQuery（而不是 Prototype 的默认值，或其他选择，如 YUI 或 Dojo）：

Since Grails 1.2:

从 Grails 1.2 开始：

Add this line to your layout-file

将此行添加到您的布局文件

<g:javascript library="jquery" plugin="jquery"/>

and the following to your grails-app/conf/config.groovy

以及以下内容到您的 grails-app/conf/config.groovy

grails.views.javascript.library="jquery"

alternatively you can use:

或者，您可以使用：

<g:javascript library="jquery" />

(without plugin="jquery") but you will need to call the grails installJQuery target (see Installation Tab)

（没有 plugin="jquery"）但您需要调用 grails installJQuery 目标（请参阅安装选项卡）

Answer 5

回答by Laurence

In grails 2.x you can also do:

在 grails 2.x 中，您还可以执行以下操作：

grails.resources.modules = {
    core {
        dependsOn 'jquery, jquery-ui'
    }
}

in Config.groovy

在 Config.groovy

Then in your GSP simply place the following in your HEADelement:

然后在您的 GSP 中，只需将以下内容放入您的HEAD元素中：

<r:require module="core"/>

The advantage is you can specify other CSS/JS files to depend on, makes it nice and clean in the GSP. This is also where you can override the versions of jQuery/jQuery-UI.

优点是您可以指定其他 CSS/JS 文件来依赖，使其在 GSP 中干净整洁。这也是您可以覆盖 jQuery/jQuery-UI 版本的地方。

Answer 6

回答by ShootingStar

I saw a good tutorial on that in icodeya. http://www.icodeya.com/2012/09/grails-different-ways-to-import.html

我在 icodeya 上看到了一个很好的教程。 http://www.icodeya.com/2012/09/grails-different-ways-to-import.html

you can either do this in your gsp:

您可以在您的 gsp 中执行此操作：

<g:javascript src="myscript.js"/ >

ORyou can do this in your Config.groovy:

或者您可以在 Config.groovy 中执行此操作：

grails.resources.modules = {
core{
resource url:'/js/jQuery.js' 
} 
myScript { 
resource url:'/js/myScript.js' 
dependsOn 'core' 
}
}

then, in your gsp, you can attach this:

然后，在你的 gsp 中，你可以附上这个：

<r:require module="myScript" />

Answer 7

回答by Navonod

I found (from the JQuery Plugin page) that in addition to using the <g:javascript library="jquery"/>tag, I had to add the plugin label explicitly to make the tag look like:

我发现（从 JQuery 插件页面）除了使用<g:javascript library="jquery"/>标签外，我还必须显式添加插件标签以使标签看起来像：

<g:javascript library="jquery" plugin="jquery"/>

Any idea why I had to use the plugin property?

知道为什么我必须使用插件属性吗？

Answer 8

回答by lxknvlk

Currently, in 2015, all you have to do is add runtime ":jquery:1.11.1"to your BuildConfig.groovy, and that is all.

目前，在 2015 年，您所要做的就是添加runtime ":jquery:1.11.1"到您的 BuildConfig.groovy 中，仅此而已。

Answer 9

回答by Salvador Valencia

Update for Grails 2.3This might help troubleshoot the configuration of jQuery so it can be available from your gsp pages.

Grails 2.3更新这可能有助于解决 jQuery 的配置问题，以便它可以从您的 gsp 页面获得。

First of all if you run the grails install-plugin jquerycommand it will fail with the 'install-plugin' obsolete message:

首先，如果您运行 grailsinstall-plugin jquery命令，它将失败并显示“install-plugin”过时消息：

So most likely you already have it configured in your BuildConfig.groovy like this (note is runtime, not compile):

所以很可能你已经在你的 BuildConfig.groovy 中像这样配置了它（注意是运行时，而不是编译）：

plugins {
    // ... some other plugins here ...
    runtime ":jquery:1:11:1"
}

If you are using Eclipse, do a Filesearch for jquery and see if you already have the files:
Confirm that your jsdirectory is not empty, it is located inside the web-appdirectory. If jshas no files or directories then just copy them from what you got in in step 2:
As mentioned before, the combination of these two lines seems to work (at the top of your gsp pages):

如果您使用的是 Eclipse，请对 jquery进行文件搜索，看看您是否已经拥有这些文件：
确认您的js目录不为空，它位于web-app目录内。如果js没有文件或目录，则只需从您在步骤 2 中获得的内容复制它们：
如前所述，这两行的组合似乎有效（在您的 gsp 页面顶部）：

enter image description here

在此处输入图片说明

If jQuery is not the very first javascript library to load you might have problems. Check your layouts/main.gspfile if you have one. You might need to add jquery to all your pages just so it is at the very top of your html source.

如果 jQuery 不是第一个加载的 javascript 库，您可能会遇到问题。layouts/main.gsp如果您有文件，请检查您的文件。您可能需要将 jquery 添加到您的所有页面，以便它位于您的 html 源代码的最顶部。

Hope that helps.

希望有帮助。

Note:At the time of this posting (April 2015) Grails 3.0 has been released and it appears to be incompatible with Grails 2.X projects in the way they are configured. Hopefully it will be better documented to avoid the issues with 2.X.

注意：在本文发布时（2015 年 4 月），Grails 3.0 已经发布，它似乎与 Grails 2.X 项目的配置方式不兼容。希望它会被更好地记录以避免2.X的问题。

Answer 10

回答by Wasim

<g:javascript library="jquery/jquery"/>

如何在 Grails 中包含 jquery.js？

提问by Steve Kuo

回答by Steve Kuo

回答by Burt Beckwith

回答by Wasim

回答by Nick Grealy

Installation

安装

Targets:

目标：

Usage

用法

Ajax via jQuery

通过 jQuery 的 Ajax

Since Grails 1.2:

从 Grails 1.2 开始：

回答by Laurence

回答by ShootingStar

回答by Navonod

回答by lxknvlk

回答by Salvador Valencia

回答by Wasim

相关推荐

最近更新

标签

如何在 Grails 中包含 jquery.js？

提问by Steve Kuo

回答by Steve Kuo

回答by Burt Beckwith

回答by Wasim

回答by Nick Grealy

Installation

安装

Targets:

目标：

Usage

用法

Ajax via jQuery

通过 jQuery 的 Ajax

Since Grails 1.2:

从 Grails 1.2 开始：

回答by Laurence

回答by ShootingStar

回答by Navonod

回答by lxknvlk

回答by Salvador Valencia

回答by Wasim

相关推荐

jquery：提交表单两次

如何使用 jQuery 删除 <div> 的所有项目的所有 css 类？

JQuery 数据选择器未使用 .data 更新

使用 Jquery 动态创建按钮

相关推荐

最近更新

标签