jQuery没有在我的Groovy服务器页面中执行

时间:2014-05-14 13:46:15

标签: javascript jquery ajax grails

我有一个在我的Groovy Server Page中没有执行的jQuery函数。我的控制器功能只是呈现错误信息,但它显示在“下一个”网页上,而不是显示在与Ajax相同的“同一”网页上。我确实使用Chrome浏览器的“查看源”功能验证了jQuery是否在我的控制器的GSP视图上加载。

这是我的控制器关于我希望显示的错误消息的功能:

def displayerror = {
    render "Login or Password incorrect!"
}

以下是我在GSP的head元素中所拥有的内容:

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

我了解到layoutResources行是必要的,或者我的GSP甚至没有拿起jQuery。

最后,这是我在GSP正文中与此问题有关的内容:

<g:link action = "displayerror" elementId = "errorMessage">Error!</g:link>
    <div id = "time">
    </div>
    <r:script>
        $("#errorMessage").click(function() {
            (#"time").load(this.href);
            return false;
        });
    </r:script>

这只是我创建的一个链接,用于测试我是否可以在将Ajax用于我真正需要的工作之前使其工作。

非常感谢任何帮助。哦,在我忘记之前,我在BuildConfig.groovy中有这一行:

runtime ":jquery:1.11.0.2"

由于

3 个答案:

答案 0 :(得分:1)

作为一般规则,使用jQuery时,最好使用ready事件。这将确保您添加到元素中的任何事件处理程序仅在呈现所述元素后才会添加。这就是Rituraj在他的回答中试图涵盖的内容,但这里是&#34; jQuery方式&#34;这样做:

$(function () {
    $("#errorMessage").click(function(e) {
        e.preventDefault();
        $("#time").load(this.href);
        return false;
    });
});

此外,此处不需要false返回,因为您已经阻止了默认的锚操作。

答案 1 :(得分:1)

另一种方法,也许是一种简单的方法,是使用grails gsp标签。使用此功能,您可以摆脱javascript功能,因此您将删除标签之间的所有内容或将其注释掉以查看其工作原理并执行以下操作:

 <g:remoteLink controller = "controller" action = "displayerror" update = "time">Error!</g:remoteLink>
    <div id = "time">
    </div>
<%-- Below this line is your old code that is commented out -->
<%--        <r:script>--%>
<%--            $(function () {--%>
<%--                $("#errorMessage").click(function(e) {--%>
<%--                    e.preventDefault();--%>
<%--                    $("#time").load(this.href);--%>
<%--                    });--%>
<%--            });--%>
<%--        </r:script>--%>

将上述代码中的“controller”替换为您所关注的控制器名称。

答案 2 :(得分:0)

首先添加jQuery文件然后

$(document).ready(function(){
   $("#errorMessage").click(function(e) {
             e.preventDefault();
                $("#time").load(this.href);
                return false;
            });
  });