Boa tarde! Tenho a seguinte situação estou usando JSF e foi solicitado para que seja lido uma tabela com dois item ou até quatros itens e criar os botões dinamicamente conforme o numero de itens colocando o Label deles deve ser o valor de cada item e depois que tiver com os botoes ao clicar neles fazer a ação de selecionar submeter passando o valor do Label para aplicação, tem como?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas
respostas
Criar Botão dinâmico
Fala Jorge, tudo bom?
Não sei ao certo se entendi corretamente o que você quer, mas vamos conversando para chegarmos em alguma solução! :D
Pelo que eu entendi você tem uma tabela e deseja criar um botão para cada item dessa tabela, sendo que o label desses inputs devem ser o valor de cada item.
Em javascript, podemos utilzar template string para definir um conteúdo HTML bem definido que será utilizado durante a execução do nosso código (exatamente esse caso)
Template String
A sintaxe de uma template string são esses backsticks ` e podemos concatenar valores de variáveis utilizando o ${}
`
<html> ${variável}</html>
`Então o que você teria que fazer?
Então, primeiro você precisa recuperar todos os elementos utilizando javascript (uma lista), tendo essa lista em mãos, você precisará iterar por essa lista executando sua lógica para cada item. Lógica essa que recuperará o valor do item para substituir na template String onde estiver seu label! Após todas essas atribuições, você poderá inserir a sua template String na tela tendo como referência o próprio elemento daquele momento de iteração ou da maneira que desejar!
Caso não seja essa sua dúvida, só falar que vou tentar te ajudar!
De qualquer forma, espero ter ajudado!
Abraços e bons estudos!!
Paulo bom dia,
então criei os dois botoes na na table dai vou usar os métodos action pra fazer os eventos espero que der certo, quais quer coisa te chamo! obrigado pela ajuda.
Paulo, bom dia!
<h:form id="formLista" style="font-size: 12px; width: 1300px">
<p:dataTable var="movimento" value="#{etiqRoboBean.listaMovtoDiario}"
scrollable="true" scrollHeight="250" >
<p:column headerText="Item" style="width:130px" >
<h:outputText value="#{movimento.itCodigo}" />
</p:column>
<p:column headerText="Descrição" width="350px">
<h:outputText value="#{movimento.descricao}" />
</p:column>
<p:column headerText="Quantidade" width="100px">
<h:outputText value="#{movimento.quantidade}" />
</p:column>
<p:column headerText="Reportar Item" style="text-align: center; width: 150px">
<h:commandButton value="Reportar" action="#{movimento.reportarLinha}" style="height: 50px; width: 150px ; background-color: blue" />
</p:column>
<p:column headerText="Refugar Item" style="text-align: center; width: 150px">
<h:commandButton value="Refugar" ajax="false" global="true" onclick="PF('cadRefugo').show()" style="height: 50px; width: 150px ; background-color: red" />
</p:column>
</p:dataTable>
<p:dialog widgetVar="cadRefugo" maximizable="false" width="600" height="250"
responsive="true" dynamic="false" appendTo="@(body)">
<h:panelGrid columns="2">
<p:graphicImage library="img" name="logo.png" width="300px" height="50px" style="position:absolute; right: 10px; top: 15px"/>
<p:outputLabel value="#{etiqRoboBean.estacaoLogada}" id="estacaologada1"
style="font-size: 20px; color:black;right: 100px;position:absolute;top: 95px" />
</h:panelGrid>
<p:commandButton id="btnSalvar" value="Salvar" ajax="false" actionListener="#{etiqRoboBean.refugar}" >
</p:commandButton>
</p:dialog>
</h:form>Paulo, veja se pode me ajudar fiz este codigo ai, mais tenho um problema quando abre a Dialog demora alguns segundos e fecha, não queria que ela fechasse, somente quando eu clicar em um botão como posso deixar esta dialog sem ser automatica
Fala Jorge! Tudo bom?
Não conheço muito de JSF mas vamos lá!
Esses commandButton são renderizados como uma tag button com type="submit", isso fará com que sua página recarregue e seu dialog suma.
O evento de onclick é acionado antes da requisição de submit do seu form, o atributo update é acionado depois que recebemos o response. Tente modificar o onclick do commandButton para oncomplete e veja se dá certo! Isso fará com que seu Dialog seja exibido depois que as requisições aconteçam!
Acredito que seja esse reload que esteja sumindo com seu Dialog!
Espero ter ajudado Jorge!
Um abraço e bons estudos amigo!
Paulo, value funcionou perfeitamente, mais só tenho mais um probleminha quando entro na tela e clico em qualquer uma das linhas nao consigo selecionar o id mais quando clico pela segunda vez dai consigo qualquer ID
solução!
este é meu código...
<h:form id="formLista" style="font-size: 12px; width: 1300px">
<p:dataTable id="dtItens" var="movimento" value="#{etiqRoboBean.listaMovtoDiario}"
scrollable="true" scrollHeight="250" >
<p:column headerText="Item" style="width:130px" >
<h:outputText value="#{movimento.itCodigo}" />
</p:column>
<p:column headerText="Descrição" width="350px">
<h:outputText value="#{movimento.descricao}" />
</p:column>
<p:column headerText="Quantidade" width="100px">
<h:outputText value="#{movimento.quantidade}" />
</p:column>
<p:column headerText="Reportar Item" style="text-align: center; width: 150px">
<h:commandButton value="Reportar" action="#{movimento.reportarLinha}" style="height: 50px; width: 150px ; background-color: blue" />
</p:column>
<p:column headerText="Refugar Item" style="text-align: center; width: 150px">
<p:commandButton value="Refugar" update=":formLista:itemDetail" oncomplete="PF('cadRefugo').show()" title="Refugar"
style="height: 50px; width: 150px ; background-color: red" >
<f:setPropertyActionListener value="#{movimento}" target="#{etiqRoboBean.selectedItem}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog widgetVar="cadRefugo" modal="true" showEffect="fade" hideEffect="fade" maximizable="false"
width="600" height="250" responsive="true" dynamic="true" appendTo="@(body)">
<p:outputPanel id="itemDetail" style="text-align:center;">
<h:panelGrid columns="2">
<p:graphicImage library="img" name="logo.png" width="300px" height="50px" style="position:absolute; right: 10px; top: 15px"/>
<p:outputLabel value="#{etiqRoboBean.estacaoLogada}" id="estacaologada1"
style="font-size: 20px; color:black;right: 100px;position:absolute;top: 95px" />
<p:outputLabel value=" Item: " for="item" />
<p:inputText id="item" value="#{etiqRoboBean.selectedItem.itCodigo}" size="16" disabled="true"/>
</h:panelGrid>
<p:commandButton id="btnSalvar" value="Salvar" ajax="false" actionListener="#{etiqRoboBean.refugar}" >
</p:commandButton>
<p:commandButton
id="btCancela" value="Cancela"
icon="ui-icon-disk" styleClass="botao-parametro"
oncomplete="PF('cadRefugo').hide();"
/>
</p:outputPanel>
</p:dialog>Oi Jorge!
Isso está ocorrendo em vários navegadores?
Abraços!
Olá, obrigado!
Já solucionei