3

Pessoal não consigo obter valores da pesquisa de realizo com JSON e banco de dados após adicionar nova linha de produto dinâmica com JavaScript.

Formulário HTML, o produto é pesquisa pelo código:

<form id="adicionarformProdutos" method"post" action"" enctype="multipart/form-data">
     <a href="#" id="adicionarProduto">Adicionar Faixa</a>      
    <fieldset class="fieldsetProduto">
        <legend>Produto 1</legend>
        <div class="produtos">
            <label for="codProduto1">Código:</label><input type="text" id="codProduto1" size="5" name="codProduto[1]" />
            <label for="nomeProduto1">Nome:</label> <input type="text" id="nomeProduto1" size="9" disabled name="nomeProduto[1]" />
            <label for="qtProduto1">Qt.:</label> <input type="number" min="1" max="999" size="1" id="qtProduto1" name="qtProduto[1]" onblur="calcValor()" />
            <label for="valorProduto1">Valor und. R$:</label> <input type="text" id="valorProduto1" disabled name="valorProduto[1]" size="6" onkeypress="mascara(this,float)" />
        </div>
     </fieldset>
</form>

Trecho JSON que realiza busca dos produtos e preenche as demais variáveis:

//-----------------------------------------------------
//Funcao: functionjson
//Autor: Rafael Assmann <[email protected]>
//Sinopse: Json para capturar código do produto e reali
//zar a busca no banco de dados e preencher os demais campos deste produto
//Parametro:
//   codProduto[] : código do produto digitado para pesquisa
//Retorno: nomeProduto[], qtProduto[] e valorProduto[] : informações do BD
//-----------------------------------------------------
$(document).ready(function(){
    $("input[name='codProduto[1]']").blur(function(){
         var nomeProduto = $("input[name='nomeProduto[1]']");
         var qtProduto = $("input[name='qtProduto[1]']");
         var valorProduto = $("input[name='valorProduto[1]']");

         $( nomeProduto ).val('Carregando...');
         $( qtProduto ).val('Carregando...');
         $( valorProduto ).val('Carregando...');

             $.getJSON(
                 'function.php',
                 { codProduto: $( this ).val() },
                 function( json ) 
                 {
                      $( nomeProduto ).val( json.nomeProduto );
                      $( qtProduto ).val("1");
                      $( valorProduto ).val( json.valorProduto);
                 }
             );
     });
});

Trecho onde adiciona mais produtos, que no qual a interação JSON não funciona:

$(function () {
    var i = 1;
    $("#adicionarProduto").click(function () {
        i++;
        novoProduto = $(".fieldsetProduto:first").clone();
        novoProduto.find("input").each(function () {
            $(this).val("")
        });

        $("#adicionarformProdutos").append("
        " + novoProduto.html().replace(/1/g, i) + "")
    });
});

Insert no banco de dados, OBS: as variaveis que são alimentadas pelo JSON parecem estar vazias:

<?php
$Ficha = filter_input(INPUT_GET,'id');
?>

<div id="painelcadastro2" align="center">
<?php   if (isset($_GET['cadastra']) && $_GET['cadastra'] == 'add') {
  $datacompra = implode("-", array_reverse(explode("/",$_GET['datacompra'])));
  $nomeProduto = filter_input(INPUT_GET, 'nomeProduto1');
  $qtProduto = filter_input(INPUT_GET, 'qtProduto1');
  $valorProduto = filter_input(INPUT_GET, 'valorProduto1');
  $parcelas = filter_input(INPUT_GET, 'select_parcelas');
  $entrada = filter_input(INPUT_GET, 'entrada');
  $total = filter_input(INPUT_GET, 'total');
  $pagamento = "CREDIARIO";
  $cadastra = mysql_query("INSERT INTO t_cadcontratos (Ficha, DataContrato, QuantParcelas, ValorContrato, Entrada, Saldo, DescricaoProduto, QuantProdutos, FormaPagamento) 
                          VALUES ('$Ficha', '$datacompra', '$parcelas', '$valorProduto', '$entrada', '$total', '$nomeProduto', '$qtProduto', '$pagamento')");
  if($cadastra == '1') {
        echo "Venda Crediário realizada com sucesso !";
  }else{
        echo "Erro ao realizar a venda Crediário, tente novamente !";
  }
}
?>

Function.php

<?php
/**
 * função que devolve em formato JSON os dados do cliente
 */
function retorna( $nome, $db )
{
    $sql = "SELECT `identProduto`, `codProduto`, `qtProduto`, `nomeProduto`, `valorProduto` FROM `t_estoque` WHERE `codProduto` = '{$nome}' ";

         $query = $db->query( $sql );

         $arr = Array();
         if( $query->num_rows )
         {
             while( $dados = $query->fetch_object() )
             {
                 $arr['nomeProduto'] = $dados->nomeProduto;
                 $arr['qtProduto'] = $dados->qtProduto;
                 $arr['valorProduto'] = $dados->valorProduto;
             }
         }else{
             $arr['nomeProduto'] = 'produto não encontrado';
         }
         if($arr['qtProduto'] == 0)
            $arr['nomeProduto'] = 'sem estoque';

         return json_encode( $arr );
    }

/* só se for enviado o parâmetro, que devolve os dados */
if( isset($_GET['codProduto']) )
{
    $db = new mysqli('localhost', 'root', '', 'buchm613_buchmann');
    echo retorna( filter ( $_GET['codProduto'] ), $db );
}

function filter( $var ){
    return $var;//a implementação desta, fica a cargo do leitor
}

Como posso proceder para preencher os campos adicionados dinamicamente através do trecho JavaScript acima?

7
  • Editei a pergunta pra melhorar a identação do último código - que estava difícil de ler - mas mantive a quebra de linha indevida dentro da string, para não alterar o código original. Seu código está assim mesmo? Se sim, não deu erro de compilação no JavaScript?
    – mgibsonbr
    Commented 10/10/2014 às 2:25
  • 1
    A propósito, essa linha $("#adicionarformProdutos").append("" + novoProduto.html().replace(/1/g, i) + "") - mesmo corrigida - altera indevidamente várias propriedades do seu código, como o atributo min. Veja esse exemplo, cada vez que se adiciona um novo produto sua quantidade mínima fica igual ao índice do produto (i.e. o produto 4 tem quantidade mínima 4, o 5 tem quantidade mínima 5, etc).
    – mgibsonbr
    Commented 10/10/2014 às 2:31
  • Entendido a parte do quantidade minima, obrigado mgibsonbr, vou verificar uma solução para isso mas meu problema esta quando adiciono novos índices de produto, meu jSON simplesmente não funciona, sei que crio nome de inputs diferentes quando adiciono mas não sei o tratamento correto no trecho JSON para realizar a pesquisa no BD, tens alguma ideia? Commented 10/10/2014 às 2:47
  • Sim, estou escrevendo uma resposta agora, em breve eu posto.
    – mgibsonbr
    Commented 10/10/2014 às 2:48
  • ok! por enquanto apenas alterei o input number para text por quanto do minimo da quantidade, não tenho porque utilizar o tipo number neste momente, aguardo retorno! Commented 10/10/2014 às 2:52

2 Respostas 2

3

O seu código $("input[name='codProduto[1]']").blur(...) apenas atribui um handler pro evento blur dos elementos que já estão na página desde o princípio - ou seja, o primeiro produto. Se você quer fazer isso para um novo produto, eu sugiro utilizar o método on (ou live, se for uma versão muito antiga do jQuery).

Em primeiro lugar, acrescente uma classe ao seu input para facilitar sua seleção (por alguma razão que desconheço, o seletor .produtos > input:first não está funcionando como eu esperava):

<input class="codigoProduto" type="text" id="codProduto1" size="5" name="codProduto[1]" />

Segundo, quando for clonar não pegue somente o elemento.html (esse seria o innerHTML). Em vez disso, atualize o HTML e depois adicione o próprio elemento (tomando cuidado para não substituir demais, como apontado nos comentários, mas aqui vou ignorar isso):

//$("#adicionarformProdutos").append("" + novoProduto.html().replace(/1/g, i) + "")
novoProduto.html(novoProduto.html().replace(/1/g, i));
$("#adicionarformProdutos").append(novoProduto)

Terceiro, use o on:

$(document).on("blur", ".codigoProduto", function(){

Por fim, selecione os elementos corretos para atualizar - não apenas o primeiro:

 var parent = $(this).parent();
 var nomeProduto = parent.children("input:eq(1)");
 var qtProduto = parent.children("input:eq(2)");
 var valorProduto = parent.children("input:eq(3)");

Exemplo no jsFiddle. Gostaria também de mencionar que não é necessário usar o operador $ novamente em $( nomeProduto ), etc, pois eles já são objetos jQuery. Mas também não atrapalha...

10
  • Muito bom @mgibsonbr, obrigado! mas no momento que eu altero por "$(document).on("blur", ".codigoProduto", function(){" não consigo mais pesquisar os produtos, eu utilizo o JQuery da seguinte forma: "<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.5.2/…>" Commented 10/10/2014 às 3:36
  • @RafaelAssmann O on só está disponível a partir do jQuery 1.7. Se não pode atualizar seu jQuery. tente substituir a chamada do on por $(document).delegate(".codigoProduto", "blur", function() { e veja se resolve. Há também o live, mas se o delegate funcionar é melhor assim.
    – mgibsonbr
    Commented 10/10/2014 às 3:47
  • Funcionou sim, estava tentando com .delegate mas os parâmetros nas ordens erradas, tudo certo agora @mgibsonbr muito obrigado novamente! se for possível favor de uma atenção para esta outra pergunta pt.stackoverflow.com/questions/35489/… ++ Commented 10/10/2014 às 3:59
  • @RafaelAssmann Foi mal, eu entendo de jQuery mas não sei nada de PHP... De todo modo, me parece que a resposta que você já recebeu lá está no caminho certo: se a página A mandou pra página B, você precisa preservar os conteúdos de A de alguma forma. Repetindo-os num hidden input em B é um meio; colocando-os em um cookie é outro. Os detalhes (e a segurança) de cada alternativa vai depender do seu caso particular.
    – mgibsonbr
    Commented 10/10/2014 às 4:05
  • perfeito, vou seguir nesta linha, novamente obrigado! Commented 10/10/2014 às 4:11
3

Sugiro uma nova abordagem pois como o @mgibsonbr referiu da maneira que está vai mudar propriedades que não quer.

Crie uma função que lhe retorna o clone com o numero de produto certo.

Algo como:

function novoProduto(nr){
    var html = '<fieldset class="fieldsetProduto">' +
        '<legend>Produto ' + nr + '</legend>' +
        '<div class="produtos">' +
        '<label for="codProduto' + nr + '">Código:</label><input type="text" id="codProduto' + nr + '" size="5" name="codProduto[' + nr + ']" />' +
        '<label for="nomeProduto' + nr + '">Nome:</label> <input type="text" id="nomeProduto' + nr + '" size="9" dis' + nr + 'bled name="nomeProduto[' + nr + ']" />' +
        '<label for="qtProduto' + nr + '">Qt.:</label> <input type="number" min="1" max="999" size="1" id="qtProduto1" name="qtProduto[' + nr + ']" onblur="calcValor()" />' +
        '<label for="valorProduto' + nr + '">Valor und. R$:</label> <input type="text" id="valorProduto' + nr + '" disabled name="valorProduto[' + nr + ']" size="6" onkeypress="mascara(this float)" />' +
        '</div>' +
        '</fieldset>';
    return html;
}

Aí sempre que quiser um elemento novo só precisa fazer novoProduto(i).

Uma outra sugestão e relacionada com a manutenção do código é: em vez de usar $("input[name='codProduto[1]']").blur(function(){ etc... que o vai obrigar a ter um código semelhante para cada novo produto, sugiro usar assim:

function carregarJSON() {
    var index = this.id.slice(-1);
    var self = this;
    var nomeProduto = $("input[name='nomeProduto[" + index + "]']");
    var qtProduto = $("input[name='qtProduto[" + index + "]']");
    var valorProduto = $("input[name='valorProduto[" + index + "]']");

    $(nomeProduto).val('Carregando...');
    $(qtProduto).val('Carregando...');
    $(valorProduto).val('Carregando...');

    $.getJSON(
        'function.php', {
        codProduto: self.value
    },

    function (json) {
        $(nomeProduto).val(json.nomeProduto);
        $(qtProduto).val(nr);
        $(valorProduto).val(json.valorProduto);
    });
}

$(document).ready(function () {
    $(document).on("blur", "input[name^='codProduto[']", carregarJSON);
});

Repare também que retirei o this dentro do $getJSON. Se não estou em erro o thisaí não ponta mais para o seu input mas sim para a função jQUery.

E já agora, sugestão de optimização também aqui:

$(function () {
    var i = 1;
    $("#adicionarProduto").click(function () {
        i++;
        $("#adicionarformProdutos").append(novoProduto(i))
    });
});

Se mantiver o código que tem aqui, julgo que não precisa do .each(). Basta:

novoProduto.find("input").val("") //não precisa do .each() aqui
3
  • 1
    +1 pela excelente sugestão de refatoração, mas receio que isso não resolva o problema do AP - repare que o blur somente é acrescentado aos elementos que já estão na página, não naqueles que são acrescentados dinamicamente.
    – mgibsonbr
    Commented 10/10/2014 às 3:04
  • @mgibsonbr verdade. Esquecí esse detalhe, vou corrigir. Vi agora a sua resposta também. ++
    – Sergio
    Commented 10/10/2014 às 3:06
  • 1
    Corrigido ^, usei delegação para esses inputs: $(document).on("blur", "input[name^='codProduto[']", carregarJSON);
    – Sergio
    Commented 10/10/2014 às 3:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .