1

Estou implementando uma aplicaçao web e ja tenho o CRUD completo e implementaçao de busca. Porem quero usar ajax para deixar o sistema mais eficiente e implementar a busca de cadastros no banco usando ajax. Comecei implementando porem nao ta rodando com ajax, ao fazer a busca o resultado fica sobrepondo o que ja estava listado anteriormente, como podem ver abaixo. O que esta errado ou faltando para que o ajax possa fazer essa busca no meu sistema corretamente.

inserir a descrição da imagem aqui Minha JQ:

$(document).ready(function() {
$("#searchForm").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $(this),
  term = $form.find("input[name='parametroBusca']").val(),
  url = $form.attr("action");

// Send the data using post

var posting = $.post(
  url, {
      parametroBusca: term
  },
  myPostWasSuccessful,
  'html'
  );
 });
});

function myPostWasSuccessful(data, textStatus, jqXHR) {
$("#result").html(data);
}

Minha listagem de usuarios cadastrado:

<div class="panel panel-default">
            <div class="panel-heading">
                <button type="submit" class="btn btn-success" onclick="window.location.href='/funcionarios/formFuncionarios';"> Novo funcionário</button>
                <form id="searchForm" class="navbar-form navbar-right"><input type="text" class="form-control" name="parametroBusca" value="${parametroBusca}" placeholder="Buscar...">

                </form>
            </div>
            <div class="panel-body">
            <input type="hidden" name="funcionario.id" value="${f?.id}" />
                <ul class="list-group">
                    #{list items:funcionarios, as:'f'}
                    <li class="list-group-item">
                        <div class="checkbox" id="result">
                            <label> ${f.nome} </label>
                        <div class="pull-right action-buttons">
                            <a href="@{funcionarios.editarFuncionarios(f.id)}" class="edit"><span class="glyphicon glyphicon-pencil"> Editar</span></a> 
                            <a href="@{funcionarios.removerFuncionarios(f.id)}" class="trash" data-toggle="confirmation" data-btn-ok-label="Sim" data-btn-ok-class="btn-success"  data-btn-cancel-label="Não" data-btn-cancel-class="btn-danger" data-title="Remover funcionário" data-content="Tem certeza que deseja excluir este registro?"><span class="glyphicon glyphicon-trash" > Remover</span></a> 
                            <a href="@{funcionarios.detalhesFuncionarios(f.id)}" class="flag"><span class="glyphicon glyphicon-eye-open"> Detalhes</span></a>
                        </div>
                    </div>
                    </li>
                    #{/list}
                </ul>
            </div>

e minha action de listagem de usuarios:

public static void listagemFuncionarios(String parametroBusca) {
    List<Funcionario> funcionarios = null;
    if (parametroBusca == null) {
        funcionarios = Funcionario.find("status != ?", Status.INATIVO).fetch();         
    } else {
        funcionarios = Funcionario.find("lower(nome) like ? or lower(funcao) like ?", "%" + parametroBusca.toLowerCase() + "%", "%" + parametroBusca.toLowerCase() + "%").fetch();
    }
    render(funcionarios, parametroBusca);
}
6
  • Todos os usuários já aparecem na sua lista? E você está querendo buscar por um usuário especifico?
    – Enio
    14/07/2017 às 21:26
  • todos estao listando normalmente, ai a busca posso listar por um usuario especifico de acordo com o nome dele ou funçao, so que na busca esta com esse bug. No exemplo acima tenho 3 cadastrados onde o terceiro se chama administrador, na busca estou pegando apenas o Diego. 14/07/2017 às 21:54
  • 1
    Por que não utiliza o jQuery DataTable? Ele já faz isso para você. Acho que vai ser uma solução melhor e mais rápida. Da uma olhada nele: datatables.net
    – Enio
    14/07/2017 às 22:05
  • Vlw pela dica @EGDEV, vou tentar implementar agora. 14/07/2017 às 22:24
  • Blz. Qualquer coisa so chamar.
    – Enio
    14/07/2017 às 22:25

1 Resposta 1

0

Você definiu seu ajax (post) dentro do evento submit de seu formulário.

Requisões ajax não submetem o formulario a submissão é feita internamente por um objeto nativo do navegador.

Portanto o certo seria definir uma função fora do escopo do evento submit e que será invocada em um botão do seu formulário e enviar a requisição post para o backend, em seguida tratar a resposta json dentro do callback.

EnviarPost = function(){      
    $.post('/load/mensagens', { user: 'fernando'}, function(mensagens, status){

    }
});

Dê uma olhada nessa documentação jquery :

Em seguida me dê um feedback se funcionou corretamente.

Atualização

Se não utiliza botão pode definir a chamada do ajax (post) quando o usúario apertar a tecla enter de seu teclado dessa forma :

$(document).keypress(function(e) {
    if(e.which == 13){
       //Aqui faz a chamada do ajax 
      EnviarPost();  
    }
});

Quanto ao tratamento de retorno do ajax eu citei json mas pode estrutuar o código por xml,json e até mesmo uma string concatenada e trabalhar no javascript para popular seus resultados dentro do seu form. Json é uma forma bem organizada e simples.

9
  • Obrigado por responder @Rafael, me basiei por este post: stackoverflow.com/questions/30634497/… no caso como ficaria na minha JQ ja que nao uso botao e nem json 14/07/2017 às 20:11
  • Adicionei o botao. No proprio link que me mandou, eh apresentado o exemplo que apliquei em meu codigo 14/07/2017 às 20:12
  • Na vdd tava faltando apenas adicionar o id="result" no local onde quero que apresente o resultado. O problema agora que ele ta sobrepondo sem apagar o que estava ja apresentando anteriormente 14/07/2017 às 20:20
  • No caso pelo que reparei agora lá em cima é java ou seja você renderizando o html de saída. Não é isso?
    – user77310
    14/07/2017 às 20:28
  • Isso mesmo @Rafael 14/07/2017 às 20:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .