Ir para conteúdo

POWERED BY:

Arquivado

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

asafefritz

Autocomplete para campos dinâmicos

Por , em Javascript

Recommended Posts

asafefritz    0

asafefritz
Postado

Boa tarde galera, sou novo aqui e aqui está o meu primeiro tópico rsrs

Bom, vamos lá...

 

eu tenho um sistema de orçamento de produto e na qual eu tenho uma tr com varios campos inputs

onde o usuário tem a opção inserir (clonar essa tr) para caso queira adicionar mais um produto na sua lista.

eu utilizo o método .clone() para clonar essa tr e uso o método .autocomplete() para facilitar a busca pela descrição do produto:

 


$("input.auto").autocomplete({
source: "autoComplete.php",
minLength: 1,

});
tbm aproveito a mesma requisição para trazer outras informações adicionais do produto.
como por exemplo: valor unitário, unidade, quantidade em estoque etc....
só que é ai que está o problema.


$("input.auto").autocomplete({
  source: "autoComplete.php",
  minLength: 1,
select: function(event, ui) {

var i = 0;

i = $("tr.linhas").length;

    $('#qtd'+i).val(ui.item.qtd);
    $('#valor'+i).val(ui.item.valor);
    $('#cod_prod'+i).val(ui.item.cod_prod);
    $('#unidade'+i).val(ui.item.unidade);
    $('#qtd_retirar'+i).val(ui.item.qtd_retirar);

i++;

      };      
    }

});
eu faço uma contagem de quantas $("tr.linhas") eu tenho gerada, e uso uma variável i para incrementar...
só que não funciona;
talvez eu deveria de usar um .each() ?? "não sei nem como ficaria o código escrito".
alguém teria uma idéia de como resolver esse problema ??

só pra esclarecer uma coisa eu uso o método

.live()

tbm no autocomplete para os campos clonados....

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vc precisa ativar o autocomplete para o campo q foi criado, assim q ele for criado.

 

coloca o plugin só nele.

 

sobre o seu "i", tem como vc fazer melhor com this, parent() e find()

Compartilhar este post

Link para o post
Compartilhar em outros sites

asafefritz    0

asafefritz
Postado

você precisa ativar o autocomplete para o campo q foi criado, assim q ele for criado.

 

coloca o plugin só nele.

 

sobre o seu "i", tem como você fazer melhor com this, parent() e find()

Mas a função de autocomplete funciona para todos os campos clonados. o problema está quando eu uso :

 

 

select: function(event, ui) {

    $('#qtd').val(ui.item.qtd);
    $('#valor').val(ui.item.valor);
    $('#cod_prod').val(ui.item.cod_prod);
    $('#unidade').val(ui.item.unidade);
    $('#qtd_retirar').val(ui.item.qtd_retirar);
}

como que eu vou fazer pra ele setar a linha em que estou com o focus ??eu já tentei usar o this mas não funcionou... tentei tbm o .each...

mas tbm nada... talvez eu deva ter errado na sintaxe... fiz assim:

 

 

 $("input.auto").live('keyup.autocomplete', function(){
  $(this).autocomplete({
  source: "../autocomplete/autoComplete.php",
  minLength: 1,
  $(this).each(function select(event, ui) {      
    $('#qtd_atual').val(ui.item.qtd);
    $('#preco_unit').val(ui.item.valor);
    $('#id_prod').val(ui.item.cod_prod);
    $('#unidade').val(ui.item.unidade);
    $('#qtd_retirar').val(ui.item.qtd_retirar);
    });
  });
});
});

seria isso ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não cara, ai vc tem q navegar com find e parent tb.

 

e é proibido duplicar ID num documento. ID deve ser unico

Compartilhar este post

Link para o post
Compartilhar em outros sites

asafefritz    0

asafefritz
Postado

não cara, ai você tem q navegar com find e parent tb.

 

e é proibido duplicar ID num documento. ID deve ser unico

por isso eu estava usando o "i". na hora que eu clono eu dou um attr para alterar o id;;;

só que eu não sei como usar esse parent ou o find neste meu caso ai "/

(sou nenem nesse assunto de programação rsrs).

poderia me dar um exemplo como funcionaria ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

asafefritz    0

asafefritz
Postado

poste teu html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adicionando linhas dinamicamente</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
        <script type="text/javascript" src="../restrito/autocomplete/funcoes.js"></script>


<script type="text/javascript">

$(document).ready(function(){
//REMOVE CAMPOS CLONADOS
  function removeCampo() {
  $(".removerCampo").unbind("click");
  $(".removerCampo").bind("click", function () {
     if($("tr.linhas").length >1){
    $(this).parent().parent().remove();
     }
  });
  }
 //CLONA A TR COM CLASSE LINHAS
  $(".adicionarCampo").live("click" , function () {
  novoCampo = $("tr.linhas:first").clone();
  novoCampo.find("input").val("");
    for (var i = 1; i <= $("tr.linhas").length; i++) {
    novoCampo.find("input[name='desc_prod[]'").attr("id", "desc_prod"+i);
    novoCampo.find("input[name='id_prod[]'").attr("id", "id_prod"+i);
    novoCampo.find("input[name='qtd_atual[]'").attr("id", "qtd_atual"+i);
    novoCampo.find("input[name='unidade[]'").attr("id", "unidade"+i);
    novoCampo.find("input[name='preco_unit[]").attr("id", "preco_unit"+i);
    novoCampo.find("input[name='qtde[]']").attr("id", "qtde"+i).attr("value", "0"); 
    novoCampo.find("input[name='desconto[]']").attr("id", "desconto"+i).attr("value", "0");
    novoCampo.find("input[name='unit_final[]']").attr("id", "unit_final"+i); 
    novoCampo.find("input[name='total[]']").attr("id", "total"+i);
    novoCampo.find("input[name='desconto[]']").attr("onblur", "");
   
  }
  novoCampo.insertAfter("tr.linhas:last");
  removeCampo();
  });

/*
   $("input.auto").live('keyup.autocomplete', function(){
  $(this).autocomplete({
  source: "../autocomplete/autoComplete.php",
  minLength: 1,
  select: function(event, ui) {      
    $('#qtd_atual').val(ui.item.qtd);
    $('#preco_unit').val(ui.item.valor);
    $('#id_prod').val(ui.item.cod_prod);
    $('#unidade').val(ui.item.unidade);
    $('#qtd_retirar').val(ui.item.qtd_retirar);
    };
  });
});*/

});
</script>

<style type="text/css">
  #tudo, #box {
    padding: 15px;
  }
  #box {
    margin: 0 auto;
    float: none;
  }
</style>
</head>
<body>
<form method="post" name="frm_campo_dinamico" action="">
<article id="orcamento">
<table border="0" cellpadding="2" cellspacing="4" id="tabela" class="table-hover">
  <tr><td colspan="4" class="bd_titulo"><center><h1>Orçamento de Produtos</h1></center></td></tr> 
  <tr>
    <td class="bd_titulo">Descrição</td>
    <td class="bd_titulo" width="10">Código</td>
    <td class="bd_titulo">Situação</td>
    <td class="bd_titulo">Unidade</td>
    <td class="bd_titulo">Preço Uni</td>
    <td class="bd_titulo">Qtde</td>
    <td class="bd_titulo">Desconto</td>
    <td class="bd_titulo">Vl Desconto</td>
    <td class="bd_titulo">Total</td>
  </tr>

  <tr class="linhas" id="campoPai">
    <td><input type="text" class="auto span2 desc_prod" id="desc_prod0" name="desc_prod[]" style="text-align:center" /></td>
    <td><input type="text" class="span1" id="id_prod0" name="id_prod[]" disabled /></td>
    <td>
        <div class="input-append">
          <input type="text" class="span1 qtd_atual" id="qtd_atual0" name="qtd_atual[]" disabled>
          <span class="add-on" id='qtd_retirar[]' value=""></span>
        </div>
    </td>
    <td><input type="text" class="span1 " id="unidade0" name="unidade[]" disabled /></td>
    <td><input type="text" class="span1 preco_unit" id="preco_unit0" name="preco_unit[]" disabled /></td>
    <td><input type="text" class="span1 qtde" id="qtde0" value="0" name="qtde[]" /></td>
    <td><input type="text" class="span1 desconto" id="desconto0" value="0" name="desconto[]" style="text-align:center" /></td>
    <td><input type="text" class="span1" id="unit_final0" name="unit_final[]" style="text-align:center" /></td>
    <td><input type="text" class="span1 total input" id="total0" name="total[]" style="text-align:center" /></td>
    <td><a href="#" class="removerCampo somar" title="Remover linha"><img src="../img/minus.png" border="0" /></a></td>
  </tr> 
 
 
 

  <tr>
    <td colspan="9">
           <h3>Valor Total: R$ <span class="resultado">0.00</span></h3>
            <td><a href="#" id="somar">Calcular</a></td>
          

    </td>
  </tr>

  <tr><td colspan="4">
        <a href="#" class="adicionarCampo somar" title="Adicionar item"><img src="../img/plus.png" border="0" /></a>
  </td></tr>
</table>
</form>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito