Spring com jsp e modal

28 de agosto de 2012 9 respostas

Eudesrt 28 de agosto de 2012

Galera sera que alguem pode me ajudar,tenho o seguinte cenário: Tenho a Class Chamado onde tenho idchamado login status titulochamdo Descricaochamado ...... Tenho outra class logs onde tenho idlog idchamado status titulolog descricaolog ....... Essa 2 class funciona assim Tenho um formulario no qual quando passo um o IDCHAMADO ele me carrega o form

@RequestMapping("mostraChamadoLogs")
                public String mostra(int id,Model model){
                               ChamadoDAO dao = new ChamadoDAO();
                               model.addAttribute("chamado",dao.buscaPorId(id));
                               List<Chamado> chamado = dao.buscaLogId(id);
                               model.addAttribute("chamadoLogs ",dao.buscaLogId(id));
                               return "chamados/addLogsChamado";
                              
                }

<html>
<form action="" name="forms">
<label> IDCHAMADO:</label><h3>${chamado.idchamado}</h3>
<br/>
<label> Status:</label><h3>${chamado.status}</h3>
<br/>
<label>titulo</ label >:< h3 >${chamado. titulochamdo
}</ h3>
<br/>
< label >chamado</ label >:< h3>${chamado. descricaochamado
}</ h3>
<table>
                <tr>
                               <td>Status</td>
                               <td>titulo</td>
                               <td>log</td>
                               <td> </td>
                <tr>
                <c:forEach items="${chamadoLogs}" var= "logschamado" varStatus="i">
                               <tr>
                                               <td>${ logschamado.status }</td>
                                               <td>${ logschamado.titulo}</td>
                                               <td>${ logschamado.descricao }</td>
                                               <td><a href="#example" onclick="javascript:buscaLogDetalhado( ${chamado.idLog})">Detalhe</a>
 </td>
                               <tr>     
                </ c:forEach>
<table>
<form>
</html>

Até aqui tudo bem agora venha a duvida no final desse html tem um formulario que carrega um modal na minha pagina segue a baixo.

<html>
<head>
                <!-- Article: http://www.paulrhayes.com/2011-03/css-modal/ -->
                <!-- Demo: http://www.paulrhayes.com/experiments/modal/ -->
                <!-- Originally posted: 17th March 2011 -->
                <meta charset="UTF-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
                <link rel="stylesheet" href="css/experiment-styles.css" type="text/css" media="screen" title="default" />
 
                <link rel="stylesheet" href="css/experiment.css" />                   
                <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="experiment">
<div id="wrapper">
                <aside id="example" class="modal">
                               <div>
                                               <div class="flash">
                                                               <div class="banner">
                                                                              <p><h11>Detalhe do Logs</h11></p>
                                                               </div>
                                               </div>
                                               <br/>
                <table border="0" bordercolor=B2B2B2 style="background-color:#B2B2B2" width="100%" cellpadding="3" cellspacing="2">
                               <tr>
                                               <td><h11>Solicitante</h11></td>
                                               <td><h11>Data / Hora</h11></td>
                                               <td><h11>Status</h11></td>
                               </tr>
                               <tr>
                                               <td bordercolor=E5E5E5 style="background-color:#E5E5E5">${ chamadoLogDetalhe .nomeSolicitante}</td>
                                               <td bordercolor=E5E5E5 style="background-color:#E5E5E5"><fmt:formatDate value ="${log.data.time}" pattern="dd-MM-yyyy hh:mm:ss" /></td>
                                               <td bordercolor=E5E5E5 style="background-color:#E5E5E5">${  chamadoLogDetalhe .staturAcao}</td>
                               </tr>
                </table>
                <br/>
                <table border="0" bordercolor="B2B2B2" style="background-color:#B2B2B2" width="100%" cellpadding="3" cellspacing="2">
                               <tr>
                                               <td><h11>Titulo</h11></td>
                               </tr>
                               <tr>
                                               <td bordercolor=E5E5E5 style="background-color:#E5E5E5">${ chamadoLogDetalhe .tituloLog}</td>
                               </tr>
               
                </table>
                <br/>
                <table border="0" bordercolor="B2B2B2" style="background-color:#B2B2B2" width="100%" cellpadding="3" cellspacing="2">
                               <tr>
                                               <td><h11>Descrição</h11></td>
                               </tr>
                               <tr>
                                               <td bordercolor=E5E5E5 style="background-color:#E5E5E5">
                                               ${ chamadoLogDetalhe.descricao}
                                               </td>
                               </tr>
               
                </table>
                <p style="font-family:verdana,arial,sans-serif;font-size:10px;">ECLIPSE-NET</p>
               
                                               <a href="#close" title="Close">Close</a>
                               </div>
                </aside>
                <aside id="example2" class="modal">
                               <div>
                                               <h2>Another modal box</h2>
                                               
                                               <a href="#close" title="Close">Close</a>
                               </div>
                </aside>
</div>
</body>
</html>

Quando ele eu clico em detalhe eu gostaria que ele carrega-se os detalhe do log referente ao chamado.

Isso tudo está numa unica JSP

comecei a fazer RequestMapping mais tem dado varios erros.

@RequestMapping("mostraDetalheLog")
	public String mostraDetalheLog(int idlog){

		
		ChamadoDAO dao = new ChamadoDAO();
		model.addAttribute("chamadoLogDetalhe",dao.buscaLogId(Id));
		return "chamados/addLogsChamado"; ??????? Aqui ferra tudo!rs
;
	}

Tudo os metodos antes de chegar no @Controller estão ok ...

Será que tenho que usar ajax pra isso ?

9 Respostas

wagnerfrancisco 28 de ago. de 2012

Quais são os erros que estão ocorrendo?

Eudesrt 28 de ago. de 2012

Na verdade não sei como fazer a chamada do detalhe no modal usando spring.

O Modal está na mesma jsp onde ja realizado a chamada dos dados do chamado.

Como faço pra carregar esse modal no Controller ?

wagnerfrancisco 28 de ago. de 2012

Se você quer simplesmente abrir o modal com os dados do log, sem recarregar tudo que está visível, vai ter que recorrer para ajax mesmo. Você faz uma requisição (recomendo usar jquery) pro teu controlador, ele retorna apenas os dados (no formato json, por exemplo). Aí via javascript você vai tornar o modal visível com os dados recebidos.

O controlador pouco muda. Você pode anotar o método com @ResponseBody e, no requestMapping, indicar que ele vai responder com json (se é o que vc quer), basta colocar produces=“application/json”.

Eudesrt 28 de ago. de 2012

Wagner é isso mesmo que preciso! Eu não domino ajax será que vc poderia me dar uma força ou alguma ideia de como fazer ?

Desde já agradeço pela ajuda!Estou a vários dias quebrando a cabeça!

Abraços!

wagnerfrancisco 28 de ago. de 2012

Usando jquery, fazer uma requisição ajax é bem simples. Eis um exemplo do código:

$.ajax({
      url: 'url_de_conexao', //mostraDetalhesLog, por exemplo
      dataType: 'application/json',
      data: dados_para_enviar //aqui tu so precisa passar o id do chamado
   }).success(function(result) {
      // qdo voltar os dados do server, vai cair nesta funcao
      // result vai ser o objeto chamado (em javascript, claro)
   }).error(function() {
      //se der algum problema, cai aqui
   });

O teu controller, ficaria parecido com isto:

@RequestMapping("mostraDetalheLog", produces="application/json")
@ResponseBody //nao vai redirecionar, resposta vai direto deste metodo
public String mostraDetalheLog(int idlog){
   ChamadoDAO dao = new ChamadoDAO();
   Chamado chamado = dao.buscaLogId(Id));
   return chamado; //spring ja vai converter para json... a api jackson tem que estar no path
}

Eudesrt 28 de ago. de 2012

Cara valeu mesmo vou tentar fazer!!! Obrigadão!

Eudesrt 30 de ago. de 2012

wagnerfrancisco:
Usando jquery, fazer uma requisição ajax é bem simples. Eis um exemplo do código:
$.ajax({
      url: 'url_de_conexao', //mostraDetalhesLog, por exemplo
      dataType: 'application/json',
      data: dados_para_enviar //aqui tu so precisa passar o id do chamado
   }).success(function(result) {
      // qdo voltar os dados do server, vai cair nesta funcao
      // result vai ser o objeto chamado (em javascript, claro)
   }).error(function() {
      //se der algum problema, cai aqui
   });
O teu controller, ficaria parecido com isto:

@RequestMapping("mostraDetalheLog", produces="application/json") @ResponseBody //nao vai redirecionar, resposta vai direto deste metodo public String mostraDetalheLog(int idlog){ ChamadoDAO dao = new ChamadoDAO(); Chamado chamado = dao.buscaLogId(Id)); return chamado; //spring ja vai converter para json... a api jackson tem que estar no path }

Qual seria essa Api Jackson ?

Por acaso essa jackson-src-1.8.1.jar serve ?

wagnerfrancisco 1 de set. de 2012

Não, este é o source. Baixe este:

http://repository.codehaus.org/org/codehaus/jackson/jackson-core-asl/1.9.9/jackson-core-asl-1.9.9.jar

Eudesrt 3 de set. de 2012

wagnerfrancisco:
Não, este é o source. Baixe este:
http://repository.codehaus.org/org/codehaus/jackson/jackson-core-asl/1.9.9/jackson-core-asl-1.9.9.jar

Cara eu fiz assim:
Criei o Ajax que envia pro meu Spring o idLog .

<script type="text/javascript ">
	function recebeLogs(idlog){
		$.get("mostraDetalheLog?idlog=" + idlog,function(dadosRecebidos){
			$('#modaldiv').html(dadosRecebidos);  // div a qual ele deveria receber os dado do spring .
		});
	}
</script>

Meu controller

@RequestMapping("mostraDetalheLog")
	public String mostraDetalheLog(int idlog,HttpServletResponse response,Model model){
	
		System.out.println("Entrei no DETALHE");
		System.out.println(idlog + " ID LOGS");
		ChamadoDAO dao = new ChamadoDAO();
		model.addAttribute("log",dao.buscaPorIdLog(idlog));
			
		return "view" ;

	}

Até aqui parece funcionar o RequestMapping está recebendo o id corretamente mais quando necessito exibir os dados que ele retorna aqui ele simplesmente não mostra nada no formulário.
Segue os detalhes da div o spring deveria retornar os dados.

<div id="modaldiv">
	<html>
	<head>
		<!-- Article: http://www.paulrhayes.com/2011-03/css-modal/ -->
		<!-- Demo: http://www.paulrhayes.com/experiments/modal/ -->
		<!-- Originally posted: 17th March 2011 -->
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link rel="stylesheet" href="css/experiment-styles.css" type="text/css" media="screen" title="default" />
	
		<link rel="stylesheet" href="css/experiment.css" />		
		<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	</head>
	<body class="experiment">
	<div id="wrapper">
		<div id="example" class="modal" name="example">
			<div>
				<div class="flash">
					<div class="banner">
						<p><h11>Detalhe do Logs</h11></p>
					</div>
				</div>
				<br/>
		<table border="0" bordercolor=B2B2B2 style="background-color:#B2B2B2" width="100%" cellpadding="3" cellspacing="2">
			<tr>
				<td><h11>Solicitante</h11></td>
				<td><h11>Data / Hora</h11></td>
				<td><h11>Status</h11></td>
			</tr>
			<tr>
				<td bordercolor=E5E5E5 style="background-color:#E5E5E5">${log.nomeSolicitante}</td>
				<td bordercolor=E5E5E5 style="background-color:#E5E5E5"><fmt:formatDate value ="${log.data.time}" pattern="dd-MM-yyyy hh:mm:ss" /></td>
				<td bordercolor=E5E5E5 style="background-color:#E5E5E5">${log.staturAcao}</td>
			</tr>
		</table>
		<br/>
		<table border="0" bordercolor="B2B2B2" style="background-color:#B2B2B2" width="100%" cellpadding="3" cellspacing="2">
			<tr>
				<td><h11>Titulo</h11></td>
			</tr>
			<tr>
				<td bordercolor=E5E5E5 style="background-color:#E5E5E5">${log.tituloLog}</td>
			</tr>
		
		</table>
		<br/>
		<table border="0" bordercolor="B2B2B2" style="background-color:#B2B2B2" width="100%" cellpadding="3" cellspacing="2">
			<tr>
				<td><h11>Descrição</h11></td>
			</tr>
			<tr>
				<td bordercolor=E5E5E5 style="background-color:#E5E5E5">
				${log.descricao}
				</td>
			</tr>
		
		</table>
		<p style="font-family:verdana,arial,sans-serif;font-size:10px;">ECLIPSE-NET</p>
		
				<a href="#close" title="Close">Close</a>
			</div>
		</div>
	</div>
	</body>
	</html>
</div>

Criado 28 de agosto de 2012

Ultima resposta 3 de set. de 2012

Respostas 9

Participantes 2

9 Respostas

Topicos relacionados