E aí, galera!
Tudo bem?
Tô fazendo um projetinho aqui com JSP/Servlets para treinar. Me surgiu um pequeno problema:
Eu tenho minha página lá:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Funcionários</title>
</head>
<body>
<h4>Escolha um funcionário:</h4>
<br />
<select>
<c:forEach var="funcionario" items="${funcionarios}">
<option>${funcionario.nome} (${funcionario.matricula})</option>
</c:forEach>
</select>
<br /><br /><br />
<table>
<tr>
<td>
<label for="textfieldNome">Nome:</label>
</td>
<td>
<input type="text" id="textfieldNome"
value="COLOCAR AQUI O NOME DO FUNCIONÁRIO SELECIONADO!" />
</td>
</tr>
<tr>
<td>
<label for="textfieldStatus">Situação:</label>
</td>
<td>
<input type="text" id="textfieldStatus"
value="COLOCAR AQUI O STATUS DO FUNCIONÁRIO SELECIONADO!" />
</td>
</tr>
</table>
</body>
</html>
Beleza, eu carrego uma lista de funcionários e boa. Agora, eu queria que, a cada vez que eu selecionasse um funcionário nessa combobox, os campos ali abaixo atualizassem com os valores desse funcionário! Alguém tem alguma ideia de como posso fazer?
Valeu, fiquem com Deus!
Você pode criar uma função javascript para setar os input da sua página e chamar essa função no onchange do select dos funcionários.
Espero ter ajudado
Com $.ajax() tudo fica mais fácil!
Com Ajax você pode fazer o seguinte: ao selecionar um funcionário, seria enviando por GET ou POST o ID do mesmo para uma página .jsp, e essa mesma página retornaria os novos valores e atualizaria os inputs, isso tudo sem atualizar a página 
Para saber mais: http://api.jquery.com/jQuery.ajax/
Como o de cima ai disse, vc deveria usar AJAX mesmo. Seja ‘na mão’ ou usando alguma biblioteca.
Na mão, vc criaria um servlet (ou um command/action no seu servlet centralizado) que recebesse como parâmetro o id do funcionario e respondesse com um XML ou JSON tendo as informações do funcionario. No seu Javascript que gerou a requisição AJAX, ao obter a resposta, atualizaria os campos usando DOM.
Acredito que não a necessidade de usar AJAX, já que ele possui os dados dos funcionários na list dele, como ele mostra no código.
Valeu pela ajuda, galera, esclareceu MUITA coisa. Entendi o quê fazer, mas não estou sabendo COMO fazer.
Vocês podem me dar uma ajuda?
Vejam como está meu código atualmente:
<script type="text/javascript">
function valorItem(select) {
$("#comboboxFuncionarios option:selected").each(function() {
alert($(this).val());
});
}
function pesquisarDados(select) {
$('#labelCarregando').show("slow");
$('#tabelaDadosFuncionario').hide();
$.get("/RecursosHumanos/action/PesquisarFuncionarioServlet",
{
"funcionarioID" : $(this).val()
},
function(data) {
alert('retornou!');
if (data == "") {
$('#tabelaDadosFuncionario').hide();
}
else {
$('#tabelaDadosFuncionario').show();
$('#tabelaDadosFuncionario').html(data);
}
}
);
}
$(document).ready(function() {
$('#labelCarregando').css({"font-size":"11px", "font-family":"segoe", "color":"darkblue"});
$('#labelCarregando').hide();
$('#comboboxFuncionarios').change(function() {
pesquisarDados(this);
});
});
</script>
</head>
<body>
<h4>Escolha um funcionário:</h4>
<br />
<select id="comboboxFuncionarios">
<c:forEach var="funcionario" items="${funcionarios}">
<option value="${funcionario.ID}" onclick="pesquisarFuncionario(${funcionario.ID}">${funcionario.nome} (${funcionario.matricula})</option>
</c:forEach>
</select>
<br /><br /><br />
<label id="labelCarregando">Carregando dados, aguarde...</label>
<table id="tabelaDadosFuncionario">
<tr>
<td>
<label for="textfieldNome">Nome:</label>
</td>
<td>
<input type="text" id="textfieldNome" value="${funcionario.nome}" />
</td>
</tr>
<tr>
<td>
<label for="textfieldStatus">Situação:</label>
</td>
<td>
<input type="text" id="textfieldStatus" value="${funcionario.situacao.nome}" />
</td>
</tr>
</table>
</body>
E esta é a minha Servlet:
[code]
package action;
public class PesquisarFuncionarioServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
Long funcionarioID = Long.valueOf(request.getParameter("funcionarioID"));
Connection connection = ConnectionFactory.getInstance().getConnection();
DOFuncionarioDSO doFuncionarioDSO = new DOFuncionarioDSO(connection);
DOFuncionario doFuncionario = doFuncionarioDSO.recuperarFuncionarioPorID(funcionarioID);
request.setAttribute("funcionario", doFuncionario);
}
catch (SQLException errSQL) {
String mensagemErro = "SQL Error: " + errSQL.getMessage();
request.setAttribute("mensagemErro", mensagemErro);
RequestDispatcher dispatcher = request.getRequestDispatcher("/error.jsp");
dispatcher.forward(request, response);
}
catch (Exception err) {
String mensagemErro = "General Error: " + err.getMessage();
request.setAttribute("mensagemErro", mensagemErro);
RequestDispatcher dispatcher = request.getRequestDispatcher("/error.jsp");
dispatcher.forward(request, response);
}
}
}[/code]
Bom, eu seleciono o item, aparece o meu label Carregando… e depois não acontece mais nada!
Podem me ajudar a descobrir o que é??
Abraços!
Bom, nunca usei essa biblioteca de ajax…
Mas vc verificou se está tudo 100% (o JQuery, a biblioteca, o css) configurado na página?
[quote=fernando.camargo]Bom, nunca usei essa biblioteca de ajax…
Mas vc verificou se está tudo 100% (o JQuery, a biblioteca, o css) configurado na página?[/quote]
Oi, Fernando!
Sim, tanto que ele faz todas as funções, bonitinho. Carrega os CSSs que apliquei, troca valor aqui, ali, aparece a mensagem de carregando e depois não executa a ação do AJAX! Esse é o meu “pequeno” problema rs
[quote=Nicolas Fernandes][quote=fernando.camargo]Bom, nunca usei essa biblioteca de ajax…
Mas vc verificou se está tudo 100% (o JQuery, a biblioteca, o css) configurado na página?[/quote]
Oi, Fernando!
Sim, tanto que ele faz todas as funções, bonitinho. Carrega os CSSs que apliquei, troca valor aqui, ali, aparece a mensagem de carregando e depois não executa a ação do AJAX! Esse é o meu “pequeno” problema rs[/quote]
Bom… você tentou usar o debugger do Google Chrome ou o FireBug? Talvez tenha dado algum problema no Javascript mesmo… ou quem sabe a resposta do servlet não é a esperada pela função…
Não olhei bem seu código… você está respondendo em XML ou JSON?
Olhei seu código agora… mas não vi nesse código você configurando a resposta do servlet. E como é um servlet usado assíncronamente, se vc redirecionar a resposta assim, a função ajax vai esperar um XML e vai receber um HTML que sua página JSP vai responder.
Caso esse seja o código completo do seu Servlet, o erro está aí.
[quote=fernando.camargo][quote=Nicolas Fernandes][quote=fernando.camargo]Bom, nunca usei essa biblioteca de ajax…
Mas vc verificou se está tudo 100% (o JQuery, a biblioteca, o css) configurado na página?[/quote]
Oi, Fernando!
Sim, tanto que ele faz todas as funções, bonitinho. Carrega os CSSs que apliquei, troca valor aqui, ali, aparece a mensagem de carregando e depois não executa a ação do AJAX! Esse é o meu “pequeno” problema rs[/quote]
Bom… você tentou usar o debugger do Google Chrome ou o FireBug? Talvez tenha dado algum problema no Javascript mesmo… ou quem sabe a resposta do servlet não é a esperada pela função…
Não olhei bem seu código… você está respondendo em XML ou JSON?[/quote]
That’s the point! Eu não sei como devolver uma resposta para a minha função do jQuery. Se você olhar bem, eu fiz minha consulta e adicionei o valor no objeto request. Mas e depois disso, o que eu devo fazer?
Você não vai mexer com a request, nesse caso. Você vai ter que mexer com a response. Já posto de novo com mais detalhes. Mas, por enquanto, vai procurando se essa biblioteca JQuery que você está usando espera um XML ou um JSON.
O básico para um servlet responder uma requisição AJAX é que ele envie uma resposta do tipo ‘text/xml’ e que envie, na resposta, um cabeçalho orientando o navegador a não armazenar cache.
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
Depois você deve escrever a resposta no formato XML ou JSON da forma que a requisição espera.
Então, pegue o ‘writer’ da response e escreva a string nele, em um dos dois formatos que eu disse.
response.getWriter( ).write("<funcionario><nome>Fernando</nome></funcionario>");
No exemplo acima, usei XML.
response.getWriter( ).write("{\"funcionario\":{\"nome\":\"fernando\"}}");
E no acima usei JSON.
Para não ter que ficar escrevendo a string na mão, recomendo usar DOM4J (no caso de XML) ou json_simple library (no caso de JSON)… você faz programaticamente e no fim dá um toString() passando no método write da response.
Se você quiser aprender um pouco mais sobre AJAX e como usar ele em Java, esse livro é simples, mas fala o necessário. Porém, ele te ensina a fazer AJAX na mão mesmo.
Estou postando o link público do meu dropbox.
http://dl.dropbox.com/u/22997932/Oreilly.Ajax.on.Java.Feb.2007.rar
Fernando, como você faria essa chamada do meu Servlet pelo AJAX com o JQuery? Faria do jeito que eu tô fazendo? Faria diferente?
Bem… não conheço essa biblioteca do JQuery, então não da pra dizer se está tudo certo nesta parte.
Mas achei estranho isso:
<option value="${funcionario.ID}" onclick="pesquisarFuncionario(${funcionario.ID}">
Você não queria que executasse o evento no ‘onchange’? Tenho que ir para a faculdade daqui a pouco, mais tarde olho aqui.
Boa sorte.
