Como preencher uma table html depois que a pagina ja foi carregada

Front-end
#1

Olá pessoal,

Eu tenho uma pagina web jsp que contem inicialmente um input text, um button, e uma table, todos são componentes html.
Eu preciso carregar essa table após o usuario informar um valor para o campo e clicar no botão, como sou novo no ambiente web não faço ideia de como fazer tal tarefa, alguém poderia me dar umas dicas e sugestões?

Se fosse em Android ou java swing eu chamaria um metodo adapter passando uma nova lista com os valores para a tabela/lista/combobox e etc, mas em jsp não faço a minima idéia.

Obrigado.

#2

Então, você vai precisar fazer isso usando JavaScript…

Considere estudar jQuery, ele consegue te ajudar com o AJAX, usando o comando $.ajax…

#3

Ok,

estou estudando javascript/ajax/jquery implementei essa função no jquery:

        function procurarContas() {           
            $.ajax({
                type: 'GET',
                url: 'contas_pesquisadas.jsp',
                success: function(data) {  
                        $("#tabela").html(data);  
                }
            });
        }

Só que preciso fazer uma consulta apartir de um valor especifico, ou seja, eu preciso enviar um parametro para que a url ‘contas_pesquisadas.jsp’ retorne apenas as contas desse parametro, um outro problema que percebi é que depois de carregado os registros, se eu dou um F5 todos os meus dados são perdidos, como evitar a perda desses dados carregados, uma outra coisa que eu quero fazer é impedir a iteração do usuário com a página enquanto os dados estão sendo carregados, eu quero que enquanto os dados estejam sendo carregados, seja exibido algo como um progressDialog do android e do java, vocês podem me ajudar?

Grato.

#4

Certo…

Para passar parâmetros, você vai precisar usar o atributo data do $.ajax.

Assim:

$.ajax({
   data: {"nomeDoParametro":"ValorDoParametro"},
   // restante das configurações...
});

Sim, pois o ajax é outra requisição feita depois do carregamento da página. Você tem 2 saídas:
1 - Quando for carregar a tabela inicialmente, coloque os valores que já deveriam vir preenchidos.
2 - Quando a página terminar de carregar, fazer uma requisição AJAX pegando os valores novamente.

Isso é bem legal, mas impedir a interação do usuário é um pouco chato para o usuário… Você pode indicar para ele que o ajax está sendo processado… Ficaria ± assim:
1 - Baixe algum gif animado que você goste que vai ficar se movimentando na tela.
2 - Crie um elemento que vai ter esse gif dentro dele. Mas esse elemento vai ter uma class que vai deixar ele escondido:

<div id="processando" class="escondido">
   <img src="meuGifMaroto.gif" >
</div>

CSS:

.escondido {
   display: none;
}

3 - Quando você for iniciar o ajax, tire a classe escondido e ele vai aparecer, depois, quando terminar, coloque a classe escondido de novo para ele voltar a ficar escondido.

function procurarContas() { 
    // Mostra o gif:
    $('#processando').removeClass('escondido');
    $.ajax({  
        type: 'GET',  
        url: 'contas_pesquisadas.jsp',  
        success: function(data) {    
                $("#tabela").html(data);    
        },
        complete: function() {
             // Quando completar o ajax (não importando se deu erro ou não)
            $('#processando').addClass('escondido'); // Esconde o gif de novo...
       }
    });  
}

Sim.

#5

Muito obrigado pelas dicas Rafael Guerreiro,

Abs.

#6