How to perform form search using ajax?

Question

How to perform form search using ajax?

Navigation

#1 by (0 votes)

1

I'm implementing a web application and I already have the full CRUD and search implementation. But I want to use ajax to make the system more efficient and implement the search of registers in the bank using ajax. I started implementing but it is not running with ajax, when doing the search the result is overlapping what was already listed, as you can see below. What is wrong or missing so that ajax can do this search on my system correctly.

MyJQ:

$(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);
}

My registered user list:

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

and my user list action:

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);
}

java jquery

asked by anonymous 14.07.2017 / 21:06

1 answer

C # pagemethod autocomplete Materialize error Database connection error

score 0 · Answer 1

You have defined your ajax ( post ) within the submit event of your form.

Ajax requests do not submit the form the submission is done internally by a native browser object .

So it would be okay to define a function outside the scope of the submit event and it will be invoked in a button on your form and send the post request to the backend, then treat the json response inside the callback.

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

    }
});

Take a look at this documentation jquery:

Then give me feedback if it worked correctly.

Update

If you do not use the button, you can define the ajax (post) call when the user presses the enter key on his keyboard like this:

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

As for the ajax return handler I quoted json but you can structure the code by xml, json and even a concatenated string and work in javascript to populate your results within your form. Json is a well organized and simple way.