disponibilidade nome de usuário verificando usando ajax em Grails

Question

Estou fazendo uma aplicação web em grails.Now Estou fazendo inscrição página page.In inscrição Quero verificar a disponibilidade nome de usuário via ajax.I pode escrever o código disponibilidade nome de usuário verificação no controlador ou service.I atingido com a forma como para servidor contacto a partir do lado do cliente via ajax.

Meu código gsp amostra é

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

No código acima, se a caixa de texto nome de usuário perdeu o foco deve verificar se há availabity.I fiz um pouco de google search.But eu poderia não conseguir o que ninguém want.Can fornecer ajuda ou bom tutorial para isso?

Graças.

Answer 1

Ao usar remoteFunction método, podemos fazer isso.

Answer 2

Grails tem algum grande construído em ajax tags, mas eu prefiro usar uma biblioteca javascript diretamente (ou seja, jQuery) ...

1. jquery e copiar para web-app / js / jquery.js

2. Na seção cabeça de seu gsp forma ou o suplemento de layout:

3. Em seu formulário gsp eu recomendo adicionar um atributo id para o seu campo de entrada para nome de usuário, torna mais fácil para fazer referência a um elemento por id:

4. No seu método de controlador que você pode verificar o seu domínio / serviço / etc para ver se o nome é gratuito. Abaixo está um exemplo artificial que retorna a resposta como JSON, mas você também pode retornar html para preencher uma div, só depende de como você deseja alertar o usuário.

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

5, em seu formulário gsp na seção principal 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>

Claro que existem muitas maneiras de implementar isso, eu só acontecerá a preferir jquery sobre o uso de alguns dos recursos ajax embutidos.

Answer 3

primeiro você precisa vincular algum evento para a caixa de entrada para username - Eu recomendo usar uma biblioteca JS como jQuery ou MooTools, ou qualquer um dos outros biblioteca de alta qualidade lá fora.

ligar um evento, como onblur, para a caixa de entrada, você pode escrever uma função que emitir um pedido HTTP GET ao seu servidor (por exemplo, / registrar / checkAvailability ? username = o nome de usuário aqui ), ea resposta será exibido em algum lugar (pode ser o próximo a caixa de entrada).

Answer 4

Trabalhar fora da caixa com teses alterações.

$("#username").bind("change paste keyup", function() {

 $(function(){
        // set onblur event handler
        $("#username").bind("change paste keyup", function() { /*<<<<< !UPDATE THIS LINE!******/
            // 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();
                    }
                });
            }
        });
    });