How to add and search BD products with JSON in HTML dynamic fields?

3

I can not get search results values from JSON and database after adding new dynamic product line with JavaScript.

HTML form, product is search by code:

<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>

JSON excerpt that searches the products and fills in the remaining variables:

//-----------------------------------------------------
//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);
                 }
             );
     });
});

Excerpt where you add more products, where the JSON interaction does not work:

$(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 into database, NOTE: Variables that are fed by JSON appear to be empty:

<?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
}

How can I proceed to populate the fields dynamically added through the above JavaScript snippet?

    
asked by anonymous 10.10.2014 / 03:11

2 answers

3

Your code $("input[name='codProduto[1]']").blur(...) only assigns a handler to the event blur of elements already on the page from the beginning - that is, the first product. If you want to do this for a new product, I suggest using the method on (or live , if it is a version of jQuery).

First, add a class to your input to make your selection easier (for some reason I do not know, the .produtos > input:first selector is not working as I expected):

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

Second, when cloning do not just get elemento.html (this would be innerHTML ). Instead, refresh the HTML, and then add the element itself (being careful not to overwrite it, #, but here I will ignore this):

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

Third, use on :

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

Finally, select the correct elements to upgrade - not just the first one:

 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)");

Example in jsFiddle . I would also like to mention that it is not necessary to use the $ operator again in $( nomeProduto ) , etc, since they are already jQuery objects. But it also does not disturb ...

    
10.10.2014 / 05:01
3

I suggest a new approach for how the @ mgibsonbr said the way it's going to change properties that do not want.

Create a function that returns the clone with the right product number.

Something like:

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;
}

Then whenever you want a new element just need to novoProduto(i) .

Another suggestion related and code maintenance is: instead of using $("input[name='codProduto[1]']").blur(function(){ etc ... that will force to have a similar code for each new product, suggest using like this:

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);
});

Notice also that I removed the this within $ getJSON. If I'm not in error, the this there is no more tip for your input but for the jQUery function.

And right now, optimization suggestion here too:

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

If you keep the code you have here, I do not think you need .each() . Simply:

novoProduto.find("input").val("") //não precisa do .each() aqui
    
10.10.2014 / 04:53