[RESOLVIDO]Metodo onclick gerado automaticamente pelo JSP não funciona

3 respostas
J

Galera é o seguinte, fiz uma página em jsp para retornar dados do MySql e montar a página de acordo. Porém, eu precisei imbutir métodos onclicks que não estão funcionando, eu gostaria de entender o motivo e gostaria da ajuda de vocês.

Pra evitar uma página gigante, vou colocar apenas a parte do código importante

<%@page language="java" import="meusBeans.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            #infCarro{
                width:600px;
                height:auto;
                margin-bottom:5px;
                margin-top:5px;
                margin-left:5px;
                margin-right:5px;
                text-align:left;
                background-color: #FFF;
            }
            #abrangeFotoPequena{
                width:600px;
                height:154px;
                text-align: center;
                overflow-x: scroll;
            }
            #obsCarro{
                width:600px;
                height:auto;
            }
        </style>
        <script>
            function mostraFotoGrande(foto, name){
                document.getElementById("fotoCarro"+name).innerHTML = "<img src='imgs/veiculos/" + foto + "' />";
            }
            function desclicarLink(id){
                document.getElementById("a" + id).style.color = "#FFF";
            }
            function clicarLink(id){
                document.getElementById("a" + id).style.color = "#F00";
            }
            function limpaCamposForm(){
                document.getElementById("nome").value = "";
                document.getElementById("email").value = "";
                document.getElementById("mensagem").value = "";
            }
        </script>
    </head>
    <body>
                    <%
                        ConnectDB veic = new ConnectDB();
                        veic.conectaBD();
                        String[][] carro = veic.getDadosVeiculos();
                        out.print("<br/><br/>");
                        for (int i = 0; i < carro.length; i++) {
                            String[] fotos = veic.getFotosVeiculo(carro[i][0].toString());

                            out.print("<br/>");
                            out.print("<div id='infCarro'>");%>
                            
                    <div id="fotoCarro<%=i%>" style="width:600px; height:auto; text-align:center"></div>
                    <%
                        out.print("<div id='abrangeFotoPequena'>");
                        for (int j = 0; j < fotos.length; j++) {
                    %>
                    
                    <img src="imgs/veiculos/<%= fotos[j]%>" onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>" width="150px" height="100px" style="margin:5px"/>
                    <%}
                            out.print("</div>");
                            out.print("<div id='obsCarro'><br/>");
                            out.print("Final da placa: " + carro[i][0] + "<br/>");
                            out.print("Cor: " + carro[i][1] + "<br/>");
                            out.print("Modelo: " + carro[i][2] + "<br/>");
                            out.print("Ano: " + carro[i][3] + "<br/>");
                            out.print("Características: " + carro[i][4]);
                            out.print("</div>");
                            out.print("</div>");
                        }
                        veic.desconectaBD();
                    %>
                    <br/><br/>                        
                </div></div>
    </body>
</html>

Bem simples, no banco de dados eu retorno um vetor com as informações de um carro, e depois outro vetor com os nomes das fotos daquele carro. Eu exibo as informações e todas as fotos de cada carro separadamente em miniatura, e gostaria que ao clicar na foto miniatura, exibisse a foto em tamanho real.

Porém, como posso ter N carros, pra exibir as fotos em tamanho real eu precisaria de uma div pra cada carro, então eu crio divs automaticamente e dou um id a elas. Nas fotos miniatura eu chamo o método onclick, jogando um na div criada automaticamente. Porém não está funcionando, eu gostaria de saber onde está o erro, e se não for possível programar dessa maneira, um jeito alternativo. Aguardo a ajuda de vocês.

3 Respostas

DaniloAndrade

Boa noite!

ao invés de fazer isso:

onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>"

porque vc não usa function que vc já criou

function mostraFotoGrande(foto, name){  
                document.getElementById("fotoCarro"+name).innerHTML = "<img src='imgs/veiculos/" + foto + "' />";  
            }
onclick="mostraFotoGrande('<%=i%>', '<%= fotos[j]%>');"

acho que vc tá começando no java web né?

aconselho vc a estudar essa apostila http://www.caelum.com.br/download/caelum-java-web-fj21.pdf

vai te ajudar muito

Bruno_Cunha

Olá.

Eu creio que não funciona devido a má construção desse comando JavaScript:

onclick="document.getElementById('fotoCarro<%=i%>').innerHTML = <img src='imgs/veiculos/<%= fotos[j]%>'/>"

O conteúdo a ser colocado na innerHTML deve ser do tipo String, então deveria estar entre aspas.

Faça o que o Danilo falou e deixe essa lógica ser executada na função…

Mais uma dica: use as ferramentas de desenvolvedor que os navegadores atuais possuem (como por exemplo, o F12 ou Ctrl+Shift+I no Chrome).
Normalmente você consegue pegar bastante erros desse tipo por lá…

Valeu.

J

Realmente estou começando, erro de iniciante. Obrigado por me ajudarem, finalmente funcionou.

Vlw galera, nem sei como agradecer!

Criado 22 de dezembro de 2012
Ultima resposta 23 de dez. de 2012
Respostas 3
Participantes 3