Como usar Javascript dentro de tag JSP?

23 de março de 2012 7 respostas

jMarcel 23 de março de 2012

Pessoal,

Crio relatórios usando tabelas HTML, com dados vindos do SQLServer através de conexão ao BD com JSP.

Quero, ao passar o mouse pelas linhas de uma tabela, criar um efeito de que a linha está selecionada (a cor muda).

A estrutura é parecido com o cód. abaixo (a linha 47 é que não funciona):

[parte do código omitido...]
<%response.setHeader("Cache-Control","no-cache");%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<%
session.setAttribute("JDBC", "jdbc:sqlserver://myServer;instanceName=myInstance;database=myDB;user=myUser;password=myPSW");
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
Connection cn = DriverManager.getConnection(session.getAttribute("JDBC").toString());
String   Chave = (request.getParameter("Chave")==null?"000":request.getParameter("Chave"));
String   Ordem = (request.getParameter("Ordem")==null?"105":request.getParameter("Ordem"));
String     DtRef = (request.getParameter("DtRef")==null?"20010101":request.getParameter("DtRef"));
PreparedStatement db = cn.prepareStatement("{call myDB.dbo.chamaStoredProcedure(?,?,?)}");
db.setInt(1, Integer.parseInt(Chave.toString()));
db.setInt(2, Integer.parseInt(Ordem.toString()));
db.setString(3, DtRef.toString());
ResultSet       rs =  db.executeQuery();
String       Titulo = "titulo do relatorio";
String            th = "";
String            T1 = "";
String            T2 = "";
String            T3 = "";
String            T4 = "";
String          HTML = "";
String         LinkH = "nomeLink.jsp?Chave=" + Chave.toString() + "&DtRef=" + DtRef.toString() + "&Ordem=" ;

while(rs.next())
{
T1 = rs.getString("T1");
T2 = rs.getString("T2");
T3 = rs.getString("T3");
T4 = rs.getString("T4");

th = "<TR>"

+ "<TH ROWSPAN=2 WIDTH=2% ><A STYLE='color: white;' HREF='" + LinkH + (Integer.parseInt(Ordem.toString())==1?"101":"1") + "'><FONT SIZE=1><i>#</A></TH>"
+ "<TH COLSPAN=2 WIDTH=40% >TITULO 1</TH>"
+ "<TH COLSPAN=1 WIDTH=30% >TITULO 2</TH>"

+ "</TR>"
+ "<TR>"
+ "<TH WIDTH=10% ><A STYLE='color: white;' HREF='" + LinkH + (Integer.parseInt(Ordem.toString())==2?"102":"2") + "'>subTITULO 1</A></TH>"
+ "<TH WIDTH=30% ALIGN=CENTER><A STYLE='color: white;' HREF='" + LinkH + (Integer.parseInt(Ordem.toString())==3?"103":"3") + "'>subTITULO 2</A></TH>"
+ "<TH WIDTH=12% ><A STYLE='color: white;' HREF='" + LinkH + (Integer.parseInt(Ordem.toString())==5?"105":"5") + "'>subTITULO 3</A></TH>"
+ "</TR>";

HTML += "<TR style=\"cursor:default\" onMouseOver=\"javascript:this.style.backgroundColor='yellow'\" onMouseOut=\"javascript:this.style.backgroundColor=''\""      //A partir do 'yellow' vira comment.
+  "<TH ALIGN=CENTER ><font size=1><i>" + rs.getString("C0") + "</TH>"
+  "<TD ALIGN=CENTER CLASS=Lider>" + rs.getString("C1") + "</TD>"
+  "<TD ALIGN=LEFT   CLASS=Lider>" + rs.getString("C2") + "</TD>"			    
+  "<TD ALIGN=RIGHT CLASS=Lider>" + rs.getString("C3") + "</TD>"
+  "</TR>";
}
rs.close();
db.close();
cn.close();
%>

// parte HTML: irrelevante nesse assunto. Mas, a pedidos...

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" ></SCRIPT>
<LINK HREF="/path/file.css" TYPE=text/css REL=stylesheet>
<STYLE>
INPUT
{width: 100%;}
A
{color: darkblue;}
TABLE
{background-color: #ffffff;
border-color: #000000;
border-style: solid;
border-left-width: 2;
border-top-width: 2;
border-bottom-width: 2;
border-right-width: 2;}
TH
{background-color: #999999;
border-color: #ffffff;
border-style: solid;
border-left-width: 0;
border-top-width: 1;
border-bottom-width: 0;
border-right-width: 1;
color: #ffffff;
font-family: tahoma;
font-size: 11;
height: 25;}
TD
{background-color: #ededed;
border-color: #ffffff;
border-style: solid;
border-left-width: 0;
border-top-width: 0;
border-bottom-width: 1;
border-right-width: 1;
color: #darkblue;
font-family: tahoma;
font-size: 11;
height: 25;}
.Lider
{background-color: #ededed;
border-top-color: #000000;
border-style: solid;
border-left-width: 0;
border-top-width: 2;
border-bottom-width: 1;
border-right-width: 1;
color: #darkblue;
font-family: tahoma;
font-size: 11;
font-weight: normal;
height: 25;}
.TDF
{background-color: #ffffff;
border-color: #ffffff;
border-style: solid;
border-left-width: 0;
border-top-width: 0;
border-bottom-width: 1;
border-right-width: 1;
color: #darkblue;
font-family: tahoma;
font-size: 11;
height: 25;}
INPUT
{background-color: #ededed;
border-color: #ffffff;
border-style: solid;
border-left-width: 1;
border-top-width: 0;
border-bottom-width: 1;
border-right-width: 1;
color: darkblue;
font-family: tahoma;
font-size: 11;
height: 25;}
.Tit
{background-color: #ffffff;
border-color: #ffffff;
border-style: none;
color: black;
font-family: arial;
font-size: 16;
font-weight: bold;
height: 25;}
.Tot
{background-color: #dadada;
border-top-color: darkgray;
border-bottom-color: #000000;
border-left-color: #ffffff;
border-right-color: #ffffff;
border-style: solid;
border-left-width: 1;
border-top-width: 2;
border-bottom-width: 2;
border-right-width: 1;
color: #000000;
font-family: tahoma;
font-size: 11;
font-weight: normal;
height: 25;}
.Totblue
{background-color: #dadada;
border-top-color: darkgray;
border-bottom-color: #000000;
border-left-color: #ffffff;
border-right-color: #ffffff;
border-style: solid;
border-left-width: 1;
border-top-width: 2;
border-bottom-width: 2;
border-right-width: 1;
color: darkblue;
font-family: tahoma;
font-size: 11;
font-weight: bold;
height: 25;}
</STYLE>
<HTML>
<HEAD>
<link rel="icon" type="image/png" href="http://path/favicon.png">
<link rel="shortcut icon" href="http://path/favicon.png">
</HEAD>
<TITLE>titulo do relatorio</TITLE>
<BODY LEFTMARGIN=0 RIGHTMARGIN=0 TOPMARGIN=0 BOTTOMMARGIN=0
MARGINHEIGHT=0 MARGINWIDTH=0 STYLE="margin-left: 10;margin-top: 0;">
<BR>
<SPAN CLASS="migalha" STYLE="font-weight: normal;">Voc&ecirc; est&aacute; aqui: Seu trabalho >
<A HREF="/path/index.jsp" CLASS="migalha" TARGET="corpo">nome da empresa</A>
>nome do relatorio</SPAN>
<BR><BR>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=97% STYLE="border-style: none;">
<TR>

<TD ALIGN=LEFT WIDTH=60% CLASS="Tit" VALIGN=TOP><%=Titulo.toString()%><BR><BR><%=T1.toString()%></TD><BR>
<TD ALIGN=RIGHT WIDTH=40% CLASS="Tit" VALIGN=TOP>Atualizado em:&nbsp;<%=T4.toString()%><BR><BR>Posição: <%=T2.toString()%><BR><WIDTH=20%>Outros Meses: 
<A HREF="#" ONMOUSEOVER="this.T_TEMP=5000;this.T_WIDTH=110;this.T_SHADOWWIDTH=5;this.T_STICKY=1;
this.T_TITLE='Datas disponíveis';this.T_OFFSETX=50;return escape(Ch_DtRef());">Aqui</A>    
</TD>
</TR>
</TABLE>
</TABLE>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=97% STYLE="border-style: none;">
<%=th.toString()%>
<%=HTML.toString()%>
<TR>
<TD CLASS=TDF>&nbsp;</TD>
<TD CLASS=TDF>&nbsp;</TD>
<TD CLASS=TDF>&nbsp;</TD>
<TD CLASS=TDF>&nbsp;</TD>
<TD CLASS=TDF>&nbsp;</TD>
<TD CLASS=TDF>&nbsp;</TD>   
<TD CLASS=TDF ALIGN=RIGHT><H5>Fonte:&nbsp;nome da fonte</H></TD>
</TR>
</TABLE>
<br>
</FORM>
</BODY>
</HTML>

<SCRIPT>
function Ch_DtRef()
{var lnk="nameLink.jsp?Chave=<%=Chave.toString()%>&DtRef=";
var ret="<A HREF='javascript: location.replace(\"" + lnk + "20120101\");'>JAN /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120201\");'>FEV /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120301\");'>MAR /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120401\");'>ABR /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120501\");'>MAI /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120601\");'>JUN /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120701\");'>JUL /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120801\");'>AGO /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20120901\");'>SET /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20121001\");'>OUT /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20121101\");'>NOV /2012</A><BR>"
+"<A HREF='javascript: location.replace(\"" + lnk + "20121201\");'>DEZ /2012</A><BR>"
return (ret);
}

</SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="/path/do/js/scripts/wz_tooltip.js"></SCRIPT>

Porém não está funcionando.

Alguém pode me ajudar ?

7 Respostas

jaboot 23 de mar. de 2012

É só isso o código? Você diz que não está funcionando, mas o que acontece?

Você está printando a variável HTML no final do seu arquivo?

jMarcel 23 de mar. de 2012

jaboot:
É só isso o código? Você diz que não está funcionando, mas o que acontece?
Você está printando a variável HTML no final do seu arquivo?

Não é só isso o código. Coloquei apenas a parte relevante ao assunto.
Está funcionando, mas não está interpretando o javascript.

Eu trago os dados do resultSet e monto uma tabela dinâmica em html.

O que eu quero fazer é um efeito semelhante ao código abaixo (mas não tá funcionando no jsp. Creio que estou carregando na tag errada):

<html>
<head>
<title>.:: C&oacute;digo Fonte ::.</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="50%" border="1" cellspacing="0" cellpadding="0" align="center">
<tr> 
<td height="103"> 
<div align="center"><font color="#0000CC">Passe o mouse sobre as linhas para ver o resultado!</font></div>
</td>
</tr>
<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#C0B085'" onMouseOut="javascript:this.style.backgroundColor=''"> 
<td height="5"><div align="center">Linha 01 da tabela</div></td>
</tr>
<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#C0B085'" onMouseOut="javascript:this.style.backgroundColor=''"> 
<td height="2"><div align="center">Linha 02 da tabela</div></td>
</tr>
<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#C0B085'" onMouseOut="javascript:this.style.backgroundColor=''"> 
<td height="2"><div align="center">Linha 03 da tabela</div></td>
</tr>
<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#C0B085'" onMouseOut="javascript:this.style.backgroundColor=''"> 
<td height="2"><div align="center">Linha 04 da tabela</div></td>
</tr>
<tr style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#C0B085'" onMouseOut="javascript:this.style.backgroundColor=''"> 
<td height="2"><div align="center">Linha 05 da tabela</div></td>
</tr>
<tr> 
<td height="82"> 
<div align="center"><font size="1"><a href="http://www.codigofonte.com.br">www.codigofonte.com.br</a></font></div>
</td>
</tr>
</table>
</body>
</html>

gomesrod 23 de mar. de 2012

Olá,

Utilize a função “Visualizar código fonte” do browser para ver o HTML final que foi gerado. Dessa maneira fica muito mais fácil identificar o erro.
(O que estou vendo de cara são algumas aspas faltando, mas pode ter mais coisas)

E mais uma dica: não é necessário usar javascript para criar esse efeito, apenas com CSS dá para definir estilos diferenciados para quando passa o mouse em cima.

HenriqueBR 23 de mar. de 2012

O erro está na chamada do evento, OnMouseOver é onMouseOver e na concatenação da String.

Dá uma olhada na String correta, fazer concatenação com o uso de caracteres de escape fica mais fácil.

String HTML = "<TR style=\"cursor:default\" onMouseOver=\"javascript:this.style.backgroundColor='yellow'\" onMouseOut=\"javascript:this.style.backgroundColor=''\""
                + "<TH ALIGN=CENTER ></TH>"
                + "<TD ALIGN=CENTER ></TD>"
                + "<TD ALIGN=CENTER ></TD>"
                + "</TR>";

jMarcel 26 de mar. de 2012

HenriqueBR:
O erro está na chamada do evento, OnMouseOver é onMouseOver e na concatenação da String.

Dá uma olhada na String correta, fazer concatenação com o uso de caracteres de escape fica mais fácil.

String HTML = "<TR style=\"cursor:default\" onMouseOver=\"javascript:this.style.backgroundColor='yellow'\" onMouseOut=\"javascript:this.style.backgroundColor=''\"" + "<TH ALIGN=CENTER ></TH>" + "<TD ALIGN=CENTER ></TD>" + "<TD ALIGN=CENTER ></TD>" + "</TR>";

Oi HenriqueBR.

Fiz a ‘tradução’ do html p/ dentro da parte jsp conforme acima, porém não funcionou.
Eu reformulei o enunciado do problema e gostaria que desse uma olhada na linha 47, se possível.

Corrija-me se eu estiver errado: creio que o engine JSP não entende (compila) Javascript. Ele só devolve na variável HTML para ser interpretado pelo browser. Então o javascript, nesse caso, não precisa ser case-sensitive.

Testei c/ e s/ case-sensitive no HTML (cód. de exemplo) e funciona; mas dentro do JSP não funciona de qq jeito.

Deve ser um detalhe mínimo. O que será ?

jMarcel 26 de mar. de 2012

jaboot:
É só isso o código? Você diz que não está funcionando, mas o que acontece?

Você está printando a variável HTML no final do seu arquivo?

Reformulei o enunciado e coloquei o cód.fonte inteiro. Se possível, veja se vc sabe resolver.

jMarcel 26 de mar. de 2012

gomesrod:
Olá,

Utilize a função “Visualizar código fonte” do browser para ver o HTML final que foi gerado. Dessa maneira fica muito mais fácil identificar o erro.
(O que estou vendo de cara são algumas aspas faltando, mas pode ter mais coisas)

E mais uma dica: não é necessário usar javascript para criar esse efeito, apenas com CSS dá para definir estilos diferenciados para quando passa o mouse em cima.

gomesrod, sabe onde posso obter um exemplo de CCS com esse efeito definido ?
Aproveito p/ informar: reformulei o enunciado e coloquei o cód. fonte completo. Veja se vc pode me ajudar.

Criado 23 de março de 2012

Ultima resposta 26 de mar. de 2012

Respostas 7

Participantes 4

7 Respostas

Topicos relacionados