[RESOLVIDO!] Problema com DWR

Olá pessoal, estou com um probleminha aqui, que esta dificil para mim conseguir resolver, o problema é que tenho 2 comboBox, o primeiro é o de Estados e o segundo de cidades, inicialmente somente o combo de estados vem preenchido, o combo de cidades será preenchido assim que for selecionado um estado, eu tenho um método que retorna um List com as cidades filtradas já, o problema é, como eu acesso esse método via javascript, pq eu precisarei percorrer esse List e ir adicionando no comboBox, ja andei dando uma pesquisada e encontrei o DWR, mais não esta funcionando já fucei aqui, tentei descobrir o pq, mais sem súcesso, vou postar aqui o que eu já fiz.

Uma das minhas dúvidas é como eu passo parametro para para o metodo java dentro do javascript usando o DWR, bom abaixo vou colocar como eu estou fazendo.

O javaScript

            function carregaCidades(){
                Metodos.getListCidades(montaCombo);
            }
            
            function montaCombo(listBeans){
                DWRUtil.removeAllOptions("cbCidades");
                DWRUtil.addOptions("cbCidades", listBeans, cidCodigo, cidDescricao);
            }

O metodo que retorna o List

     public static List<Estados> getListEstados(){
         Session sessao = HibernateUtil.getSessionFactory().openSession();
         sessao.beginTransaction();
         String hql = "from Estados order by estUf";
         return (List<Estados>) ManipularHQL.executeHQLQuery(hql, sessao);
     }

     public static List<Cidades> getListCidades(){
        Session sessao = HibernateUtil.getSessionFactory().openSession();
        sessao.beginTransaction();
        String hql = "from Cidades order by cidDescricao";
        return (List<Cidades>) ManipularHQL.executeHQLQuery(hql, sessao);
    }

Meu JSP

                <div id="txtEstado">
                    <select name="cbEstado" onchange="carregaCidades()">
                        <%
                        list = Metodos.getListEstados();
                        Estados est;
                        for (Object obj : list){
                            est = (Estados)obj;
                            out.println("<option value=" + est.getEstUf() + ">" + est.getEstDescricao() + "</option>");
                        }
                      %> 
                    </select>
                </div>    
  
                <div id="txtCidade">
                    <select id="cbCidades" name="cbCidades" >
                    </select>
                </div>

Alguém?

Você sabe dizer qual erro que está acontecendo? Já deu uma olhada no console de javascript?

Lembrando que o DWR vai converter a sua classe Java em um arquivo Javascript, então pode ser que o uso das classes do Hibernate na sua classe do DWR pode estar dando algum problema, talvez esteja faltando algum converter.

Eu sugiro a você, fazer alguns testes mais simples.
Tipo, cria primeiro um método na classe DWR que retorna só uma String e vê se funciona.
Assim fica mais fácil de encontrar o problema.

Desculpa minha ignorancia, mais como eu acesso esse console do javascript? vai me quebrar um galhão isso, mas se for o console exibido por padrao pelo netbeans, acho que não esta dando nenhúm erro, vou dar uma analisada melhor aqui.

Nada cara, ninguém nasce sabendo :slight_smile:

O console javascript fica no browser.
Se você estiver usando Firefox ou Chrome, é só usar o atalho Ctrl + Shift + J ou procurar por Console de erros/Console Javascript pelo menu.

Nossa cara valeu mesmo, esse console de erro vai me ajuda, até então eu estava no escuro, não sabia qdo dava problema no JS, olhei no console e deu esse erro abaixo, parece que ele não esta encontrando minha classe transformada em JS, mas ela está declara e quando eu entro em http://localhost:8084/SiteClass/dwr aparece essa minha classe.

Erro: You must include DWR engine before including this file Arquivo-fonte: http://localhost:8084/SiteClass/dwr/interface/Metodos.js

Você declarou o engine do DWR na JSP? (Conforme esse link indica)

Algo desse tipo:

<script src='/SiteClass/dwr/engine.js'></script>

sim declarei, não sei pq não estava enxergando, como eu disse se eu acessar http://localhost:8084/SiteClass/dwr/interface/Metodos.js eu consigo ver o conteudo do JS, bom, como eu conseguir ver o conteudo, peguei esse conteudo e criei um arquivo de JS e coloquei na raiz do projeto, dessa forma eliminou o problema que citei acima, mas, agora quando eu tento usar um método do dentro do arquivo Metodos.js, dá uma mensagem de erro dizendo que não foi possivel localizar o comando.

Mensagem de erro

Erro: Metodos is not defined Arquivo-fonte: http://localhost:8084/SiteClass/cadCliente.jsp Linha: 277

Local do erro:

            function carregaCidades(){
                Metodos.getListCidades(montaCombo);//o erro ocorre aqui
            }

            function montaCombo(listBeans){
                DWRUtil.removeAllOptions("comboCidades");
                DWRUtil.addOptions("comboCidades", listBeans, cidCodigo, cidDescricao);
            }

Hm… você pode mostrar o código da sua JSP?

É meio extenso mas ta ae

<%-- 
    Document   : index
    Created on : 02/09/2011, 09:51:29
    Author     : caltech
--%>

<%@page import="outros.Metodos"%>
<%@page import="hibernate.entity.Estados"%>
<%@page import="hibernate.entity.VisualClass"%>
<%@page import="hibernate.entity.Cidades"%>
<%@page import="java.util.List"%>
<%@page import="outros.Conexao"%>
<%@page import="java.sql.ResultSet"%>
<%@page contentType="text/html"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<%@page pageEncoding="UTF-8"%> 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Tela Cadastro</title>
        
        <style type='text/css'>
            body{
                 margin:0;
                 padding:0;
                 background-image:url(images/mini-barra.png);
                 background-repeat:repeat-x;
                 background-position:center top;
                 text-align:center;
            }
            #tudo{
                 width:1024px;
                 height:400px;
/*                 background-color: #e7e7e7;*/
                 margin-right:auto;
                 margin-left:auto;
                 text-align:left;
            }
            #lCodigo{
                 position: absolute;
                 margin-top: 0px;
                 margin-left: 2px;
            }
            #txtCodigo{
                 position: absolute;
                 margin-top: 0px;
                 margin-left: 75px;
            }
            
            #lPessoa{
                 position: absolute;
                 margin-top: 0px;
                 margin-left: 760px;
            }
            
            #rFisica{
                 position: absolute;
                 margin-top: 0px;
                 margin-left: 864px;
            }
            
            #rJuridica{
                 position: absolute;
                 margin-top: 20px;
                 margin-left: 864px;
            }
            
            #lVC{
                 position: absolute;
                 margin-top: 30px;
                 margin-left: 0px;
            }
            #txtVC{
                 position: absolute;
                 margin-top: 30px;
                 margin-left: 75px;
            }
            
            #lNome{
                 position: absolute;
                 margin-top: 60px;
                 margin-left: 2px;
            }
            #txtNome{
                 position: absolute;
                 margin-top: 60px;
                 margin-left: 75px;
            }
            #lCpf{
                 position: absolute;
                 margin-top: 60px;
                 margin-left: 565px;
            }
            #txtCpf{
                 position: absolute;
                 margin-top: 60px;
                 margin-left: 610px;
            }
            
            #lRg{
                 position: absolute;
                 margin-top: 60px;
                 margin-left: 775px;
            }
            #txtRg{
                 position: absolute;
                 margin-top: 60px;
                 margin-left: 803px;
            }
            
            #lEndereco{
                 position: absolute;
                 margin-top: 120px;
                 margin-left: 2px;
            }
            #txtEndereco{
                 position: absolute;
                 margin-top: 120px;
                 margin-left: 75px;
            }
            
            #lBairro{
                 position: absolute;
                 margin-top: 120px;
                 margin-left: 405px;
            }
            #txtBairro{
                 position: absolute;
                 margin-top: 120px;
                 margin-left: 460px;
            }
            
            #lNumero{
                 position: absolute;
                 margin-top: 120px;
                 margin-left: 796px;
            }
            #txtNumero{
                 position: absolute;
                 margin-top: 120px;
                 margin-left: 858px;
            }
            
            #lEstado{
                 position: absolute;
                 margin-top: 90px;
                 margin-left: 2px;
            }
            #txtEstado{
                 position: absolute;
                 margin-top: 90px;
                 margin-left: 75px;
            }
            
            #lCidade{
                 position: absolute;
                 margin-top: 90px;
                 margin-left: 245px;
            }
            #txtCidade{
                 position: absolute;
                 margin-top: 90px;
                 margin-left: 300px;
            }
            
            #lFone{
                 position: absolute;
                 margin-top: 150px;
                 margin-left: 2px;
            }
            #txtFone{
                 position: absolute;
                 margin-top: 150px;
                 margin-left: 75px;
            }
            
            #lCelular{
                 position: absolute;
                 margin-top: 150px;
                 margin-left: 235px;
            }
            #txtCelular{
                 position: absolute;
                 margin-top: 150px;
                 margin-left: 292px;
            }
            
            #lFax{
                 position: absolute;
                 margin-top: 150px;
                 margin-left: 420px;
            }
            #txtFax{
                 position: absolute;
                 margin-top: 150px;
                 margin-left: 460px;
            }
            
            #lEmail{
                 position: absolute;
                 margin-top: 180px;
                 margin-left: 2px;
            }
            #txtEmail{
                 position: absolute;
                 margin-top: 180px;
                 margin-left: 75px;
            }
            
            #lSite{
                 position: absolute;
                 margin-top: 180px;
                 margin-left: 420px;
            }
            #txtSite{
                 position: absolute;
                 margin-top: 180px;
                 margin-left: 460px;
            }
            
            #lCadastro{
                 position: absolute;
                 margin-top: 210px;
                 margin-left: 0px;
            }
            #rAtivo{
                 position: absolute;
                 margin-top: 210px;
                 margin-left: 70px;
            }
            #rDesativado{
                 position: absolute;
                 margin-top: 230px;
                 margin-left: 70px;
            }

            
            #bOk{
                 position: absolute;
                 margin-top: 300px;
                 margin-left: 2px;
            }
            #bLimpar{
                 position: absolute;
                 margin-top: 300px;
                 margin-left: 75px;
            }
            
            #linhaFim{
                 position: absolute;
                 margin-top: 325px;
                 margin-left: 0px;
                 width: 1024px;
            }
            
        h1,h2,p{margin: 0 10px}
        h1{font-size: 250%;color: #4396D8;letter-spacing: 1px}
        </style>
        <link rel="stylesheet" href="menu_style.css" type="text/css" />
        <script type='text/javascript' src='/js/Metodos.js'></script>
        <script type='text/javascript' src='/js/engine.js'></script>
        <script type='text/javascript' src='/js/util.js'></script>
        <script type='text/javascript'>
            function cleanAddOptions(local){
                DWRUtil.removeAllOptions(local);
            }
            
            function carregaCidades(){
                Metodos.getListCidades(montaCombo);
            }
            
            function montaCombo(listBeans){
                DWRUtil.removeAllOptions("comboCidades");
                DWRUtil.addOptions("comboCidades", listBeans, cidCodigo, cidDescricao);
            }
        </script>
    </head>
    <body>
        <%List list;%>
        <script type="text/javascript">
            function changeLabel(){       
               if (!document.getElementById('pesFisica').checked){
                    document.getElementById('lCpf').innerHTML = 'CNPJ:';
                    document.getElementById('lRg').innerHTML = 'IE:';
               }else{
                   document.getElementById('lCpf').innerHTML = 'CPF:';
                   document.getElementById('lRg').innerHTML = 'RG:';
               }
            }
        </script>
        <script type="text/javascript">
            function loadCity(){
                
                var combo = document.getElementById('comboCidades');
                i = 0;
                var id, desc;
                alert(desc);
                <%
                    list = Metodos.getListCidades();
                    Cidades c;
                    for (Object o : list){
                        c = (Cidades) o;
                    %>
                        id = "<%System.out.println(c.getCidCodigo());%>";
                        desc = "<%System.out.println(c.getCidDescricao());%>";
                        combo.options[i++] = new Option(desc,id);
                    <%}%>
                   
            }
        </script>
        <img src="images/barra.png" width="1024" height="96" />
        <div id="tudo">
            <div id="menu">
                <ul class="menu">
                     <li class="top"><a href="index.jsp" class="top_link"><span>Home</span></a>
                         <li class="top"><a href="#" class="top_link"><span>Cadastros</span></a>
                            <ul class="sub">
                                <li><a href="cadVC.jsp">Visual Class</a></li>
                                <li><a href="cadCliente.jsp">Clientes</a></li>			
                            </ul>
                        </li>
                </ul>
            </div>
            
            <h1><div align="center">Cadastro de Clientes do Visual Class</div></h1>

            <hr>
            <form name="user" action="gravaUsuario" method="post">
                <div id="lCodigo">
                    <label>Código: </label>
                </div>
                <div id="txtCodigo">
                    <input type="text" name="edtCodigo" size="10"/>
                </div>
                
                <div id="lPessoa">
                    <label>Tipo de Pessoa:</label>
                </div> 
                    
                <div id="rFisica">    
                    <INPUT TYPE="RADIO" id="pesFisica" NAME="tpPessoa" VALUE="1" onclick="changeLabel()" CHECKED> Física
                </div>
                    
                <div id="rJuridica">    
                    <INPUT TYPE="RADIO" id="pesJuridica" NAME="tpPessoa" VALUE="2" onclick="changeLabel()"> Jurídica     
                </div>

                <div id="lVC">
                    <label>Versão: </label>
                </div>
                <div id="txtVC">
                    <select name="cbVC">
                    <%
                        list = Metodos.getListVC();
                        VisualClass vc;
                        for (Object obj : list){
                            vc = (VisualClass)obj;
                            out.println("<option value=" + vc.getVcCodigo() + ">" + vc.getVcDescricao() + "</option>");
                        }
                    %> 
                    </select> 
                </div>

                <div id="lNome">
                    <label>Nome:</label>
                </div>
                <div id="txtNome">
                    <input type="text" name="edtNome" size="74"/>
                </div>

                <div id="lCpf">
                    <label>CPF:</label>
                </div>
                <div id="txtCpf">
                    <input type="text" name="edtCpf" size="20"/>
                </div>

                <div id="lRg">
                    <label>RG:</label>
                </div>
                <div id="txtRg">
                    <input type="text" name="edtRg" size="20"/>
                </div>

                <div id="lEndereco">
                    <label>Endereço:</label>
                </div>
                <div id="txtEndereco">
                    <input type="text" name="edtEndereco" size="50"/>
                </div>

                <div id="lBairro">
                    <label>Bairro:</label>
                </div>
                <div id="txtBairro">
                    <input type="text" name="edtBairro" size="50"/>
                </div>

                <div id="lNumero">
                    <label>Número:</label>
                </div>
                <div id="txtNumero">
                    <input type="text" name="edtNumero" size="10"/>
                </div>

                <div id="lEstado">
                    <label>Estado:</label>
                </div>
                <div id="txtEstado">
                    <select name="cbEstado" onchange="carregaCidades()">
                        <%
                        list = Metodos.getListEstados();
                        Estados est;
                        for (Object obj : list){
                            est = (Estados)obj;
                            out.println("<option value=" + est.getEstUf() + ">" + est.getEstDescricao() + "</option>");
                        }
                      %> 
                    </select>
                </div>    
                    
                <div id="lCidade">
                    <label>Cidade:</label>
                </div>
                <div id="txtCidade">
                    <select id="comboCidades" name="cbCidades" >
                        
<!--                        list = Metodos.getListCidades();
                        Cidades cid;
                        for (Object obj : list){
                            cid = (Cidades)obj;
                            out.println("<option value='" + cid.getCidCodigo() + "'>" + cid.getCidDescricao() + "</option>");
                        }-->
                        
                    </select>
<!--                        list = Util.getListCidades();
                        Cidades cid;
                        for (Object obj : list){
                            cid = (Cidades)obj;
                            out.println("<option value='" + cid.getCidCodigo() + "'>" + cid.getCidDescricao() + "</option>");
                        }-->
                    
                </div>

                <div id="lFone">
                    <label>Telefone:</label>
                </div>
                <div id="txtFone">
                    <input type="text" name="edtFone" size="13"/>
                </div> 

                <div id="lCelular">
                    <label>Celular:</label>
                </div>
                <div id="txtCelular">
                    <input type="text" name="edtCelular" size="13"/>
                </div> 
                    
                <div id="lFax">
                    <label>Fax:</label>
                </div>
                <div id="txtFax">
                    <input type="text" name="edtFax" size="13"/>
                </div> 

                <div id="lEmail">
                    <label>Email:</label>
                </div>
                <div id="txtEmail">
                    <input type="text" name="edtEmail" size="50"/>
                </div>  

                <div id="lSite">
                    <label>Site:</label>
                </div>
                <div id="txtSite">
                    <input type="text" name="edtSite" size="50"/>
                </div>  
                    
                <div id="lCadastro">
                    <label>Cliente:</label>
                </div>
                <div id="rAtivo">    
                    <INPUT TYPE="RADIO" NAME="cadastro" VALUE="S" CHECKED> Ativo
                </div>

                <div id="rDesativado">    
                    <INPUT TYPE="RADIO" NAME="cadastro" VALUE="N"> Desativado     
                </div>    
                    
                <div id="bOk">
                    <input  accesskey="o" type="submit" name="btnOK" value="Gravar">
                </div>
                <div id="bLimpar">
                    <input  accesskey="c" type="reset" name="btnCancelar" value="Limpar">
                </div>

                <div id="linhaFim">
                     <hr>   
                </div>    
            </form>
        </div>
    </body>
</html>

Cara por incrivel que pareça o problema de não estar reconhecendo o metodo era coisa idiota, o problema estava na ordem dos imports dos arquivos JS

antes tava assim

        <script type='text/javascript' src='/SiteClass/dwr/interface/Metodos.js'></script>
        <script type='text/javascript' src='/SiteClass/dwr/engine.js'></script>
        <script type='text/javascript' src='/SiteClass/dwr/util.js'></script>

Ai mudei para isso

        <script type='text/javascript' src='/SiteClass/dwr/engine.js'></script>
        <script type='text/javascript' src='/SiteClass/dwr/util.js'></script>
        <script type='text/javascript' src='/SiteClass/dwr/interface/Metodos.js'></script>

Como dizem por ai “A ordem dos Tratores, altera o viaduto” kkkkkkkkkk

Depois disso os metodos começaram a ser reconhecidos, ainda não funcionou kkkkkkkkkk, fiz um teste com uma função que só retorna uma mensagem e blz, funcionou, mais o meu objetivo mesmo é popular um combobox acessando o BD, foi que deu o problema, resultou em uma mensagem de erro estranha

Erro: uncaught exception: [Exception... "prompt aborted by user"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: resource:///components/nsPrompter.js :: openTabPrompt :: line 462"  data: no]

Resolvi aqui, para solucionar esse problema do DWR com Hibernate basta fazer isto:

http://www.butterdev.com/dwr/2008/12/dwr-and-hibernate-3x/