Select Dinâmico JSP

2 respostas
P

Olá Galera,

Mais uma vez eu precisando de ajuda aqui no Fórum.

Seguinte, quero fazer um select que verifique o que foi marcado no select anterior para exibir os dados corretos.

Se trata de uma página para cadastro de turmas de um curso, tenho cadastrado as disciplinas, professores, horários e também as disciplinas e horários que cada professor disponibilizou.
No primeiro select tem a disciplina, após selecionar a disciplina o próximo select deve exibir apenas os professores que disponibilizaram essa disciplina no sistema. (as tabelas estão relacionadas no banco de dados, e usando select where no bd ele exibe exatamente o que eu quero), então deve ser escolhido o professor, e em seguida o terceiro select vai mostrar apenas os horários que esse professor tem disponíveis.

A minha dificuldade é a seguinte: Como passar por parâmetro para o DAO o que foi marcado no select anterior, para fazer a consulta correta?

Já li alguns tópicos com algumas soluções em javascript mas não consegui implementar. vou colocar meu código abaixo e puderem me ajudem.

O estado atual do form no meu jsp, que lista as disciplinas, professores e horários, mas sem fazer esse tratamento é o seguinte:
<form action="mvc" class="formulario">
   Data Inicio: <input name="dataInicioEmTexto" type="text" id="dataFimEmTexto" size="50" /><br /><br />
   Data Fim: <input name="dataFimEmTexto" type="text" id="dataFimEmTexto" size="50" /><br /><br />
   Disciplina: 
   <select name="iddisciplinaEmTexto" id="iddisciplinaEmTexto">        
        	<c:forEach var="disciplina" items="${daoDisciplina.lista}" varStatus="id">
        		<option value="${disciplina.id}">${disciplina.nome}</option>
        	</c:forEach>        
   </select><br /><br />
   Professor: 
   <select name="idprofessorEmTexto" id="idprofessorEmTexto">        
        	<c:forEach var="professor" items="${daoProfessor.lista}" varStatus="id">
        		<option value="${professor.id}">${professor.nome}</option>
        	</c:forEach>        
   </select><br /><br />
   Horário:
   <select name="idhorarioEmTexto" id="idhorarioEmTexto">        
        	<c:forEach var="horario" items="${daoHorario.lista}" varStatus="id">
        		<option value="${horario.id}">${horario.horaInicial} às ${horario.horaFinal}</option>
        	</c:forEach>        
   </select><br /><br />   
   Situação:
   <select name="situacao" id="situacao" style="width: 300px;">
	  <option value="Ativa">Ativa </option>
	  <option value="Inativa">Inativa</option>
	  <option value="Em Espera">Em Espera </option>
	</select><br /><br />
	<input type="hidden" name="logica" value="AdicionaTurmaLogic"/>
     <input type="reset" name="cancelar" id="cancelar" value="Cancelar" />
     <input name="gravar" type="submit" id="gravar" value="Gravar" />
</form>
No SQL eu uso a seguinte query para exibir os professores que lecionam uma determinada disciplina (nesse caso a disciplina com o id 1)
select * from professor, disciplina, discprofessor where disciplina.iddisciplina = 1 and discprofessor.iddisciplina = disciplina.iddisciplina and professor.idprofessor = discprofessor.idprofessor group by professor.idprofessor

Esse sql mostra certinho o que eu preciso, para mostrar os horários que cada professor disponibilizou seria a mesma coisa mudando as tabelas.

Ou seja, eu sei o que preciso fazer. Passar por parâmetro o id da disciplina que for selecionada no primeiro select para o DAO que vai executar essa query, o segundo select simplesmente vai pegar os dados e listar.

Só não sei como passar o parâmetro para o DAO (ou alguma lógica que mande ele para o DAO) retornando os valores certos na outra select

2 Respostas

P

Depois de muito pesquisar, consegui resolver meu problema, de forma até que bem simples.

Achei vários tutoriais e dicas ensinando a fazer esse tipo de tarefa, mas muitos deles eram bem complexos e tinham várias exigências para que pudessem ser implementados, e como não tenho muito conhecimento de javascript não tinha como programar eu mesmo os métodos para fazer o tratamento.

Acabei encontrando uma forma bem simples de fazer, usando a biblioteca de javascript DWR (http://directwebremoting.org/dwr/index.html).

Com uma rápida procurada no Google pode-se encontrar alguns tutoriais básicos. Li alguns deles vi algumas dicas no site oficial e consegui fazer uma implementação bem simples do meu Select Dinâmico.

selects
Disciplina:
   <select name="comboDisciplina" id="comboDisciplina"
   		onchange="carregarProfessores();">   
		<option value="0">Selecione...</option>     
     	<c:forEach var="disciplina" items="${daoDisciplina.lista}" varStatus="id">
     		<option value="${disciplina.id}">${disciplina.nome}</option>
     	</c:forEach>        
   </select>
   Professor: 
   <select name="comboProfessores" id="comboProfessores"> 
  		<option value="0">Selecione...</option>       
       	<c:forEach var="professor" items="${daoProfessor.lista}" varStatus="id">
       		<option value="${professor.id}">${professor.nome}</option>
       	</c:forEach>        
   </select>
javascript
<script language="javascript">
	function carregarProfessores() {
		var disciplina = new Object();
		disciplina.id = document.getElementById("comboDisciplina").value;
		CombosDependentesLookup.obterProfessores(disciplina, function(data) {
			dwr.util.removeAllOptions("comboProfessores");
			dwr.util.addOptions("comboProfessores", {
				"0" : "Selecione..."
			});
			dwr.util.addOptions("comboProfessores", data, "id", "nome");
		});
	}
</script>
Classe que vai fazer o tratamento
public class CombosDependentesLookup {
	
	public List<Professor> obterProfessores(Disciplina disciplina) {
		ProfessorDAO daoProfessor = new ProfessorDAO();
		List<Professor> listaProfessores = new ArrayList<Professor>();
		listaProfessores = daoProfessor.listar(disciplina);
		return listaProfessores;
	}
}
Método que busca a lista de professores no bd, de acordo com a disciplina selecionada
public List<Professor> listar(Disciplina disciplina){
		List<Professor> listaProfessores = new ArrayList<Professor>();
		
		PreparedStatement stmt = null;
				
		try {
			String sql = "select * from professor, disciplina, discprofessor where disciplina.iddisciplina = '" + disciplina.getId() + "' and discprofessor.iddisciplina = disciplina.iddisciplina and professor.idprofessor = discprofessor.idprofessor group by professor.idprofessor";
			
			stmt = connection.prepareStatement(sql);
			
			ResultSet rs = stmt.executeQuery();
			
			while (rs.next()) {
				//Criando o objeto Professor
				Professor professor = new Professor();
				professor.setId(rs.getLong("idprofessor"));
				professor.setNome(rs.getString("nome"));
				professor.setSenha(rs.getString("senha"));
				professor.setTelefone(rs.getString("telefone"));
				professor.setLogradouro(rs.getString("logradouro"));
				professor.setBairro(rs.getString("bairro"));
				professor.setCidade(rs.getString("cidade"));
				professor.setCep(rs.getString("cep"));
				professor.setNumero(rs.getString("numero"));
				professor.setComplemento(rs.getString("complemento"));
				professor.setUf(rs.getString("uf"));
				//Montando a data através do Calendar
				Calendar data = Calendar.getInstance();
				data.setTime(rs.getDate("dataNascimento"));
				professor.setDataNascimento(data);
								
				//Adicionando o objeto a lista
				listaProfessores.add(professor);
			}
			rs.close();
			stmt.close();		
	
		} catch (SQLException e) {
			throw new RuntimeException(e);
		}		
		return listaProfessores;		
	}

No mais, apenas adicionei o .jar do DWR no meu projeto e configurei adequadamente os arquivos web.xml e dwr.xml

adicionado no web.xml
<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
arquivo dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

<dwr>
  <allow>     
	<create creator="new" javascript="CombosDependentesLookup">
		<param name="class" value="br.com.winners.xtest.CombosDependentesLookup"/>
	</create>	
        <convert converter="bean" match="br.com.winners.modelo.Professor"/>
        <convert converter="bean" match="br.com.winners.jdbc.ProfessorDAO"/>
	<convert converter="bean" match="br.com.winners.modelo.Disciplina"/>
	<convert converter="bean" match="br.com.winners.jdbc.DisciplinaDAO"/>
  </allow>
</dwr>

Se alguem esbarrar nesse tópido e estiver precisando de algo do tipo, acho que olhando os códigos acima da para entender bem como implementar.

M

Opa tudo bem?
estou com esse mesmo problema e estava tentando uma solucao de acordo com seu tópico mas nao consegui, nao executa nenhuma tarefa quando eu clico na opcao, segue minhas classes:

o javascript:

<script language="javascript">  
    function carregarCargo() {  
        var dados = new Object();  
        dados.cargos.id = document.getElementById("comboAreas").value;  
        CombosDependentesLookup.obterCargos(dados, function(data) {  
            dwr.util.removeAllOptions("comboCargos");  
            dwr.util.addOptions("comboCargos", {  
                "0" : "Indiferente..."  
            });  
            dwr.util.addOptions("comboCargos", data, "id", "nome");  
        });  
    }  
</script>

o JSP:

<td>&Aacute;rea de Atividade:</td>
      <td><label>
        <select name="comboAreas" id="comboAreas" onchange="carregarCargo();">
        <option value="0" selected>Selecione uma área</option>
		<option value="1">Administrativo / Escritório</option>
		<option value="2">Agricultura, Pecuária e Pesca</option>
		<option value="3">Alpinismo Industrial</option>
		<option value="4">Ambiental</option>
		<option value="5">Arquitetura, Decoração e Urbanismo</option>
		<option value="6">Artes, Lazer, Literatura e Entretenimento</option>
		<option value="7">Auditoria / Controladoria</option>
		<option value="8">Ciências, Pesquisa e Desenvolvimento</option>
		<option value="9">Comercial e Vendas</option>
		<option value="10">Comércio Exterior</option>
		<option value="11">Comércio Varejista / Atacadista e Distribuição</option>
		<option value="12">Construção Civil / Imobiliário</option>
		<option value="13">Consultoria</option>
		<option value="14">Educação, Treinamento e Idiomas</option>
		<option value="15">Engenharia</option>
		<option value="16">Esportes / Academias /Saúde</option>
		<option value="17">Estagiários</option>
		<option value="18">Estética, Moda e Beleza</option>
		<option value="19">Financeiro / Contabilidade / Economia</option>
		<option value="20">Indústria, Manufatura e Produção</option>
		<option value="21">Informática / TI, Internet e Telecomunicação</option>
		<option value="22">Jurídico</option>
		<option value="23">Meio Ambiente</option>
		<option value="24">Mídia (Veic. Comunic.) e Jornalismo</option>
		<option value="25">Petróleo e Gás</option>
		<option value="26">Publicidade / Propaganda e RP</option>
		<option value="27">Recursos Humanos</option>
		<option value="28">Saúde, Trat.Terapêuticos e Hospitalar</option>
		<option value="29">Seguro e Previdência Privada</option>
		<option value="30">Serviços Gerais e Domiciliares</option>
		<option value="31">Setor Público e ONG´s</option>
		<option value="32">Suprimentos</option>
		<option value="33">Técnicos, Manutenção, Instalação e Reparos</option>
		<option value="34">Telemarketing e Atend.ao Cliente</option>
		<option value="35">Trainee</option>
		<option value="36">Transporte ? Terrestre, Marítimo e Aéreo</option>
		<option value="37">Turismo e Hotelaria</option>
		<option value="38">Veterinária e Zoologia</option>

        </select>
      </label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Cargo Desejado:</td>
      <td><label>
        <select name="comboCargos" id="comboCargos">   
        <option value="0">Indiferente...</option>         
        <c:forEach var="dados" items="${listaCargos}" varStatus="id">  
            <option value="${dados.cargos.id}">${dados.cargos.nome}</option>  
        </c:forEach>          
   </select>

a classe:

public class CombosDependentesLookup {
	public List<Dados> obterCargos(Dados dados) throws Exception {  
		
		CentralCargos daoCargos = new CentralCargos();
		List<Dados> listaCargos = new ArrayList<Dados>();
		listaCargos = daoCargos.listar(dados);
		return listaCargos;
		
      }  

}

o DAO:

public class CentralCargos {
	private final Connection connection;

	public CentralCargos() {
		try {
			connection = new ConnectionFactory().getConnection();
		} catch (SQLException e) {
			throw new RuntimeException(e);
		}
	}

	public List<Dados> listar(Dados dados) throws Exception {
		List<Dados> listaCargos = new ArrayList<Dados>(); 
		
		PreparedStatement stmt = connection.prepareStatement("select * from cargos where id= '" + dados.getCargos().getId() + "'");
		
		
		ResultSet rs = stmt.executeQuery();
		
		while (rs.next()) {
			listaCargos.add(populaCargos(rs));
		}
		rs.close();
		stmt.close();
		
		return listaCargos;
	
	}
	

	private Dados populaCargos(ResultSet rs) throws SQLException {
		Dados dados = new Dados();
		dados.setCargos(new Cargos());
		
		dados.getCargos().setNome(rs.getString("nome"));
		return dados;
	}

o web.xml

<servlet>  
    <servlet-name>dwr-invoker</servlet-name>  
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  
    <init-param>  
        <param-name>debug</param-name>  
        <param-value>true</param-value>  
    </init-param>  
</servlet>  
  
<servlet-mapping>  
    <servlet-name>dwr-invoker</servlet-name>  
    <url-pattern>/dwr/*</url-pattern>  
</servlet-mapping>

e o dwr.xml que criei na mesma pasta do web.xml

<?xml version="1.0" encoding="UTF-8"?>
<dwr>  
  <allow>       
    <create creator="new" javascript="CombosDependentesLookup">  
        <param name="class" value="br.com.CarreirasOffshore.Classes.CombosDependentesLookup"/>  
    </create>   
        <convert converter="bean" match="br.com.CarreirasOffshore.Classes.Dados"/>  
        <convert converter="bean" match="br.com.CarreirasOffshore.DAO.CentralCargos"/>  
    
  </allow>  
</dwr>

adicionei o dwr.jar no projeto.

agradeço desde já

SDS

Criado 14 de maio de 2011
Ultima resposta 8 de fev. de 2012
Respostas 2
Participantes 2