Question

In the below ‘simple’ Ajax login example, I’m using JQuery to submit form params to a Grail’s controller. However, the actual URL does not match the controller URL configured in the ajax call.

Html:

<div id="loginForm">
        <div id="ajaxLoginError">
        </div>
        <form name="ajaxLoginForm" action="ajaxLogin" id="ajaxLoginForm">
            <span class="pic"></span>
            <span class="close"></span>
            <input type="text" name="username" class="text focus" default="Username"
                value="${user?.username}" />
            <input type="password" name="password" class="text focus"
                default="Password" value="${user?.password}" />
            <button type="submit" name="login" id="ajaxLoginBtn">
                <span class="button"><span>Login</span> </span>
            </button>
            <label> <input type="checkbox" class="check" name="remember" />Remember
                me</label>
            <a href="#">Forgot username or password?</a>
        </form>
    </div>

Javascript:

$('#ajaxLoginBtn').click(function() {
    $('#ajaxLoginError').fadeOut();
    $.ajax({
        url: "${createLink(controller: 'user', action: 'ajaxLogin')}",
        type: 'GET',
        data: queryString,
        dataType: 'json',
        success: function(data) {
            if (data.isAuthenticated) {
                // Display user bar
                $('#loginUserBar').slideDown();
            }else {
                $('#ajaxLoginError').html(data.errorMsg).fadeOut();
            }
        }
    });
});

Also, can anyone verify my controller logic. I gather this is the correct way to parse a JSON response?

Server:

def ajaxLogin = {
    boolean isExists = false
    String errorMsg = ""
    def foundUser = User.findByEmailAndPassword(params.username, params.password) 
    if (foundUser) {
        isExists = true
    }else {
        errorMsg = "Login unsuccessful! Either the username, or password entered is incorrect."
    }
    render(content: 'text/json',
        loginResponse(isAuthenticated: isExists, errorMsg: errorMsg));
}

Similarly, is there anything I need to do to explicitly force Grails to use JQuery as the main javascript plugin?

Answer 1

There are a lot of different questions… 🙂

1) is there anything I need to do to explicitly force Grails to use JQuery as the main javascript plugin?

Install the jquery plugin if it’s not installed yet. You can also put a

<g:setProvider library="jquery"/>

at the beginning of your GSP (or in your layout) to explicitely set JQuery as the provider

2) this is the correct way to parse a JSON response?

    log.info("Receive send request");
    def contentType = request.getHeader('Content-Type')
    log.trace("receive with ContentType: " + contentType)
    if (contentType && contentType.contains('application/json')) {            
        def results = request.JSON
        log.info("results received : ${results}")
    }

You can add a if (request.xhr){} to test for ajax calls

3) can anyone verify my controller logic.

Nothing to say about the logic itself, you check for an existing login/password

4) the actual URL does not match the controller URL configured in the ajax call.

It’s difficult to answer with only what you told us. jQuery’s ajax call seems good, but we don’t know anything about the content of your queryString. I usually use $("#myForm").serialize() to send form to controllers
I don’t understand your problem about URLs though…