[RESOLVIDO] Esconder modalPanel no RichFaces

PhilipeSC · Agosto 9, 2011, 7:20am

Bom Dia, tenho que terminar isso aqui onde trabalho e não sei mais o que fazer, se alguém tiver uma solução será de grande ajuda.

No meu JSF tenho um botão de cadastro, ele é um modalpane do richfaces. Esse botão possui uma chamada para outro modalpanel que verifica se os campos obrigatórios estão preenchidos. Se tiver ele não mostra nada, se faltar algum campo ele da uma mensagem dizendo que tal campo é obrigatório. Mas no meu botão eu também mando ele deixar o modalpanel de cadsatro visível. Dentro dele tem um commandcontrol mandando esconder ele. Só que depois que você da um OK no modalpanel de verificação, preenche os campos obrigatórios e da um CADASTRAR o modal panel não some, sendo que este tem um HIDE.

<%@include file="../../include/tagLibs.jsp"%>

<rich:modalPanel id="mpEndereco" width="500" autosized="true"
	moveable="true" resizeable="false">
	<f:facet name="header">
		<h:outputText value="Endereço" />
	</f:facet>
	<f:facet name="controls">
	</f:facet>
	<h:form id="formEndereco">

		<h:panelGroup id="panelGroupEndereco">
		
			<h:outputLabel 	id="outCEP" 
							value="CEP">
			</h:outputLabel>
			<h:inputText 	id="inCEP"
							value="#{DenunciaView.denuncia.denunEndereco.endCep}"
							disabled="#{DenunciaView.disableCep}" size="8" maxlength="8"
							required="true" 
							requiredMessage="Campo CEP obrigatório">
				<rich:jQuery 	selector="inCEP" 
								query="mask(99999-999)"
								timing="onload" />
				<f:converter 	converterId="converteCep"></f:converter>
				<a4j:support 	reRender="panelGroupEndereco" 
								event="onblur"
								action="#{DenunciaView.buscaPorCep}" ajaxSingle="true"
								focus="inLogradouro"></a4j:support>
			</h:inputText>

			<h:outputLabel 	id="outLogradouro" 
							value="Logradouro">
			</h:outputLabel>
			<h:inputText 	id="inLogradouro"
							value="#{DenunciaView.denuncia.denunEndereco.endLogradouro}"
							disabled="#{DenunciaView.disableLogradouro}" 
							required="true" 
							requiredMessage="Campo Logradouro obrigatório">
			</h:inputText>

			<h:outputLabel 	id="outNumero" 
							value="Número">
			</h:outputLabel>
			<h:inputText 	id="inNumero"
							value="#{DenunciaView.denuncia.denunEndereco.endNumero}"
							disabled="#{DenunciaView.disableNumero}"
							required="true" 
							requiredMessage="Campo Número obrigatório">
			</h:inputText>

			<h:outputLabel 	id="outUF" 
							value="UF">
			</h:outputLabel>
			<h:selectOneMenu 	id="somUF"
								value="#{DenunciaView.denuncia.denunEndereco.municipio.estado.estadUf}"
								disabled="#{DenunciaView.disableUF}"
								valueChangeListener="#{DenunciaView.populaComboBoxMunicipio}"
								required="true" 
								requiredMessage="Campo UF obrigatório">
				<f:selectItem 	itemLabel=" " />
				<f:selectItems	value="#{DenunciaView.cbEstadoMunicipio.comboxEstado}"/>
				<a4j:support 	reRender="somMunicipio" 
								event="onchange"
								ajaxSingle="true">
				</a4j:support>
			</h:selectOneMenu>

			<h:outputLabel 	id="outMunicipio" 
							value="Município">
			</h:outputLabel>
			<h:selectOneMenu	id="somMunicipio"
								value="#{DenunciaView.denuncia.denunEndereco.municipio.municCodigo}"
								disabled="#{DenunciaView.disableMunicipio}" 
								required="true"
								requiredMessage="Campo Município obrigatório">
				<f:selectItem 	itemValue=" " />
				<f:selectItems	value="#{DenunciaView.cbEstadoMunicipio.comboxMunicipio}" />
			</h:selectOneMenu>

			<h:outputLabel	id="outBairro" 
							value="Bairro">
			</h:outputLabel>
			<h:inputText 	id="inBairro"
							value="#{DenunciaView.denuncia.denunEndereco.endBairro}"
							disabled="#{DenunciaView.disableBairro}"
							required="true" 
							requiredMessage="Campo Bairro obrigatório">
			</h:inputText>

			<h:outputLabel 	id="outComplemento" 
							value="Complemento">
			</h:outputLabel>
			<h:inputText 	id="inComplemento"
							value="#{DenunciaView.denuncia.denunEndereco.endComplemento}"
							disabled="#{DenunciaView.disableComplemento}">
			</h:inputText>

			<h:outputLabel 	id="outCaixaPostal" 
							value="Caixa Postal">
			</h:outputLabel>
			<h:inputText 	id="inCaixaPostal"
							value="#{DenunciaView.denuncia.denunEndereco.endCaixaPostal}"
							disabled="#{DenunciaView.disableCaixaPostal}">
			</h:inputText>
			
			<a4j:commandButton 	id="cButtonCadastrar"
								value="Cadastrar!"
								disabled="#{DenunciaView.disableButtonCadastrarEndereco}" 
								action="#{DenunciaView.salvarEndereco}"
								oncomplete="#{rich:component('mpEndereco')}.show(),
											#{rich:component('mpMensagem')}.show()" 
								reRender="mpMensagem, formEndereco">
				<rich:componentControl 	id="ccCadastrar" 
										for="mpEndereco"
										attachTo="cButtonCadastrar"
										operation="hide"
										event="onclick">	
				</rich:componentControl>
			</a4j:commandButton>
			
			<a4j:commandButton 	value="Limpar"
								disabled="#{DenunciaView.disableButtonLimparEndereco}" 
								action="#{DenunciaView.limparCampos}"
								reRender="formEndereco"
								ajaxSingle="true">
			</a4j:commandButton>
		
		</h:panelGroup>
	</h:form>
</rich:modalPanel>

Aqui é o modalPanel que verifica se os campos com o required são obrigatórios.

<%@include file="../include/tagLibs.jsp"%> 

<rich:modalPanel id="mpMensagem" width="500" autosized="true" moveable="true" resizeable="false">
    <f:facet name="header">
        <h:outputText value="Mensagem"/>
    </f:facet>
    <f:facet name="controls">
        <h:graphicImage onclick="#{rich:component('mpMensagem')}.hide()" 
        				value="images/close.png" styleClass="hidelinks" />                            
    </f:facet>
    <h:form>   
        <h:messages id="erros" styleClass="msgFatal" fatalClass="msgFatal" infoClass="msgInfo" />
        <br/>
        <div align="center">
        	<a4j:commandLink id="btMsgOK" oncomplete="#{rich:component('mpMensagem')}.hide()">
        		<h:graphicImage id="imgMsgOK" style="cursor:pointer" value="images/btOk.png" />
        	</a4j:commandLink>
       	</div>                            
    </h:form>   
</rich:modalPanel>

gustavoliveira · Agosto 9, 2011, 7:45am

Pelo que eu entendi vc pede pra fechar no component control com o hide, mas pede pra abrir quando complete o action com o oncomplete… acho que por isso que esta ficando aberto…

PhilipeSC · Agosto 9, 2011, 7:58am

mas ele não devia ser executado de modo hierarquico? Tipo deixa o panel mostrado na tela, se algum campo obrigatorio não for preenchido, senao esconde o panel

ja era pra ter entregue isso na sexta :S

Dan_xD · Agosto 9, 2011, 8:31am

Note que você tem faz 3 coisas no seu Botão, dentre elas a primeira a ser disparada será o onClick(), em seguida vai ser disparado o seu Action e finalizando pelo seu onComplete().

Não se esqueça da ordem dos eventos.

Seguindo a lógica, ele vai primeiro fechar o MP, executar sua Action e Abrir o MP.

Esta um pouco fora de ordem os eventos.

gustavoliveira · Agosto 9, 2011, 8:33am

exato Dan… logo… o Modal ficara aberto…

rock · Agosto 9, 2011, 8:37am

Phillipe, o Dan e o gustavo estão certos :!:

tente mudar para algo assim:

<script type="text/javascript">
function exibeEscondeModais(hasError) {
  if(hasError) {
    Richfaces.showModalPanel('mpMensagem');
  } else {
    Richfaces.hideModalPanel('mpEndereco');
  }
}
</script>
<a4j:commandButton   id="cButtonCadastrar"  
  value="Cadastrar!"  
  disabled="#{DenunciaView.disableButtonCadastrarEndereco}"   
  action="#{DenunciaView.salvarEndereco}"  
  oncomplete="exibeEscondeModais(#{not empty facesContext.maximumSeverity})"   
  reRender="mpMensagem, formEndereco">
</a4j:commandButton>

PhilipeSC · Agosto 9, 2011, 8:37am

Pessoal mudei um pouco a lógica mas não está funcionando.

			<a4j:commandButton 	id="cButtonCadastrar"
								value="Cadastrar!"
								disabled="#{DenunciaView.disableButtonCadastrarEndereco}" 
								action="#{DenunciaView.salvarEndereco}"
								oncomplete="#{rich:component('mpMensagem')}.show()" 
								reRender="mpMensagem, formEndereco">
				<rich:componentControl 	id="ccCadastrar" 
										for="mpEndereco"
										rendered="#{DenunciaView.enderecoOK==true}"
										
										attachTo="cButtonCadastrar"
										operation="hide"
										event="onclick">	
				</rich:componentControl>
			</a4j:commandButton>

O rendered não funciona, ele está ok e nada.

olhem o método:

	public void salvarEndereco() {
		System.out.println(denuncia.getDenunEndereco().getEndBairro());
		System.out.println(denuncia.getDenunEndereco().getEndLogradouro());
		System.out.println(denuncia.getDenunEndereco().getEndNumero());
		System.out.println(denuncia.getDenunEndereco().getEndCep());
		System.out.println(denuncia.getDenunEndereco().getMunicipio().getMunicDescricao());
		System.out.println(denuncia.getDenunEndereco().getMunicipio().getEstado().getEstadDescricao());
		if(!denuncia.getDenunEndereco().getEndBairro().equals("")) {
			enderecoOK = true;
			System.out.println("ENTROU NO IF");
		}else {
			System.out.println("ENTROU NO ELSE");
			enderecoOK = false;
		}

No console ele mostra que entrou no IF.

gustavoliveira · Agosto 9, 2011, 8:40am

Eu num sei como esta o design do seu sistema ai… mas cara num seria melhor vc dar essas mensagem acima do campo sem precisar abrir um modal para dizer que tal campo precisa ser preenchido?.. tipo assim


<h:message for="teste"/>
<h:inputText id="teste"  required="true" requiredMessage="Obrigatório"/>

raf4ever · Agosto 9, 2011, 8:41am

tenta trocar isso:

oncomplete="#{rich:component('mpMensagem')}.show()"

pra isso:

onclick="Richfaces.showModalPanel('mpMensagem');"

Dan_xD · Agosto 9, 2011, 8:44am

Philipe, note que você ainda continua tentando fechar no ONCLICK, ou seja, no primeiro evento que está sendo disparado.

O seu rendered está pegando o valor ANTES do seu Action. Ele está pegando o valor que a variavel enderecoOK tem na hora que você instanciou e não na hora que ela sofreu a atribuição no Action.

Note que ela não faz diferença. Pois o seu MP vai estar fechado já. Ele apenas está tentando fechar um MP que JÁ está fechado no primeiro evento, o certo seria no Ultimo.

Tente utilizar a forma de chamar o erro como o amigo rock te mostrou, com certeza vai funcionar se chamado corretamente.

[edit]

Aproveitando o que o amigo raf4ever sugeriu

Mude também:

<rich:componentControl   id="ccCadastrar"   
                            for="mpEndereco"  
                            rendered="#{DenunciaView.enderecoOK==true}"  
                              
                            attachTo="cButtonCadastrar"  
                            operation="hide"  
                            event="oncomplete">   
    </rich:componentControl>

PhilipeSC · Agosto 9, 2011, 9:06am

Valeu pessoal deu certo a todos que ajudaram.

[code]
<a4j:commandButton id=“cButtonCadastrar”
value=“Cadastrar!”
disabled="#{DenunciaView.disableButtonCadastrarEndereco}"
action="#{DenunciaView.salvarEndereco}"
oncomplete=“exibeEscondeModais(#{DenunciaView.enderecoOK})”
reRender=“mpMensagem, formEndereco”>
</a4j:commandButton>

		<a4j:commandButton 	value="Limpar"
							disabled="#{DenunciaView.disableButtonLimparEndereco}" 
							action="#{DenunciaView.limparCampos}"
							reRender="formEndereco"
							ajaxSingle="true">
		</a4j:commandButton>

[/code]

gustavoliveira · Agosto 9, 2011, 9:42am

Da para você fazer assim tambem:


<a4j:commandButton   id="cButtonCadastrar"   
                                value="Cadastrar!"   
                                disabled="#{DenunciaView.disableButtonCadastrarEndereco}"   
                                action="#{DenunciaView.salvarEndereco}"   
                                data="#{facesContext.maximumSeverity.ordinal ge 2}"                                
                                oncomplete="if(data == false) Richfaces.hideModalPanel('iddoModal');"
                                reRender="mpMensagem, formEndereco">   
            </a4j:commandButton>

assim vc estaria verficando se deu algum erro no context e não fecharia o modal… só fecharia se não tiver nenhum erro no contexto…

PhilipeSC · Agosto 9, 2011, 12:15pm

Pessoal a tela principal que chama esse modalpanel é um input, olha como ela está:

<h:outputLabel id="outEndereco" value="Endereço" /> <h:inputText id="inEndereco" value= "#{DenunciaView.denuncia.denunEndereco.endCep} - #{DenunciaView.denuncia.denunEndereco.endLogradouro} - #{DenunciaView.denuncia.denunEndereco.endNumero}"> <a4j:support oncomplete="#{rich:component('mpEndereco')}.show()" event="onclick" reRender="mpEndereco" ajaxSingle="true" focus="inCEP" /> </h:inputText>

Só que não está mostrando no inputtext o valor que foi cadastrado no modalpanel.

no modal panel ao cadastrar eu estou dando um reRender no form que tá chamando mas nao esta funcionando

o codigo que está renderizando a tela que chamou é este:

			<a4j:commandButton 	id="cButtonCadastrar"
								value="Cadastrar!"
								disabled="#{DenunciaView.disableButtonCadastrarEndereco}" 
								action="#{DenunciaView.salvarEndereco}"
								oncomplete="exibeEscondeModais(#{DenunciaView.enderecoOK})"
								data="#{facesContext.maximumSeverity.ordinal ge 2}" 
								reRender="mpMensagem, formEndereco, form1">
			</a4j:commandButton>

gustavoliveira · Agosto 9, 2011, 12:21pm

Cara, tenta ver pelo navegador qual o id real desse input que pode estar tipo assim form:inEndereco ai copia e ve se funfa

PhilipeSC · Agosto 9, 2011, 12:34pm

14:02:01,512 SEVERE [component] /pages/indexFiscalizacao.jsp(124,5) ‘#{DenunciaView.denuncia.denunEndereco.endCep} -
#{DenunciaView.denuncia.denunEndereco.endLogradouro} -
#{DenunciaView.denuncia.denunEndereco.endNumero}’ Illegal Syntax for Set Operation
14:02:01,528 INFO [lifecycle] WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=formPrincipal:inEndereco[severity=(ERROR 2), summary=(/pages/indexFiscalizacao.jsp(124,5) ‘#{DenunciaView.denuncia.denunEndereco.endCep} -
#{DenunciaView.denuncia.denunEndereco.endLogradouro} -
#{DenunciaView.denuncia.denunEndereco.endNumero}’ Illegal Syntax for Set Operation), detail=(/pages/indexFiscalizacao.jsp(124,5) ‘#{DenunciaView.denuncia.denunEndereco.endCep} -
#{DenunciaView.denuncia.denunEndereco.endLogradouro} -
#{DenunciaView.denuncia.denunEndereco.endNumero}’ Illegal Syntax for Set Operation)]

Ta dando esse erro :S

Tentei assim e o erro muda

h:inputText	id="inEndereco" 
									value=	"#{DenunciaView.denuncia.denunEndereco.endCep DenunciaView.denuncia.denunEndereco.endLogradouro DenunciaView.denuncia.denunEndereco.endNumero}">
						<a4j:support	oncomplete="#{rich:component('mpEndereco')}.show()"
										event="onclick" 
										reRender="mpEndereco" 
										ajaxSingle="true"
										focus="inCEP" >
						</a4j:support>
					</h:inputText>

e o erro é este:

org.apache.jasper.JasperException: /pages/indexFiscalizacao.jsp(124,5) “#{DenunciaView.denuncia.denunEndereco.endCep DenunciaView.denuncia.denunEndereco.endLogradouro DenunciaView.denuncia.denunEndereco.endNumero}” contains invalid expression(s): javax.el.ELException: Error Parsing: #{DenunciaView.denuncia.denunEndereco.endCep DenunciaView.denuncia.denunEndereco.endLogradouro DenunciaView.denuncia.denunEndereco.endNumero}

gustavoliveira · Agosto 9, 2011, 12:40pm

Inves disso:

#{DenunciaView.denuncia.denunEndereco.endCep} - 
#{DenunciaView.denuncia.denunEndereco.endLogradouro} - 
#{DenunciaView.denuncia.denunEndereco.endNumero}'

Tenta isso

"#{DenunciaView.denuncia.denunEndereco.endCep - DenunciaView.denuncia.denunEndereco.endLogradouro - DenunciaView.denuncia.denunEndereco.endNumero}"

gustavoliveira · Agosto 9, 2011, 12:42pm

É só essa sintaxe que esta errada :

#{DenunciaView.denuncia.denunEndereco.endCep} - 
#{DenunciaView.denuncia.denunEndereco.endLogradouro} - 
#{DenunciaView.denuncia.denunEndereco.endNumero}'

PhilipeSC · Agosto 9, 2011, 12:56pm

javax.servlet.ServletException: For input string: “TRINTA E UM DE MARCO”
javax.faces.webapp.FacesServlet.service(FacesServlet.java:277)
org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:206)
org.ajax4jsf.webapp.BaseFilter.handleRequest(BaseFilter.java:290)
org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(BaseFilter.java:388)
org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:515)
brd.sinfam.filters.HibernateFilter.doFilter(HibernateFilter.java:35)
brd.sinfam.util.UserLogado.doFilter(UserLogado.java:53)
org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)

root cause

java.lang.NumberFormatException: For input string: “TRINTA E UM DE MARCO”

tentei fazer como você falou e da erro de NumberFormat, vi que o - (hifen) na EL ele vai usar como subtraçao :S

Pelo visto nao vai dar de fazer, então criei uma String no meu ManagedBean e concatenei esses valores no value e funcionou.

Valeu de novo ae pra qm ajudou XD

Dan_xD · Agosto 9, 2011, 1:08pm

Philipe, posso estar falando alguma coisa errado, mas pelo que me lembro (Faz um tempo que não trabalho com JSF e trabalhei com o 1.2) você NÃO pode utilizar no value de um inputtext varios atributos diferentes ao mesmo tempo, por que ele não saberia aonde realizar o SET do valor. Tente colocar só:

<h:inputText id="inEndereco"   
                                value=  "#{DenunciaView.denuncia.denunEndereco.endCep}">  
                    <a4j:support oncomplete="#{rich:component('mpEndereco')}.show()"  
                        event="onclick" reRender="mpEndereco" ajaxSingle="true"  
                        focus="inCEP" />  
                </h:inputText>

Só para efeito de teste.

PhilipeSC · Agosto 9, 2011, 1:10pm

Sim do seu jeito funciona (era o q eu estava usando)

Para resolver o problema criei uma String no meu managed bean e concatenei o que eu queria.

Dai chamei essa string concatenada e funcionou.

Valeu ae pra qm ajudou XD

Qm sabe um dia nao sou eu tirando duvidas de JSF XD

[RESOLVIDO] Esconder modalPanel no RichFaces

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