Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

vanermiranda

Duplicar campos ou formulário dinamicamente no Primefaces

Recommended Posts

Boa tarde colegas.

 

Estou iniciando na área de programação deparei com um problema.

Tenho um formulário de cadastro onde quero cadastrar uma empresa e todos os seus endereços . 

Eu estive pensando naqueles botões (+) que adiciona campos, mas nesse caso eu precisaria de clonar toda a parte de endereços. E se eu fosse editar, buscaria a empresa, e o formulário me possibilitaria cadastrar novos endereços

 

Gostaria da opinião de vocês de como proceder.

 

A ideia é parecida com a duplicação de campos que encontrei no fórum, mas para vários campos: https://forum.imasters.com.br/topic/325267-resolvido-adicionar-remover-campos-dinamicamente/

 

Estou usando o Primefaces e alguns me sugeriram criar uma DataTable onde através de um formulário  eu vou cadastrando esses endereços que depois são persistidos no banco, mas não estou conseguindo. 

Agradeço desde já.

 

Abraço a todos.

 

Vaner Miranda

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por alexroses
      Por favor, preciso de ajuda! Autocomplete funciona, meu problema é com os seletores jquery para campos dinâmicos...   Peço a ajuda de alguém para me ensinar a fazer seletor Jquery funcionar com campos dinâmicos... Eu crio linhas no formulário a partir de um evento que define a quantidade de linhas a nota terá... a partir dai ele cria as linhas e o primeiro campo tem um autocomplete, que funciona! Os demais campos utilizam a informação do auto complete para preencher o restante das informações... Eu crio um looping para criar as linhas e defino as requisições ajax no javascript ... O problema acontece quando seleciono o autocomplete nas linhas adicionais... Por causa do seletor dos campos terem o nome igual... Ou ele muda as informações em todas as demais linhas de uma vez, ou se eu usar eq(z) como seletor ele só altera as demais informações na ultima linha... Já tentei de tudo que se possa imaginar... Preciso de ajuda... O problema é como definir o seletor dos campos dinâmicos, pois tem a mesma class e name... <div id="origem"> <div class="row"> <div class="col col-md-3"> <div class="input-group"> <input type="text" class="auto form-control" id="autoprod" name="prod[0]" placeholder="Produto..."> <input type="hidden" id="prodid" name="prodid[0]" value="0"> <script type="text/javascript"> $(document).ready(function(){ var i = 0; $('#autoprod').eq(i).autocomplete({ source: function(request, response) { $.ajax({ url:'<?php echo base_url().'Compras/prodList'; ?>', type: 'post', dataType: 'json', data: { search: request.term }, success: function(data){ response(data); } }); }, select: function(event, ui){ $('#autoprod').eq(i).val(ui.item.label); $('#prodid').val(ui.item.value); $('#marca').val(ui.item.marc); $('#unit').val(ui.item.uni); return false; } }); }); </script> </div> </div> <div class="col col-md-2"> <div class="input-group"> <input type="text" class="form-control" id="marca" name="marca[0]" placeholder="Marca..." readonly> </div> </div> <div class="col"> <div class="input-group"> <input type="hidden" class="form-control" id="unit" name="unit[0]" placeholder="Unidade..." readonly> <input type="text" class="form-control" id="lugar" name="unit2[0]" placeholder="Unidade..." readonly> <script type="text/javascript"> $(document).ready(function(){ $("#autoprod").on('blur', function() { var txt = $('#unit').val(); var jtxt = { 'valor1': txt }; $.ajax({ url: '<?php echo base_url()."Compras/ajax"; ?>', type: 'post', data: jtxt, dataType:'json', success:function(resultado) { $("#lugar").val(resultado[0].nome_unit); }, error:function(){ alert("Este produto não existe... Preencha corretamente o formulário!"); }, }); }); }); </script> </div> </div> <div class="col"> <div class="input-group"> <input type="text" class="form-control money2" maxlength="15" id="valorunit" name="valorunit[0]" pattern="^$?[0-9]+(,[0-9]{3})*(.[0-9]{2})?$" onkeydown="function(money2);" placeholder="Preço Unit. (R$)" required> </div> </div> <div class="col"> <div class="input-group"> <input type="number" class="form-control" id="quant" name="quant[0]" min="1" max="999" placeholder="Quantidade" onblur="mult()" value="1" required> </div> </div> <div class="col"> <div class="input-group"> <input type="text" class="form-control money2" maxlength="15" id="totalp" name="totalp[0]" onfocus="function(money2);" placeholder="Total (R$)" required readonly> </div> <script type="text/javascript"> function id(valor_campo) { return document.getElementById(valor_campo); } function getValor(valor_campo) { var valor = document.getElementById(valor_campo).value.replace('.',''); valor = valor.replace(',','.'); return parseFloat(valor); } function mult() { var total = getValor('valorunit') * getValor('quant'); id('totalp').value = total.toFixed(2); } </script> </div> </div> </br> </div> <div id="destino"> </div> Restante de formulário: <script type="text/javascript"> $(document).ready(function(){ $("#qt").on('blur', function(e) { e.preventDefault(); document.getElementById("qt").readOnly = true; document.getElementById("destino").innerHTML=""; var qtr = $("#qt").val(); var i = 1; while (i < qtr) { var z = i - 1; var t = '<div class="row">\<div class="col-3">\<div class="input-group">\<input type="text" class="autot form-control" name="prod[0]" placeholder="Produto...">\<input type="hidden" class="idr" name="prodid[0]" value="0">\</div></div>\<div class="col-2">\<div class="input-group">\<input type="text" class="nname form-control" name="marca[0]" placeholder="Marca..." readonly>\</div></div>\<div class="col">\<div class="input-group">\<input type="hidden" class="uunit form-control" name="unit[0]" placeholder="Unidade..." readonly>\<input type="text" class="form-control" id="lugar" name="unit2[0]" placeholder="Unidade..." readonly>\</div></div>\<div class="col">\<div class="input-group">\<input type="text" class="form-control money2" maxlength="15" id="valorunit" name="valorunit[0]" pattern="^$?[0-9]+(,[0-9]{3})*(.[0-9]{2})?$" onkeydown="function(money2);" placeholder="Preço Unit. (R$)" required>\</div></div>\<div class="col">\<div class="input-group">\<input type="number" class="form-control" id="quant" name="quant[0]" min="1" max="999" placeholder="Quantidade" onblur="mult()" value="1" required>\</div></div>\<div class="col">\<div class="input-group">\<input type="text" class="form-control money2" maxlength="15" id="totalp" name="totalp[0]" onfocus="function(money2);" placeholder="Total (R$)" required readonly>\</div></div></div></br>'; $("#destino").append(t); $('.autot').autocomplete({ source: function(request, response) { $.ajax({ url:'<?php echo base_url().'Compras/prodList'; ?>', type: 'post', dataType: 'json', data: { search: request.term }, success: function(data){ response(data); } }); }, select: function(event, ui){ $(this).val(ui.item.label); $('.idr').val(ui.item.value); $('.nname').val(ui.item.marc); $('.uunit').val(ui.item.uni); return false; } }); i = i + 1; } }); }); </script> </br></br>  
      LINK do vídeo do problema:  https://youtu.be/HIlCKSG9cvg
       
       

    • Por manoveio1
      Estou desenvolvendo um sisteminha em, pra fins de conhecimento. Estou usando eclipse, photon ,postgres, hibernate, maven e primefaces. Ele está gravando os dados normalmente no banco de dados. A data e hora ele esta pegando automaticamente do sistema. Até ai esta blz. O problema está qdo atualizo os dados, a data e a hora nao estao atualizando, porem outros dados estao.
      Segue os dados:
      meu domain:
      package br.pro.silvio.prati.domain; import java.util.Date; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Temporal; import javax.persistence.TemporalType; @SuppressWarnings("serial") @Entity public class Area extends GenericDomain { @Column(name = "nome",length =20, nullable = false) private String nome; @Column( name = "status",length =10) private String status; @Column(name = "cadpor",length =20) private String cadpor; @Column(name ="datcad") @Temporal(TemporalType.DATE) private Date datcad = new java.sql.Date(System.currentTimeMillis()); @Column(name = "hora") @Temporal(TemporalType.TIME) private Date hora =new java.sql.Date(System.currentTimeMillis()); public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public String getCadpor() { `return cadpor;` } public void setCadpor(String cadpor) { this.cadpor = cadpor; } public Date getDatcad() { return datcad; } public void setDatcad(Date datcad) { this.datcad = datcad; } public Date getHora() { return hora; } public void setHora(Date hora) { this.hora = hora; } } meu dao generico:
      package br.pro.silvio.prati.dao; import java.lang.reflect.ParameterizedType; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Session; import org.hibernate.Transaction; import org.hibernate.criterion.Restrictions; import br.pro.silvio.prati.util.HibernateUtil; public class GenericDAO<Entidade> { private Class<Entidade> classe; @SuppressWarnings("unchecked") public GenericDAO() { this.classe = (Class<Entidade>) ((ParameterizedType) getClass().getGenericSuperclass()) .getActualTypeArguments()[0]; } public void salvar(Entidade entidade) { Session sessao = HibernateUtil.getFabricaDeSessoes().openSession(); Transaction transacao = null; try { transacao = sessao.beginTransaction(); sessao.save(entidade); transacao.commit(); } catch (RuntimeException erro) { if (transacao != null) { transacao.rollback(); } throw erro; } finally { sessao.close(); } } @SuppressWarnings("unchecked") public List<Entidade> listar() { Session sessao = HibernateUtil.getFabricaDeSessoes().openSession(); try { Criteria consulta = sessao.createCriteria(classe); List<Entidade> resultado = consulta.list(); return resultado; } catch (RuntimeException erro) { throw erro; } finally { sessao.close(); } } @SuppressWarnings("unchecked") public Entidade buscar(Long codigo) { Session sessao = HibernateUtil.getFabricaDeSessoes().openSession(); try { Criteria consulta = sessao.createCriteria(classe); consulta.add(Restrictions.idEq(codigo)); Entidade resultado = (Entidade) consulta.uniqueResult(); return resultado; } catch (RuntimeException erro) { throw erro; } finally { sessao.close(); } } public void excluir(Entidade entidade) { Session sessao = HibernateUtil.getFabricaDeSessoes().openSession(); Transaction transacao = null; try { transacao = sessao.beginTransaction(); sessao.delete(entidade); transacao.commit(); } catch (RuntimeException erro) { if (transacao != null) { transacao.rollback(); } throw erro; } finally { sessao.close(); } } public void editar(Entidade entidade) { Session sessao = HibernateUtil.getFabricaDeSessoes().openSession(); Transaction transacao = null; try { transacao = sessao.beginTransaction(); sessao.update(entidade); transacao.commit(); } catch (RuntimeException erro) { if (transacao != null) { transacao.rollback(); } throw erro; } finally { sessao.close(); } } public void merge(Entidade entidade) { Session sessao = HibernateUtil.getFabricaDeSessoes().openSession(); Transaction transacao = null; try { transacao = sessao.beginTransaction(); sessao.merge(entidade); transacao.commit(); } catch (RuntimeException erro) { if (transacao != null) { transacao.rollback(); } throw erro; } finally { sessao.close(); } } } meu dao:
      package br.pro.silvio.prati.dao; import br.pro.silvio.prati.domain.Area; public class AreaDAO extends GenericDAO<Area>{ } meu bean:
      package br.pro.silvio.prati.bean; import java.io.Serializable; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import javax.faces.event.ActionEvent; import org.omnifaces.util.Messages; import br.pro.silvio.prati.dao.AreaDAO; import br.pro.silvio.prati.domain.Area; @SuppressWarnings("serial") @ManagedBean @ViewScoped public class AreaBean implements Serializable { private Area area; private List<Area> areas; public Area getArea() { return area; } public void setArea(Area area) { this.area = area; } public List<Area> getAreas() { return areas; } public void setAreas(List<Area> areas) { this.areas = areas; } @PostConstruct public void listar() { try { AreaDAO areaDAO = new AreaDAO(); areas = areaDAO.listar(); } catch (RuntimeException erro) { Messages.addGlobalError("Ocorreu um erro ao tentar listar as AREAS"); erro.printStackTrace(); } } public void novo() { area = new Area(); } public void salvar() { try { AreaDAO areaDAO = new AreaDAO(); areaDAO.merge(area); novo(); areas = areaDAO.listar(); Messages.addGlobalInfo("Area salvo com sucesso"); } catch (RuntimeException erro) { Messages.addGlobalError("Ocorreu um erro ao tentar salvar a AREA"); erro.printStackTrace(); } } public void excluir(ActionEvent evento) { try { area = (Area) evento.getComponent().getAttributes().get("areaSelecionado"); AreaDAO areaDAO = new AreaDAO(); areaDAO.excluir(area); areas = areaDAO.listar(); Messages.addGlobalInfo("Estado removido com sucesso"); } catch (RuntimeException erro) { Messages.addFlashGlobalError("Ocorreu um erro ao tentar remover o estado"); erro.printStackTrace(); } } public void editar(ActionEvent evento){ area = (Area) evento.getComponent().getAttributes().get("areaSelecionado"); } } meu xhtml:
      <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Are</title> </h:head> <h:body> <p:growl id="mensagem" /> <h:form id="formListagem"> <p:panel header="AREA - Listagem"> <p:dataTable id="tabela" emptyMessage="Nenhum registro encontrado." paginator="true" value="#{areaBean.areas}" var="item" rows="8"> <f:facet name="header"> <p:commandButton value="Novo" oncomplete="PF('dialogo').show();" actionListener="#{areaBean.novo}" update=":formCadastro:painel"> <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener" /> </p:commandButton> </f:facet> <p:column headerText="Código" sortBy="#{item.codigo}" filterBy="#{item.codigo}"> <h:outputText value="#{item.codigo}" /> </p:column> <p:column headerText="Descricao" sortBy="#{item.nome}" filterBy="#{item.nome}"> <h:outputText value="#{item.nome}" /> </p:column> <p:column headerText="Status" sortBy="#{item.status}" filterBy="#{item.status}"> <h:outputText value="#{item.status}" /> </p:column> <p:column headerText="Cadastrado por" sortBy="#{item.cadpor}" filterBy="#{item.cadpor}"> <h:outputText value="#{item.cadpor}" /> </p:column> <p:column headerText="Data" sortBy="#{item.datcad}" filterBy="#{item.datcad}"> <h:outputText value="#{item.datcad}"> <f:convertDateTime locale="pt_BR" /> </h:outputText> </p:column> <p:column headerText="Hora"> <h:outputText value="#{item.hora}" /> </p:column> <p:column headerText="Opções"> <p:commandButton icon="ui-icon-trash" actionListener="#{areaBean.excluir}" update=":mensagem :formListagem:tabela"> <p:confirm header="Confirmação" message="Deseja excluir 'AREA'?" icon="ui-icon-alert" /> <f:attribute name="areaSelecionado" value="#{item}" /> </p:commandButton> <p:commandButton icon="ui-icon-pencil" actionListener="#{areaBean.editar}" update=":formCadastro:painel" oncomplete="PF('dialogo').show();"> <f:attribute name="areaSelecionado" value="#{item}" /> <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener" /> </p:commandButton> </p:column> </p:dataTable> <p:confirmDialog global="true" showEffect="fade" hideEffect="fade"> <p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" /> <p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" /> </p:confirmDialog> </p:panel> </h:form> <p:dialog header="AREA - Cadastro" widgetVar="dialogo" draggable="false" resizable="false" modal="true" closable="false"> <h:form id="formCadastro"> <h:panelGrid id="painel" columns="2"> <p:outputLabel value="Descrição:" /> <p:inputText maxlength="30" size="20" value="#{areaBean.area.nome}" required="true" requiredMessage="O campo Descricao é obrigatório!" /> <p:outputLabel value="Situação:" /> <p:selectOneMenu value="#{areaBean.area.status}" required="true" requiredMessage="O campo Situacao é obrigatório!"> <f:selectItem itemValue="" itemLabel="Selecione.." /> <f:selectItem itemValue="Ativo" itemLabel="Ativo" /> <f:selectItem itemValue="Inativo" itemLabel="Inativo" /> </p:selectOneMenu> </h:panelGrid> <h:panelGrid columns="2"> <p:commandButton value="Salvar" actionListener="#{areaBean.salvar}" update=":mensagem :formCadastro:painel :formListagem:tabela" /> <p:commandButton value="Fechar" oncomplete="PF('dialogo').hide();" /> </h:panelGrid> </h:form> </p:dialog> </h:body> </html> ele grava de boa a data e a hora , mas quando é pra atualizar, só atualiza outros campos mas não a data e a hora. o que pode ser?
    • Por gabriel.sistemasti
      pessoal gostaria de fazer o seguinte: tenho um selectBooleanCheckbox que ao selecionar ele (selecionado = true)  ele aparecesse um modal com um contratinho  ... para a pessoa ler, alguem pode me ajudar como faço isto? m não consigo fazer aparecer o modal ao selecionar ocheck box
       
      meu SelectBooleanCheckbox :
       
      <h:selectBooleanCheckbox value="#{operacaoFinanciadaBean.tarifaCadastro}" id="checkTarifaC"> </h:selectBooleanCheckbox>  segue abaixo imagem de como quero que seja , mais ou menos para voces entenderem minha ideia

    • Por vanermiranda
      Boa tarde companheiros.
       
      Gostaria de saber se é possível usar uma DataTable primefaces para armazenar temporariamente os dados inseridos através de um formulário, antes de persistir no banco.
      Tipo assim. 
      Eu tenho um formulário de cadastro, ele jogar em uma tabela temporária, e depois, ao clicar em salvar, salva todos os dados cadastrados no banco.
      Desde já agradeço.
    • Por luansilva71
      Criei uma função javascript para validar campos do formulário composto pelo componente <p:wizard> do Primefaces. A função é chamada através do evento onnext=""  do  <p:wizard>, ou seja, somente quando a pessoa clica em próximo (para ir para a próxima tab). O problema é que a minha função javascript ela não consegue fazer com que o <p:wizard> não pule a tab se as condições não forem satisfeitas.   
       
      function onnext() {     var nome = document.getElementById('nome');     var cpf = document.getElementById('cpf');     if (nome.value === '') {         alert('Por favor preencha o campo nome');         nome.focus;         return false;     } else if (cpf.value === '') {         alert('Por favor preencha o campo cpf');         cpf.focus;         return false;     }     return true;}  
      <p:wizard nextLabel="Próximo" onnext="onnext();" flowListener="#{alunoBean.onFlowProcess}">     <p:tab title="Dados Pessoais">         <p:panel header="Dados Pessoais">             <p:messages />                                           <h:panelGrid columns="2">                 <p:outputLabel value="Nome Completo: " for="nome" />                 <p:inputText id="nome" value="#{alunoBean.aluno.nome}" />                 <p:outputLabel for="cpf" value="CPF: "/>                 <p:inputText  id="cpf" value="#{alunoBean.aluno.cpf}" />             </h:panelGrid>         </p:panel>     </p:tab>     <p:tab title="Dados Bancários">             </p:tab>     <p:tab title="Dados Familiares">             </p:tab> </p:wizard>
      Com esse javascript aí, se você não preencher os campos e clicar em próximo, ele mostra o `alert('');` e já pula pra próxima tab. A partir dai você só consegue voltar, não consegue pular pra próxima tab!
                           
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.