Eu estou criando um formulário de cadastro, onde o cliente poderá escolher mais de um produto/acessorios nesse formulário (É um sistema de ordem de serviço). O problema é que não sei bem a forma mais correta de fazer isso. Estive pensando em usar o JQuery para clonar os inputText de adição dos produtos, colocando um botão de “Adicionar produto”, mas pelo que eu vi na documentação, a função clone não copia todos os elementos. Quando eu copio, o selectOneMenu não funciona, e os outros campos copiam o conteudo quando adiciono outro produto, não dá certo rs. Então como eu posso fazer para clonar os inputText? Ou tem outra maneira melhor de fazer essa funcionalidade de poder adicionar mais de um produto?
utilizo essa função, ela clona o formulario, mais os inputs e select nao funcionam.
function addProduto() {
var p = document.getElementById("addproduto");
var p_clone = p.cloneNode(true);
p.parentNode.appendChild(p_clone);
}
Mike
Maio 10, 2018, 5:01pm
#2
O PrimeFaces tem o componente selectCheckboxMenu e selectManyMenu, ve se eles não te ajudam.
Bom… sobre clicar num botão e aparecer um novo inputText, eu nunca fiz (mas quero também), pelo o que eu me lembro/procurei, o PrimeFaces não tem um componente para isso.
Veja se isso não te ajuda:https://coderanch.com/t/212268/java/Add-component-button-click
java, jsf, primefaces
Mike
Maio 10, 2018, 5:08pm
#3
Eu nunca fiz isso e é algo que estou querendo a um tempo…
blz, vou testar esse do primeFaces.
Em relaçao ao clone com Js ele funciona blz e é bem simples, o problema é pq ele clona o formulario eles a partir do segundo formulario nada funciona. Na internet a maioria é feita com Jquery, e no jsf não sei como faz para que ele funcione. pois não reconhece o Id dos campos.
Como você mesmo falou, o clone funciona, sempre usei. Poste o código (lado client) que reproduza o problema, assim fica mais fácil verificarmos executando no navegador.
quando eu dou console.log(p_clone) ele me retorna todas as linhas normalmente, sem erros.
só não entendo pq não funciona os elementos filhos ( ficam inativos)
<p:panel header="Produtos/Acessorios" >
<div class="ui-g" id="addproduto">
<div class="ui-g-3" >
<p:outputLabel for="t" value="Produtos" />
<p:selectOneMenu id="t" value="#{ordemServicoController.produto}" effect="fade"
filter="true" filterMatchMode="startsWith" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{ordemServicoController.produtos}" var="produto" itemLabel="#{produto.description}" itemValue="#{produto}" />
</p:selectOneMenu>
</div>
<div class="ui-g-3" id="quantidade">
<p:outputLabel value="Quantidade" for="quant" />
<p:inputText id="quant" value="#{ordemServicoController.itemVenda.quantidade}"
requiredMessage="campo nome Quantidade é obrigatorio" />
</div>
<div class="ui-g-3" >
<p:outputLabel value="Preço" for="pre" />
<p:inputText id="pre" value="#{ordemServicoController.itemVenda.precoParcial}" />
</div>
<div class="ui-g-2" >
<p:outputLabel value="Total" for="tot" />
<p:inputText id="tot" readonly="true" />
<p:commandButton icon="fa fa-minus"
style="width:52px;height:23px;margin-left:1%;position:absolute;"
onclick="removerProduto()" />
</div>
</div>
</p:panel>
<p:commandButton id="add" value="Adicionar outro produto" icon="fa fa-plus"
style="width:182px;height:30px;margin-top:10px;margin-left:10px;" onclick="addProduto()"/>
<p:separator/>
<p:panel id="resp" header="Responsaveis" >
<p:panelGrid columns="2" columnClasses="ui-grid-col-2,ui-grid-col-4" layout="grid" styleClass="ui-panelgrid-blank" >
<p:outputLabel value="Funcionario" for="func"/>
<p:inputText id="func" value="#{usuarioLogado.usuario.nome}"
requiredMessage="campo nome Vendedor é obrigatorio" readonly="true"/>
<p:outputLabel for="console" value="Tecnico" />
<p:selectOneMenu id="console" value="#{ordemServicoController.tecnico}" effect="fade"
filter="true" filterMatchMode="startsWith" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{ordemServicoController.tecnicos}" var="tecnico" itemLabel="#{tecnico.description}" itemValue="#{tecnico}" />
</p:selectOneMenu>
<p:commandButton action="#{ordemServicoController.salvar()}" value="Salvar" icon="fa fa-check"
style="margin-left:150%;" update="@form" ajax="true" />
</p:panelGrid>
</p:panel>
</div>
Posta o código que está no navegador, esse que vai valer pro jquery.
eu fiz um exemplo só com html e funcionou os nós filhos funcionaram,mais no jsf não.
<div class="ui-g-3"><label id="formulario:j_idt110" class="ui-outputlabel ui-widget" for="formulario:t_focus">Produtos</label><div id="formulario:t" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="min-width: 96px;"><div class="ui-helper-hidden-accessible"><input id="formulario:t_focus" name="formulario:t_focus" type="text" autocomplete="off" role="combobox" aria-haspopup="true" aria-expanded="false" aria-labelledby="formulario:j_idt110" aria-autocomplete="list" aria-owns="formulario:t_items" aria-activedescendant="formulario:t_0" aria-describedby="formulario:t_0" aria-disabled="false"></div><div class="ui-helper-hidden-accessible"><select id="formulario:t_input" name="formulario:t_input" tabindex="-1"><option value="br.com.sgi.model.Produto@36">caneta</option><option value="br.com.sgi.model.Produto@37">chaveiro</option><option value="br.com.sgi.model.Produto@35">mouse Game</option><option value="br.com.sgi.model.Produto@34">notbook</option></select></div><label id="formulario:t_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">caneta</label><div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"><span class="ui-icon ui-icon-triangle-1-s ui-c"></span></div></div>
</div>
<div class="ui-g-3" id="quantidade"><label id="formulario:j_idt113" class="ui-outputlabel ui-widget" for="formulario:quant">Quantidade</label><input id="formulario:quant" name="formulario:quant" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false">
</div>
<div class="ui-g-3"><label id="formulario:j_idt115" class="ui-outputlabel ui-widget" for="formulario:pre">Preço</label><input id="formulario:pre" name="formulario:pre" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false">
</div>
<div class="ui-g-2"><label id="formulario:j_idt117" class="ui-outputlabel ui-widget" for="formulario:tot">Total</label><input id="formulario:tot" name="formulario:tot" type="text" readonly="readonly" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="true"><button id="formulario:j_idt118" name="formulario:j_idt118" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" onclick="PrimeFaces.bcn(this,event,[function(event){removerProduto()},function(event){PrimeFaces.ab({s:"formulario:j_idt118"});return false;}]);" style="width:52px;height:23px;margin-left:1%;position:absolute;" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c fa fa-minus"></span><span class="ui-button-text ui-c">ui-button</span></button>
</div>
</div>
Não sei se entendi bem, mas está tentando usar jquery em cima do código JSF? Jquery é para o lado client. JSF é lado servidor. Então trabalhe em cima do HTML recebido pelo navegador.
não. Quero com js puro. jquery não funciona muito bem.
Esse exemplo funciona: https://jsbin.com/jolazirabu/1/edit?html,js,output
O que não funcionar você posta um teste nesse site reproduzindo o problema.
continua o mesmo problema, meu selecOneMenu nao carrega as opçoes do nó filho.
Veja as opções do clone.
javascript, jquery
Fora isso, poste de fato o código com o evento e js que faz a carga, senão não temos como advinhar o código real no client em que está passando problema.
