<RESOLVIDO>Pegar valor selecionado em uma combo e abrir um modal

Rodrigomazza · Janeiro 22, 2018, 6:31pm

Pessoal,

Estou com dificuldades de entendimento para pegar um valor selecionado em uma combo e ele me abrir uma tela (modal) com os valores selecionados a partir de uma tabela no banco de dados. vamos para os codigos, primeiro mostrar a tela para entendimento:

Supondo que selecionei “rodrigo teste”:

o codigo na JSP esta assim:

<div class="panel panel-primary panel-table">
		<div class="panel-body">
			<div class="pull-left">
				<div class="col-xs-12 col-mg-5 col-lg-12">
					<div class="form-group">
						<select class="selectpicker form-control" id="Editar_Parametro" >
						<option value="0">Selecione um Set de Simulação...</option>
							<c:forEach var="dadosGeraisResult" items="${resultPage.result}">
								<option value="${dadosGeraisResult.codigo}" >${dadosGeraisResult.nomeDoSet}</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>

agora a Function que chama o modal e passa os valores:

<script type="text/javascript">
function visualizarParametro(id) {
	$('#modalOperacaoBody').html('Carregando...');
	$.post("DadosGerais!visualizarEntidade", 'entidade.codigo=' + id,
			function(data) {
				$("#modalOperacaoBody").html(data);
			});
}</script>

Bem quando eu seleciono o valor não acontece nada… ja vi alguns resolvidos aqui…tentei aplicar e não deu certo…
acredito que o problema seja na combo. Mas aparentemente esta correto…

Só para detalhar melhor esse é o codigo da jsp modal:

<%@ taglib prefix=“s” uri="/struts-tags" %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“tce” uri=“http://tce.pe.gov.br/jsp/tcetags”%>

<s:hidden id="idEntidade" name="entidade.codigo" value="%{entidade.codigo}"/>

<div class="row">
   	<div class="col-lg-12">
		<div class="form-group">
		  <label class="col-sm-3 control-label">Nome do Set:</label>
		  <div class="col-sm-9">
		    <s:textarea cols="80" rows="3" id="nomeDoSet" 
		    	name="entidade.nomeDoSet" value="%{entidade.nomeDoSet}" />
		  </div>
		</div>
		<div class="form-group" >
		  <label class="col-sm-3 control-label">Ultimo Ano Folha:</label>
		  <div class="col-sm-3">
		    <s:textarea cols="80" rows="3" id="utimaExecucaoFolha" 
		    	name="entidade.utimaExecucaoFolha" value="%{entidade.utimaExecucaoFolha}" />
		  </div>
		</div>
		<div class="form-group" >
		  <label class="col-sm-3 control-label">Ano Zero:</label>
		  <div class="col-sm-3">
		    <s:textarea cols="80" rows="3" id="anoZero" 
		    	name="entidade.anoZero" value="%{entidade.anoZero}" />
		  </div>
		</div>
		<div class="form-group" >
		  <label class="col-sm-3 control-label">Data Criação:</label>
		  <div class="col-sm-3">
		    <s:textarea cols="80" rows="3" id="dataCriacao" 
		    	name="entidade.dataCriacao" value="%{entidade.dataCriacao}" />
		  </div>
		</div>
		<div class="form-group" >
		  <label class="col-sm-3 control-label">Notas Explicativas:</label>
		  <div class="col-sm-3">
		    <s:textarea cols="80" rows="3" id="notasExplicativas" 
		    	name="entidade.notasExplicativas" value="%{entidade.notasExplicativas}" />
		  </div>
		</div>
	</div>
</div>
 
 <div class="row">
 	<div class="col-lg-12">
		<div class="panel-footer text-center">
			<div class="btn-group btn-group-sm">
				<c:if test="${entidade != null && entidade.codigo != null && entidade.codigo > 0}">
					<s:submit cssClass="btn btn-primary" action="DadosGerais" method="alterar" value="Alterar" onclick="return checarFormulario()"/>
				</c:if>
				<c:if test="${entidade == null || entidade.codigo == null || entidade.codigo == 0}">
					<s:submit cssClass="btn btn-primary" action="DadosGerais" method="cadastrar" value="Cadastrar" onclick="return checarFormulario()"/>
				</c:if>
			</div>
		</div>
	</div>
</div>

rodevops · Janeiro 22, 2018, 6:43pm

Em nenhum ponto do código eu vi você chamando a função, se precisa de um valor vindo do combo, pode usar o evento onchange…

<select ... onchange="visualizarParametro(this.value);">
...

Isso vai passar o próprio valor do option selecionado para a função…

Rodrigomazza · Janeiro 22, 2018, 7:41pm

<form class="form-horizontal" role="form" action="DadosGerais">
<div class="panel panel-primary">
	<div class="panel-heading">
		<div class="panel-title"></div>
	</div>
	<div class="panel panel-primary panel-table">
		<div class="panel-body">
			<div class="pull-left">
				<div class="col-xs-12 col-mg-5 col-lg-12">
					<div class="form-group">
						<select class="selectpicker form-control" onchange="visualizarParametro(this.value);" >
						<option value="0">Selecione um Set de Simulação...</option>
							<c:forEach var="dadosGeraisResult" items="${resultPage.result}" varStatus="num">
								<option value="${dadosGeraisResult.codigo}" data-toggle="modal" data-target="#modalOperacao">${dadosGeraisResult.nomeDoSet}</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>

Coloquei o onchange realmente ele respondeu… pois o log mostrou a consulta pelo hibernate, porem o modal ainda não rederiza.

function visualizarParametro(id) {
	$('#modalOperacaoLabel').html('Editar Parâmetro');
	$('#modalOperacaoBody').html('Carregando...');
	$.post("DadosGerais!visualizarEntidade", 'entidade.codigo=' + id,
			function(data) {
				$("#modalOperacaoBody").html(data);
			});
}

function adicionarParametro() {
	$('#modalOperacaoLabel').html('Incluir Parâmetro');
	$('#modalOperacaoBody').html('Carregando...');
	$.post("DadosGerais!visualizarEntidade", 'entidade.nomeDoSet='
			+ $('#nomeDoSetPesquisa').val() + '&entidade.utimaExecucaoFolha='
			+ $('#utimaExecucaoFolhaPesquisa').val(), function(data) {
		$("#modalOperacaoBody").html(data);
	});
}

olhando as duas funções que tenho elas estão iguais e uma funciona quando vou criar um novo formulario.

Agora o log esta aparecendo assim:

[WARN ][2018-01-22 17:37:01][http-bio-8080-exec-10] (CommonsLogger.java->warn:49) - couldn't clear tomcat cache

java.lang.NoSuchFieldException: resourceEntries
at java.lang.Class.getDeclaredField(Unknown Source)
at com.opensymphony.xwork2.util.LocalizedTextUtil.clearMap(LocalizedTextUtil.java:857)
at com.opensymphony.xwork2.util.LocalizedTextUtil.clearTomcatCache(LocalizedTextUtil.java:837)
at com.opensymphony.xwork2.util.LocalizedTextUtil.reloadBundles(LocalizedTextUtil.java:821)
at com.opensymphony.xwork2.util.LocalizedTextUtil.findDefaultText(LocalizedTextUtil.java:186)
at com.opensymphony.xwork2.util.LocalizedTextUtil.getDefaultMessage(LocalizedTextUtil.java:679)
at com.opensymphony.xwork2.util.LocalizedTextUtil.findText(LocalizedTextUtil.java:539)
at com.opensymphony.xwork2.util.LocalizedTextUtil.findText(LocalizedTextUtil.java:363)
at org.apache.struts2.interceptor.FileUploadInterceptor.getTextMessage(FileUploadInterceptor.java:434)
at org.apache.struts2.interceptor.FileUploadInterceptor.getTextMessage(FileUploadInterceptor.java:421)
at org.apache.struts2.interceptor.FileUploadInterceptor.intercept(FileUploadInterceptor.java:232)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.ModelDrivenInterceptor.intercept(ModelDrivenInterceptor.java:89)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.ScopedModelDrivenInterceptor.intercept(ScopedModelDrivenInterceptor.java:130)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at org.apache.struts2.interceptor.debugging.DebuggingInterceptor.intercept(DebuggingInterceptor.java:267)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.ChainingInterceptor.intercept(ChainingInterceptor.java:126)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.PrepareInterceptor.doIntercept(PrepareInterceptor.java:138)
at com.opensymphony.xwork2.interceptor.MethodFilterInterceptor.intercept(MethodFilterInterceptor.java:87)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.I18nInterceptor.intercept(I18nInterceptor.java:165)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at org.apache.struts2.interceptor.ServletConfigInterceptor.intercept(ServletConfigInterceptor.java:164)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.AliasInterceptor.intercept(AliasInterceptor.java:179)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at com.opensymphony.xwork2.interceptor.ExceptionMappingInterceptor.intercept(ExceptionMappingInterceptor.java:176)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at br.gov.pe.tce.autorizacao.action.AutorizacaoInterceptor.intercept(AutorizacaoInterceptor.java:38)
at com.opensymphony.xwork2.DefaultActionInvocation.invoke(DefaultActionInvocation.java:237)
at org.apache.struts2.impl.StrutsActionProxy.execute(StrutsActionProxy.java:52)
at org.apache.struts2.dispatcher.Dispatcher.serviceAction(Dispatcher.java:488)
at org.apache.struts2.dispatcher.ng.ExecuteOperations.executeAction(ExecuteOperations.java:77)
at org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.doFilter(StrutsPrepareAndExecuteFilter.java:91)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
at org.springframework.orm.hibernate3.support.OpenSessionInViewFilter.doFilterInternal(OpenSessionInViewFilter.java:198)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:219)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:110)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:506)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:169)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:103)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:962)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:116)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:445)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1115)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:637)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:318)
at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Unknown Source)
Hibernate:
/* load br.gov.pe.tce.piloto.entity.DadosGeraisEntity */ select
dadosgerai0_.Codigo as Codigo1_0_,
dadosgerai0_.AnoZero as AnoZero1_0_,
dadosgerai0_.DataCriacao as DataCria3_1_0_,
dadosgerai0_.NomeDoSet as NomeDoSet1_0_,
dadosgerai0_.NotasExplicativas as NotasExp5_1_0_,
dadosgerai0_.UltimaExecucaoFolha as UltimaEx6_1_0_
from
SIMULADOR_DadosGerais dadosgerai0_
where
dadosgerai0_.Codigo=?

rodevops · Janeiro 22, 2018, 7:47pm

Para o modal renderizar se não me engano (faz tempo que não converso com Bootstrap Bill Turner )…

$("#modalOperacaoBody").html(data).modal('show');

Rodrigomazza · Janeiro 22, 2018, 8:51pm

Eu ja tinha tentado isso e não deu certo, vi nos exemplos de modal o que é estranho que para adicionar por ser um botão onclick funciona perfeitamente. mas selecionando o valor não esta mostrando o modal.

rodevops · Janeiro 22, 2018, 10:44pm

Ah, lembrei que no modal, o corpo (class=“modal-body”) deve ter seu html modificado, e não o modal inteiro como você fez (ao menos é o que imagino já que não tem o código do modal)…

$("#modalOperacaoBody").html(data);

Você pode tentar…

$(".modal-body").html(data);
$("#modalOperacaoBody").modal("show");

Melhor ainda para não sobrecarregar o DOM…

var modal = $("#modalOperacaoBody");
var corpo = modal.find(".modal-body");
corpo.html(data);
modal.modal("show");

Sempre use o F12 do navegador para ver erros no console…

javaflex · Janeiro 22, 2018, 11:11pm

Veja este exemplo: http://cssdeck.com/labs/nvse73lq

Basicamente:

HTML:
      <select onchange="teste(this)">
        <option></option>
        <option value="1">Opcao 1</option>
        <option value="2">Opcao 2</option> 
      </select>

…

JS:
function teste(select) {
  $("#myModal").modal();
  $("#myModal .modal-body").html("Valor selecionado no select: " + $(select).val());
}

rodevops · Janeiro 22, 2018, 11:15pm

Agora eu que não prestei atenção nos nomes dos ids…

Imagino que seu #modalOperacaoBody já pega o corpo do modal certo (modal-body)?

Nesse caso, o modal nunca será renderizado porque precisa pegar o id da div “pai” dele…

<div id="modalCompleto">
    ...
    <div id="modalOperacaoBody" class="modal-body">...</div>
</div>

Se sua estrutura estiver +/- assim, você precisa…

var modal = $("#modalCompleto");
var corpo = modal.find("#modalOperacaoBody");
corpo.html(data);
modal.modal("show");

rodevops · Janeiro 22, 2018, 11:16pm

É uma dica válida, mas sobrecarrega o DOM indo duas vezes na árvore, melhor guardar em variáveis e buscar na árvore “mais interna” como mostrei acima…

javaflex · Janeiro 22, 2018, 11:17pm

rodevops:

javaflex:
JS:
function teste(select) {
    $("#myModal").modal();
    $("#myModal .modal-body").html("Valor selecionado no select: " + $(select).val());
}
É uma dica válida, mas sobrecarrega o DOM indo duas vezes na árvore, melhor guardar em variáveis e buscar na árvore “mais interna” como mostrei acima…

Sim, o exemplo foi só ilustrativo pro objetivo da questão do tópico.

Rodrigomazza · Janeiro 23, 2018, 4:21am

Pessoal cheguei nesta solução mas tem um problema:

Primeiro o codigo:

Criei um novo modal para alteração:

<div class="modal fade" id="modalAlteracao" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span>
				</button>
				<h4 id="modalOperacaoLabel" class="modal-title">Título</h4>
			</div>
			<div id="modalAlteracaoBody" class="modal-body">Carregando...</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
			</div>
		</div>
	</div>
</div>

Agora o javascript:

function teste(select) {
  $("#modalAlteracao").modal();
  $("#modalAlteracao .modal-body").html("Valor selecionado no select: " + $(select).val());
  $.post("DadosGerais!visualizarEntidade", 'entidade.codigo=' + $(select).val(),
			function(data) {
				$("#modalAlteracaoBody").html(data);
			});
}

o problema é que quando clico na combo ele apresenta a tela tentando carregar o formulario e não consigo selecionar outro valor.

<div class="panel panel-primary panel-table">
		<div class="panel-body">
			<div class="pull-left">
				<div class="col-xs-12 col-mg-5 col-lg-12">
					<div class="form-group">
						<select onchange="teste(this);" data-toggle="modal" data-target="#modalAlteracao">
						<option value="0">Selecione um Set de Simulação...</option>
							<c:forEach var="dadosGeraisResult" items="${resultPage.result}" >
								<option value="${dadosGeraisResult.codigo}" >${dadosGeraisResult.nomeDoSet}</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>

Olhando para o select o unico lugar para colocar o data-target é na tag select não é?
só que o comportamento esta errado…e estou precisando selecionar o valor e clicar novamente

javaflex · Janeiro 23, 2018, 9:25am

Retira isso do seu select:

data-toggle="modal" data-target="#modalAlteracao"

É isso que faz o bootstrap clicar, entao apaga esse trecho e deixa só o onchange="teste(this)" como mostrei no exemplo.

Rodrigomazza · Janeiro 23, 2018, 11:05am

Bom dia,

Mas não é esse trecho que chama o modal?

javaflex · Janeiro 23, 2018, 11:26am

Isso permite ao bootstrap chamar a modal no click, como tinha explicado. Você quer chamar a modal no click ou no onchange afinal?

Isso chama o modal em qualquer evento que quiser: $("#modalAlteracao").modal();

<RESOLVIDO>Pegar valor selecionado em uma combo e abrir um modal

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI