Olá, estou tentando chamar o método do Servlet q carrega uma lista de Profissoes, e mostre na .jsp sem recarregá-la, para isso estou fazendo a requisição por ajax. A requisição esta chegando no Servlet e carregando a lista, eu só não consigo mostrar essa lista. Está mostrando várias linhas em branco. Obg desde já! Abaixo o código:
ABAIXO A RESOLUÇÃO. Tive q baixar a biblioteca org.json
.jsp
Função no script
<script>
function selecionar() {
document.f.nomeProfissao.value = document.querySelector('input[name="lprofissoes"]:checked').value;
document.f.idProfissao.value = document.querySelector('input[name="lprofissoes"]:checked').id;
}
function getProfissao(nome) {
$.ajax({
type: 'POST',
url: 'ListarProfissao',
async: true,
data: {nome:nome},
dataType: 'json',
success: function (data) {
$('#itens').empty();
for(var i = 0, length = data.length; i < length; i++){
var profissao = data[i];
$('#itens').append("<tr>");
$('#itens').append("<td><label>" + profissao.id + "</label></td>");
$('#itens').append("<td><label><input type='radio' name='lprofissoes' value="+profissao.nome+" id="+profissao.id+" /> "+profissao.nome+" </label> </td>");
$('#itens').append("</tr>");
}
$('#modalProfissao').modal('show');
},
error: function (error) {
alert("Erro no ajax " + error);
}
});
}
</script>
Modal com a lista de profissoes
<div class="modal fade" id="modalProfissao" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Profissões Cadastradas</h4>
</div>
<div class="modal-body">
<div class="btn-group btn-group-justified" role="group">
<div class="form-group" role="group">
<input type="hidden" name="op" value="usuario" />
<label for="nome">Nome: </label>
<input type="text" name="nome" id="nome" />
<input type="submit" value="Pesquisar" class="btn btn-twitter" onclick="getProfissao($('#nome').val())">
<table class="table">
<tr>
<th>Nome</th><th>Selecionar</th>
</tr>
<tbody id="itens">
</tbody>
</table>
<div class="${tipoMsg}" role="alert">${mensagemProfissao}</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" data-dismiss="modal" onclick="selecionar()" value="Pronto">
</div>
</div>
</div>
Servlet ListarProfissao
try {
ProfissaoDAOImpl dao = new ProfissaoDAOImpl();
String nome = request.getParameter("nome");
System.out.println("nome digitado: " + nome);
if (nome == null) {
nome = "";
}
response.setContentType("application/json");
PrintWriter out = response.getWriter();
List<Profissao> lista = dao.listarProfissao(nome);
JSONArray jSONArray = new JSONArray();
for (Profissao prof : lista) {
JSONObject jSONObject = new JSONObject();
jSONObject.put("id", prof.getIdProfissao());
jSONObject.put("nome", prof.getNome());
jSONArray.put(jSONObject);
}
out.print(jSONArray);
} catch (Exception e) {
System.out.println("Problemas ao listar ProfissaoCtr. Erro: " + e.getMessage());
e.printStackTrace();
}
Metodo de implementação:
public List<Profissao> listarProfissao(String parametro) throws Exception {
List<Profissao> lista = new ArrayList<Profissao>();
try {
String sql = "select * from profissao where nome_profissao like ? order by nome_profissao";
stmt = this.conn.prepareStatement(sql);
stmt.setString(1, "%"+parametro+"%");
rs = this.stmt.executeQuery();
while (rs.next()) {
Profissao profissao = new Profissao();
profissao.setIdProfissao(rs.getInt("id_profissao"));
profissao.setNome(rs.getString("nome_profissao"));
lista.add(profissao);
}
} catch (Exception e) {
System.out.println("Erro ao listar ProfissaoDAOImpl. Erro: " + e.getMessage());
} finally {
ConnectionFactory.closeConnection(conn, stmt, rs);
}
return lista;
}