jQuery is not executing in my Groovy Server Page

Question

I have a jQuery function that isn't executing in my Groovy Server Page. I have my controller's function simply render an error message but it shows up on the "next" web page instead of showing up on the "same" web page as in Ajax. I did verify that jQuery does load on my controller's GSP view using the "View Source" feature of the Chrome browser.

Here is my controller's function regarding the error message that I wish to display:

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

and here is what I have in the head element of my GSP:

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

I learned that the layoutResources line is necessary or my GSP doesn't even pick up jQuery.

Finally, here is what I have in the body of my GSP which pertains to this problem:

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

This is just a link I created to test if I can get Ajax to work before I use it for what I really need.

Any help tremendously appreciated. Oh, and before I forget, I have this line in my BuildConfig.groovy:

runtime ":jquery:1.11.0.2"

Thanks

Answer 1

Another approach, maybe a simple approach, is to use the grails gsp tag. Using this, you can get rid of the javascript function and so you will remove everything between your tags or comment it out just to see how things work and do something like:

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

Replace "controller" in the above code with whatever your concerned controller's name is.

Answer 2

As a general rule, when working with jQuery, it is a good idea to use the ready event. This will ensure that any event handlers you add to your elements will be added only after said elements have been rendered. This is what Rituraj attempts to cover in his answer, but here is the "jQuery way" to do it:

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

Also, the false return is unnecessary here, as you have already prevented the default anchor action.

Answer 3

first add jQuery file then

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