username availability checking using ajax in GRAILS

Question

I am doing one web application in grails.Now I am making signup page.In signup page I want to check the username availability via ajax.I can write the code for username availability checking in controller or service.I struck with how to contact server from client side via ajax.

My sample gsp code is

<g:form method="post" action="signup" controller="auth">
 <input type="text" name="name" >
 <input type="text" name="username" >
 <input type="password" name="password" >
 <input type="submit" value="signup">
 </g:form>

In the above code if the username textbox lost the focus it should check for availabity.I did a bit of google search.But i couldn't get what i want.Can anyone provide help or good tutorial for this?

Thanks.

Answer 1

you will first need to bind some event to the input box for username - i recommend using a JS library like jQuery, or mootools, or any of the other high quality library out there.

binding an event, like onblur, to the input box, you can write a function which issue a http GET request to your server (e.g., /register/checkAvailability?username=the username here), and the response will be displayed somewhere (may be next to the input box).

Answer 2

By using remoteFunction method we can do that.

Answer 3

Grails has some great built in ajax tags, but I prefer to use a javascript library directly (namely jquery)...

1. Download jquery and copy to web-app/js/jquery.js

2. In the head section of your form gsp or your layout add:

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

3. In your form gsp I'd recommend adding an id attribute to your input field for username, makes it easier to reference an element by id:

   <input type="text" name="username" id="username" value=""/>

4. In your controller method you can check your domain/service/etc to see if name is free. Below is a contrived example that returns the response as JSON, but you could also return html to fill a div, just depends on how you want to alert the user.

    class UserController {
      def checkAvailable = {
        def available
        if( User.findByUsername(params.id) ) {
           available = false
        } else {
           available = true
        }
        response.contentType = "application/json"
        render """{"available":${available}}"""
    }

5, In your form gsp in the head section add

    <script type="text/javascript">
    // wait for dom to load
    $(function(){
      // set onblur event handler
      $("#username").blur(function(){
        // if some username was entered - this == #username
        if($(this).length > 0) {
          // use create link so we don't have to hardcode context
          var url = "${createLink(controller:'user', action:'checkAvailable')}"
          // async ajax request pass username entered as id parameter
          $.getJSON(url, {id:$(this).val()}, function(json){
            if(!json.available) {
              // highlight field so user knows there's a problem
              $("#username").css("border", "1px solid red");
              // maybe throw up an alert box
              alert("This username is taken");
              // populate a hidden div on page and fill and display it..
              $("#somehiddendiv").html("This ID is already taken").show();
            }
          });
        }
      });
    });
    </script>

Of course there are many ways to implement this, I just happen to prefer jquery over using some of the built-in ajaxy features.