Utilizando o rowSelect para abrir um Outpupanel [RESOLVIDO]

cleberw3b · Março 13, 2013, 1:16pm

Estou com a seguinte duvida, quando eu clico na linha do meu DataTable era para exibir um outputpanel com campos para realizar a resposta. Mas o row fica selecionado sem aparecer.

[code]<h:form id=“form”>

		<div id="total" style="padding: 10px;">
			<div id="title" style="font-size: 18px; padding: 10px;">
				<h:outputLabel value="#{msgs['field.label.responder.solicitacao.title']}" />
			</div>
			
			<div id="prega" align="left" style="font-size:12px; padding: 10px;">
				<h:outputLabel value="#{msgs['field.label.responder.solicitacao.pregao']}" />
				<h:outputText value="#{responderSolicitacaoBean.pregao.numeroPregao}" />
				<hr style="width=90%; noshade" />
			</div>
			
			<div id="responderSolicitacao" style="padding: 10px;">
				<p:dataTable id="respostas" var="solicitacao" value="#{responderSolicitacaoBean.solicitacoes}"
							 selectionMode="single" selection="#{responderSolicitacaoBean.solicitacao}" rowKey="#{solicitacao.id}">
							 
					<p:ajax event="rowSelect" update=":form:panel"/>  
			        <p:ajax event="rowUnselect" update=":form:panel" oncomplete="panel.hide()"/>
					<p:column headerText="Data">
						<h:outputText value="#{solicitacao.dataSolicitacao}" />
					</p:column>
					<p:column headerText="Descricao" style="width: 40%;">
						<h:outputText value="#{solicitacao.descricao}" />
					</p:column>
					<p:column headerText="Tipo de Solicitacao">
						<h:outputText value="#{solicitacao.tipoSolicitacao.label}" />
					</p:column>
					<p:column headerText="Participante">
						<h:outputText value="#{solicitacao.participante.apelido}" />
					</p:column>
				</p:dataTable>
				<br/>
				<hr style="width=90%; noshade"/>
			</div>
			<div id="outpanel" style="padding: 10px;">
				<p:outputPanel id="panel" autoUpdate="true" layout="block">
                                             <h:outputText value="Está funcionando o outputpanel" />
				</p:outputPanel>
			</div>

		</div>
					
	</h:form>[/code]

Alguém tem alguma ideia.

gustavo_souza · Março 13, 2013, 1:24pm

Olá Cleber,

O outputPanel não é um popUp, nesse caso você tem usuar o componente dialog do primefaces.

Dá uma olhada nesse cara aqui : http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf


<p:ajax event="rowSelect" oncomplete="carDialog.show()" />

 <p:dialog id="dialog" widgetVar="carDialog" ...>

...
</p:dialog>

Espero ter ajudado,

um abraço

cleberw3b · Março 13, 2013, 1:26pm

Mas só funciona com dialog?

Se for assim vou ter que usar butao ou link.

gustavo_souza · Março 13, 2013, 1:30pm

não … você pode ver no exemplo (http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf) que eles não estão usando botoes nem links, o próprio click na linha da DataTable abre o dialog.

Tem esse outro cara aqui que trabalha com o atributo render, mas eu acho que esse não é o seu caso. (http://www.primefaces.org/showcase/ui/outputPanel.jsf)

cleberw3b · Março 13, 2013, 1:44pm

Eu tinha visto os dois, o que eu preciso é que quando o user click na linha, ou botao na linha, abra um outputpanel abaixo do datatable para ele efetuar a resposta.

Tipo essa resposta rapida aqui do forum, mas pegando as informações da linha em que foi clicado.

Não queria ter que fazer uma nova pagina e um novo Bean para isso.

gustavo_souza · Março 13, 2013, 1:52pm

Mas Cleber , você nao precisa criar uma nova página , muito menos um novo Bean, vou te mostrar como ficaria no seu codigo:


<h:form id="form">  
              
            <div id="total" style="padding: 10px;">  
                <div id="title" style="font-size: 18px; padding: 10px;">  
                    <h:outputLabel value="#{msgs['field.label.responder.solicitacao.title']}" />  
                </div>  
                  
                <div id="prega" align="left" style="font-size:12px; padding: 10px;">  
                    <h:outputLabel value="#{msgs['field.label.responder.solicitacao.pregao']}" />  
                    <h:outputText value="#{responderSolicitacaoBean.pregao.numeroPregao}" />  
                    <hr style="width=90%; noshade" />  
                </div>  
                  
                <div id="responderSolicitacao" style="padding: 10px;">  
                    <p:dataTable id="respostas" var="solicitacao" value="#{responderSolicitacaoBean.solicitacoes}"  
                                 selectionMode="single" selection="#{responderSolicitacaoBean.solicitacao}" rowKey="#{solicitacao.id}">  
                                   
                        <p:ajax event="rowSelect"  oncomplete="dialogPanel.show()"/>    
                        <p:ajax event="rowUnselect" />  
                        <p:column headerText="Data">  
                            <h:outputText value="#{solicitacao.dataSolicitacao}" />  
                        </p:column>  
                        <p:column headerText="Descricao" style="width: 40%;">  
                            <h:outputText value="#{solicitacao.descricao}" />  
                        </p:column>  
                        <p:column headerText="Tipo de Solicitacao">  
                            <h:outputText value="#{solicitacao.tipoSolicitacao.label}" />  
                        </p:column>  
                        <p:column headerText="Participante">  
                            <h:outputText value="#{solicitacao.participante.apelido}" />  
                        </p:column>  
                    </p:dataTable>  
                    <br/>  
                    <hr style="width=90%; noshade"/>  
                </div>  

<p:dialog id="dialog" header="Dialog Resposta" widgetVar="dialogPanel" >                
  
         <div id="outpanel" style="padding: 10px;">  
                    <p:outputPanel id="panel" autoUpdate="true" >  
                                                 <h:outputText value="Está funcionando o outputpanel" />  
                    </p:outputPanel>  
                </div>  
</p:dialog>                          
        </h:form>

Copia e cola esse código de cima.

cleberw3b · Março 13, 2013, 2:02pm

Valeu cara, vou ver se essa especificação comporta no meu projeto.

Abraço.

gustavo_souza · Março 13, 2013, 2:09pm

Cléber , caso você queira manter o seu codigo antigo, sem o uso do dialog, eu achei o erro nele.
Na linha 18 : <p:ajax event=“rowSelect” update=":form:panel"/> a referência para o id panel está errado, você não precisa colocar os “:” antes do form, porque o componente que você quer dar o update já está dentro do form , então tenta isso:

<p:ajax event=“rowSelect” update=“panel”/>

Nesse caso não precisaria do autoupdate=“true” no outputpanel, porque esse autoupdate=“true” só atualiza o componente automaticamente se você renderizar a tela (ou o componente), é muito usado dentro de dialogs.

Depois avisa se deu certo .

Um abraço !

cleberw3b · Março 13, 2013, 2:16pm

POHAAAA MAN…

Era exatamente isso que eu queria.

VAleuuuuu.

Funcionou perfeitamente.

Para quem quiser o código, segue abaixo:

<h:form id="form">
			
			<div id="total" style="padding: 10px;">
				<div id="title" style="font-size: 18px; padding: 10px;">
					<h:outputLabel value="#{msgs['field.label.responder.solicitacao.title']}" />
				</div>
				
				<div id="prega" align="left" style="font-size:12px; padding: 10px;">
					<h:outputLabel value="#{msgs['field.label.responder.solicitacao.pregao']}" />
					<h:outputText value="#{responderSolicitacaoBean.pregao.numeroPregao}" />
					<hr style="width=90%; noshade" />
				</div>
				
				<div id="responderSolicitacao" style="padding: 10px;">
					<p:dataTable id="respostas" var="solicitacao" value="#{responderSolicitacaoBean.solicitacoes}"
								 selectionMode="single" selection="#{responderSolicitacaoBean.solicitacao}" rowKey="#{solicitacao.id}">
						
<!-- 						<p:ajax event="rowSelect"  oncomplete="dialogPanel.show()"/>       -->
                        <p:ajax event="rowSelect" update="panel"/>
                        <p:ajax event="rowUnselect" />
                        							 
						<p:column headerText="Data">
							<h:outputText value="#{solicitacao.dataSolicitacao}" />
						</p:column>
						<p:column headerText="Descricao" style="width: 40%;">
							<h:outputText value="#{solicitacao.descricao}" />
						</p:column>
						<p:column headerText="Tipo de Solicitacao">
							<h:outputText value="#{solicitacao.tipoSolicitacao.label}" />
						</p:column>
						<p:column headerText="Participante">
							<h:outputText value="#{solicitacao.participante.apelido}" />
						</p:column>
					</p:dataTable>
					<br/>
					<hr style="width=90%; noshade"/>
				</div>
				
<!-- 				<p:dialog id="dialog" header="Dialog Resposta" widgetVar="dialogPanel" >                   -->
    
	         		<div id="outpanel" style="padding: 10px;">    
	                    <p:outputPanel id="panel" autoUpdate="true" >
	                    	<div>	                    	
		                    	<div align="left">
		                    		<h:outputText value="#{responderSolicitacaoBean.solicitacao.descricao}" />
		                       	</div>
		                       	<div align="right">
		                       		<h:outputText value="#{responderSolicitacaoBean.solicitacao.descricao}" />
		                       	</div>
		                       	<div align="center">
		                       		<h:outputText value="#{responderSolicitacaoBean.solicitacao.descricao}" />
		                       	</div>
	                       	</div>                 	
	                    </p:outputPanel>    
	                </div>    
<!-- 				</p:dialog>         -->
			</div>
						
		</h:form>

gustavo_souza · Março 13, 2013, 2:30pm

Que bom cara,

Coloca no assunto do post como [resolvido]

system · Dezembro 30, 2015, 5:33pm

Utilizando o rowSelect para abrir um Outpupanel [RESOLVIDO]

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