Ativa Javascript com jsp

Boa tarde pessoal,

graças a ajuda do nosso amigo conseguir fazer:

<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”%>
<%@taglib uri=“http://java.sun.com/jsp/jstl/fmt” prefix=“f”%>

Pesquisa #btnHome { position: absolute; left: 5px; top: 5px; width: 390px; height: 46px; z-index: 1; } #Layer1 { position: absolute; left: 5px; top: -40px; width: 91px; height: 23px; z-index: 2; } .style2 { font-size: 17px } #Layer2 { position: absolute; left: 318px; top: -45px; width: 115px; height: 30px; z-index: 2; } #divtable2 { position: absolute; left: 2px; top: 141px; width: 756px; height: 242px; z-index: 1; overflow: auto; } #Layer3 { position: absolute; left: 98px; top: -45px; width: 205px; height: 34px; z-index: 2; }
<div id="fundo">

	<div class="fontlabel" id="LabelPesqCad">
		<div align="center">Pesquisa Pedidos</div>
	</div>

	<form action="/ControlePedidos/PesquisaPedidos" method="post">

		<div id="table">

			<div id="Layer1">
				<span class="lable style2"><strong>CLIENTE:</strong></span>
			</div>

			<div id="Layer2">
				<button class="botao submit" type="submit" name="submit">Pesquisar</button>
			</div>

			<!-- SELECIONAR CLIENTES !-->

			<div id="Layer3">
				<div class="styled-select">
					<div class="campo">
						<select style="width: 200px" name="cmbCliente">
							<option>Selecione..</option>
							<c:forEach var="listCliente" items="${listaClientes}">
								<option value="${listCliente.id}">${listCliente.nome}</option>
							</c:forEach>
						</select>

					</div>
				</div>
			</div>


		</div>

		<!-- TABELA DE PEDIDOS DO CLIENTE SELECIONADO !-->

		<div id="divtable2">

			<table id="t01" width="750" align="center">
				<tr align="center" bgcolor="#F58634">
					<th>Id</th>
					<th>Quantidade Total</th>
					<th>Valor Total</th>
					<th>Data do Pedido</th>
					<th>Nome Cliente</th>
					<th>Detalhes</th>
				</tr>

				<c:forEach var="lista" items="${listaPedidos}">

					<tr>
						<td align="center">${lista.id}</td>
						<td align="center">${lista.quantidadeTotal}</td>
						<f:setLocale value="pt_BR" />
						<td align="center"><f:formatNumber minFractionDigits="2" type="currency">${lista.valorTotal} </f:formatNumber></td>
						<td align="center"><f:formatDate value="${lista.dataPedido.time}" pattern="dd/MM/yyyy" /></td>
						<td align="center">${lista.cliente.nome}</td>
						<td align="center"><a href="javascript:abreDetalhes(${lista.id})"><img src="imagens/iconePesq.jpg" width="18" height="18"></a></td>
					</tr>

				</c:forEach>

			</table>

		</div>

		<!-- DETALHAMENTO DO PEDIDO DO CLIENTE SELECIONADO !-->

		<div id="dialog" title="Detalhes do Pedido">

			<div id="div1"></div>

		</div>

	</form>

	<div id="btnHome">
		<a href="cadastro/menu.jsp"><button class="botao submit" type="reset" name="submit">Home</button></a>
	</div>

` if (acao.contains(“detalhes”)) {

			idCliente = Long.parseLong(request.getParameter("id"));
			
			objPedido = new PedidoEntidade();
			objPedido.setId(idCliente);
			
			listaDetalhada = new ArrayList<ItemPedidoEntidade>();
			
			itemNegocio = new ItemPedidoNegocio();
			listaDetalhada = itemNegocio.detalharPedido(objPedido);
			
			/** RECARREGAR LISTA DE PEDIDOS, LISTA DE CLIENTES e LISTA DETALHADA **/
			request.setAttribute("detalhesPedidos", listaDetalhada);				
			request.setAttribute("listaPedidos", listPedidos);				
			request.setAttribute("listaClientes", listCliente);
			
			html = new StringBuilder();
			
			html.append("<table id=\"t01\" width=\"750\" align=\"center\">").append("\r\n");
			html.append("<tr align=\"center\" bgcolor=\"#F58634\">").append("\r\n");
			html.append("<th>Descrição</th>").append("\r\n");
			html.append("<th>Quantidade</th>").append("\r\n");
			html.append("<th>Valor Total</th>").append("\r\n");
			html.append("</tr>").append("\r\n");

			for (ItemPedidoEntidade itensPedidos : listaDetalhada) {

				html.append("<tr>").append("\r\n");
				html.append("<td align=\"left\">"+ itensPedidos.getProduto().getDescricao() +"</td>").append("\r\n");
				html.append("<td align=\"center\">"+ itensPedidos.getQuantidade() +"</td>").append("\r\n");
				html.append("<td align=\"right\">"+ itensPedidos.getValorTotal() +"</td>").append("\r\n");
				html.append("</tr>").append("\r\n");

			}
			
			html.append("</table>").append("\r\n");
			response.setContentType("text/html");

			response.getWriter().write(html.toString());

			return;`

Para mandar informações para o servidor usando o javascript, você pode utilizar um pequeno código Ajax e passar seu form serializado, ou passar somente os parâmetros manualmente. Ai lá no servidor no seu PesquisaPedidos, você trata suas operações e retorna seus dados em forma de texto. Como é em uma lista que você vai mostrar em sua tabela na pagina HTML… Então você pode retornar essa lista em formato JSON ou XML (acho JSON melhor e mais fácil de tratar depois).
O principio do Ajax é você mandar uma requisição e receber uma resposta do servidor, sem recarrega toda a pagina.
Depois de receber essa lista, é só você escrever ela na sua pagina html com javascript. Usando por exemplo:
document.getElementById(‘localHTML’).innerHTML+=respostaListaServidorAjax;

Você deve aprender a trabalhar com esses formatos JSON ou XML para poder tratar cada item da sua lista.

Rodrigo, o código ajax fica é no jsp?
por que dessa forma que montei, se deixar o autoOpen : true,
ele até aparecer ceritnho, só que aparece na telas anteriores queria que ele fosse chamado apenas na hora do click
vc não teria um exemplo para mostra, para vê se consigo fazer, parece que esta perto aki

Sim, vou colocar um exemplo pra você testar ai. Mas antes vou te explicar melhor:

  • O Ajax é totalmente usado em javascript, indiferente da tecnologia e/ou linguagem de programação que você esteja usando. Nem precisa de uma pagina jsp, apenas html puro. Você escreve o javascript e ele ‘manda’ o Browser (Verifica quais Browsers suportam seu javascript) fazer um solicitação para uma pagina no seu servidor. Nesse caso, vai ser uma pagina servlet. Em java, no seu servlet, você só irá mandar uma resposta em texto/html (pode ser JSON, XML, Imagem, etc…) assim: response.getWriter().write("Texto servlet solicitado");
    Lembrando que o texto que você coloca pode ser de um String em formato JSON, com a lista que você buscou no Banco de Dados.

Sem mais conversa vamos ao exemplo.
Crie uma pagina index.html no seu WebContent, com o seguinte código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 5</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js" ></script>
	</head>
	<body>
		<div class="paginaCompleta" >
			<div class="cabecalho" >
				<input type="text" id="pesquisar" maxlength="100" />
				<button class="botaobusca" id="botaobusca">Pesquisar</button>
			</div>
			<div id="conteudoAjax" >
				<div class="imprimirAjax" id="imprimirAjax" ></div>
			</div>
		</div>
		<style type="text/css">
			.paginaCompleta {
				width: 1200px;
				margin: 5px auto;
				padding-bottom: 10px;
			}
			.cabecalho {
			}
			.cabecalho input {
				font-size: 170%;
				float: left;
				padding: 2px 5px;
			}
			.botaobusca {
				padding: 2px 20px;
				font-size: 200%;
				cursor: pointer;
			}
			#conteudoAjax {
				clear: both;
				margin-top:20px;
				font-size: 150%;
			}
			.imprimir {
				background: #0f0;
				width: 200px;
				padding: 5px;
				margin-left: 10px;
				margin-top: 10px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#botaobusca").click(function(){
					$.ajax({
						type:"GET",
						url:"ClasseServletAjax",
						data: {
							pesquisar:$("#pesquisar").val()
						},
						success: function(respostaServidor){
							$("#imprimirAjax")[0].innerHTML=respostaServidor;
						}
					});
				});
				alert("JavaScript carregado com sucesso!\nPronto para usar Ajax!");
			});
		</script>
	</body>
</html>

Criada a pagina, abre ela no seu navegador, usando o seu servidor de aplicação localmente. Se mostrar a pagina, beleza! Senão teste suas outras paginas e descobre o que esta havendo. No meu caso eu usei o Tomcat 7 e o Google Chrome.
Depois disso, é que vem o seu servlet. Então crie ele como uma classe com o nome ClasseServletAjax. Lembre-se que ele deve estar mapeado ou no seu web.xml ou no caso do código que eu vou postar abaixo, já esta mapeado dentro do Servlet com a anotação @WebServlet("/ClasseServletAjax"). Se fizer com a anotação, não coloque o outro, e vise versa.

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ClasseServletAjax")
public class ClasseServletAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("Text/HTML");
		PrintWriter out=response.getWriter();
		StringBuilder resposta=new StringBuilder();
		try {
		String pesquisar=request.getParameter("pesquisar");
		if(pesquisar!=null){
			if(pesquisar.equals("")){
				resposta.append("Você pesquisou um valor nulo. Por Favor, inseri uma palavra chave para pesquisar.");
			} else if(pesquisar.equals("banana")){
				resposta.append("Você pesquisou por banana!");
			} else if(pesquisar.equals("abacate")){
				resposta.append("Você pesquisou por abacate!");
			} else if(pesquisar.equals("abacaxi")){
				resposta.append("Você pesquisou por abacaxi!");
			} else if(pesquisar.equals("laranja")){
				resposta.append("Você pesquisou por laranja!");
			} else {
				resposta.append("Você deve pesquisar apenas por uma dessas frutas: banana, abacate, abacaxi ou laranja!");
				resposta.append("<br/>");
				resposta.append("Obedeça as letras minusculas e acentuação corretamente!");
			}
		} else {
			resposta.append("Você não inseriu nenhuma palavra para pesquisar!");
		}
		} catch (Exception e) {
			resposta=new StringBuilder();
			resposta.append("Desculpe, ocorreu um erro interno, ao executar o Ajax.");
			resposta.append("<br/>Preencha corretamente o campo e tente novamente!");
		}
		resposta.append("<br/>A resposta acima veio de uma classe Java, através de um servlet que recebeu uma requisição Ajax do JavaScript!");
		out.write(resposta.toString());
	}
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

Depois disso tudo, é só abrir no seu navegador, digitar um palavra chave, clicar em pesquisar, e o Ajax funcionará. Ele vai mandar uma requisição para seu servlet, o servlet processa e retorna um texto que será escrito com javascript, dentro da sua pagina HTML. Lembre-se que você escolhe dentro de qual tag html você quer que seja escrito. Por isso você usa um identificador id na tag.
Pode conferir no código. Se funcionar, repare que eu não coloquei nenhum formulário para ser submetido. Apenas eventos do javascript. Olhe também que a pagina não é carregada novamente.
Detalhe: Eu usei o framework jQuery(Não precisa baixo-lo, pois coloquei o link do seu código fonte.) para fazer o Ajax. Tem uma outra forma com os mesmos princípios usando JavaScript puro, mas eu acho mais complicado de fazer. Mas se você quiser pode estudar pela Ajax w3schools.

Do contrario, se você não for usar Ajax. Então as duas únicas formas de fazer o detalhamento na pagina para ver como ficou, são: Ou você salva no banco de dados e recarrega toda a pagina novamente, ou então, criar outros códigos javascript, que paga os dados do usuário, escreve no html. Depois pega mais quantos dados você quiser, e faz o mesmo. No final, quando não for inserir mais nenhum dado, você submete a pagina para salvar no banco, e novamente torna fazer um carregamento completo da pagina.
Além de ser mais pesado e demorado para a internet de quem estiver usando, se outras pessoas inserir mais dados na mesma lista, o outro só irá ver, quando a pagina for toda carregada. Pois cada solicitação ao servlet, será guardado no banco, e uma nova consulta será feita. Mas isso vai do tipo de seu projeto. No exemplo que dei, é só uma pagina de pesquisa e que nem usa banco de dados.
Se quer ficar bom mesmo nisso, aconselho estudar JavaScript e JSON um pouco mais a fundo.

muito obrigado, vou executar passo a passo seu código para entender,
só tenho uma dúvida sobre a organização do meu código vc viu que no mesmo jsp tem três tabela e uma é
a que quero executar por ultimo que tem a jquery
isso é uma má forma de organiza-lo?

Não é uma má forma não. A ordem que você coloca seus divs, tabelas, parágrafos, formulários, etc… só influenciam unicamente no layout da sua pagina. Mais ai é uma questão que você vê na tela como esta ficando. O que é uma má pratica(inclusive eu fiz no exemplo), é colocar códigos CSS no final da pagina. Como é uma pagina pequena, ninguém vai nota a diferença. Mas suponhamos que é uma pagina GRANDE e que a internet do usuário é lenta. Vai acontecer o seguinte, quando ele abrir seu site, vai carregar todos os textos, imagens, tabelas, tudo do HTML, sem nenhum estilo css, ou seja, ele vai abrir um site todo bagunçado. Faça o teste, abra o youtube com o google chrome, aperta F12 e deleta todas as tags que importam o css externo. Até um site com o layout perfeitamente e cuidadosamente projetado, vai virar o maior dos seus pesados. Claro, depois desse constrangimento, depois que o html for carregado, os estilos também serão. Aí que vai ficar de boa. Mas se demorar 5 segundos(ou até mais dependendo da internet) para carregar o html, o usuário pode facilmente sair do seu site.
Já para JavaScript, essa pratica é ao contrario. Como javascript na maioria das vezes é para executar eventos, e esses eventos só funcionam se clicar, digitar, etc… em um determinado elemento do html, então não faz sentido ter javascript se não tiver(carregado) esses elementos em específicos. Então é melhor tirar o javascript da frente, e carregar o CSS primeiro, o HTML em segundo e só então o javascript.

entendi, vou estudar mais fundo nessas que vc falou e tentar fazer funcionar meu sistema e posto aki
obrigado pela ajudar.