Hello experts,

I've spent my hole day trying to make this code work, but i think because of my lack of knowledge in javascript i failed.

I'm trying to implement a login form in my system, but using ajax since i got the login option in every single page of the app.

So this little form is localized in the header of my app.

The form code was copied from the Spring Plugin documentation (_header):

HTML Code:
                                       <form action='${request.contextPath}/j_spring_security_check'
                                                method='POST' id='ajaxLoginForm' name='ajaxLoginForm'>
                                                <p>
                                                        <label for='username'>Login ID</label> <input type='text'
                                                                class='text_' name='j_username' id='username' />
                                                </p>
                                                <p>
                                                        <label for='password'>Password</label> <input type='password'
                                                                class='text_' name='j_password' id='password' />
                                                </p>
                                                <p>
                                                        <label for='remember_me'>Remember me</label> <input
                                                                type='checkbox' class='chk' id='remember_me'
                                                                name='_spring_security_remember_me' />
                                                </p>
                                                <p>
                                                        <a href='javascript:void(0)' onclick='authAjax(); return false;'>Login
                                                </p>
                                        </form>
And the javascript code was also copied from the documentation and it is (_config):

Code:
<script type='text/javascript'> // center the form Event.observe(window, 'load', function() { var ajaxLogin = $('ajaxLogin'); $('ajaxLogin').style.left = ((document.body.getDimensions().width - ajaxLogin.getDimensions().width) / 2) + 'px'; $('ajaxLogin').style.top = ((document.body.getDimensions().height - ajaxLogin.getDimensions().height) / 2) + 'px'; }); function showLogin() { $('ajaxLogin').style.display = 'block'; } function cancelLogin() { Form.enable(document.ajaxLoginForm); Element.hide('ajaxLogin'); } function authAjax() { Form.enable(document.ajaxLoginForm); Element.update('loginMessage', 'Sending request ...'); Element.show('loginMessage'); var form = document.ajaxLoginForm; var params = Form.serialize(form); Form.disable(form); new Ajax.Request(form.action, { method: 'POST', postBody: params, onSuccess: function(response) { Form.enable(document.ajaxLoginForm); var responseText = response.responseText || '[]'; var json = responseText.evalJSON(); if (json.success) { Element.hide('ajaxLogin'); $('loginLink').update('Logged in as ' + json.username + '(<%=link(controller: 'logout') { 'Logout' }%>)' ); /} else if (json.error) { Element.update('loginMessage', "<span class='errorMessage'>" + json.error + '</error>'); } else { Element.update('loginMessage', responseText); } } }); } </script>
This code can be found in the following link:

http://grails-plugins.github.com/gra...ntication.html

In the documentation example they propose to show a window in the middle of the screen when the user clicks on the logging link... in my case i dont need those javascript events, because i'm already doing this when the user clicks on "Fazer login".

After the login process i want to update the app header showing the username and etc..

I 've done this without ajax, but when the logging fails it redirects my user to the login/auth page... and i don't want this.