0

Bom dia pessoal, estou enfrentando um problema e gostaria de saber se alguém consegue me ajudar. Desenvolvi um código para adicionar e remover DIVs de forma dinâmica e com autoincremento e decremento do index. O problema ocorre onde o incremento do DIV começa em "1" mas não passa do "2" e, além disso, a primeira DIV padrão, ao adicionar outra, é inutilizada, não consigo mais alterar as informações da mesma. Outro problema ocorre na ação de adicionar outras DIVs, fazendo com que as informações escolhidas nas DIVs anteriores sejam resetadas. A minha função de Remove, sempre que eu remover alguma DIV, sua DIV seguinte deve tomar seu número, fazendo o decremento, o que não está acontecendo. Alguém consegue me dar uma luz ?

index.php:

<div id="allProducts" name="allProducts">
            <div class="produtos-wrap" id="wrap-produtos-1" name="wrap-produtos-1"> <!---- DIV A SER CLONADA / ADICIONADA !---->
                <div class=" text-center select_height">
                    <b>Número:</b>
                    <div id="index" class="font-pop">1</div>
                </div>

                <div class="text-center select_height">
                    <b>ID:</b>
                    <div id="number_id_produto-1" class="font-pop"></div>
                </div>

                <div class=" select_height" id="div_produtos">
                    <b>Produto:</b>
                    <select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos-1" id="select_produtos-1" onchange="initProdutos(1);">
                        <?php
                        foreach ($result2 as $item_produtos) {
                            echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
                                . $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
                        }
                        ?>
                    </select>
                </div>

                <div class="text-center select_height">
                    <b>Embalagem:</b>
                    <br>
                    <input type="text" maxlength="2" class="edit-input font-pop" id="embalagem-1" name="embalagem-1" value="">
                </div>

                <div class="text-center select_height">
                    <b>Preço:</b>
                    <br>
                    <input type="text" maxlength="5" id="preco-1" name="preco-1" class="edit-input font-pop">
                </div>

                <div class="text-center select_height">
                    <b>Quantidade:</b>
                    <br>
                    <input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto-1" name="quantidade-produto-1">
                </div>

                <div class="text-center select_height">
                    <b>Preço do Produto:</b>
                    <div id="preco-produto-1" name="preco-produto-1" class="font-pop"></div>
                </div>

                <div class="text-center select_height">
                   <button id="remove-1" name="remove-1" class="remover">X</button>
                </div>
            </div>
        </div>
        <button id="add-button" onclick="">+</button>

elements.php:

<?php
error_reporting(0);
$id = $_GET['id'];

header('Content-Type: text/html; charset=utf-8');
# Coloquei o charset no começo, é melhor que a página toda obedece ele se estiver aqui, e mudei pra utf-8 pra funcionar os caracteres especiais

$servidor = 'localhost';
$usuario = 'root';
$senha = '';
$dbname = 'testevip';

$connect = mysqli_connect($servidor, $usuario, $senha, $dbname);
$query_produtos = "SELECT * FROM produto ORDER BY desc_produto ASC";
$result2 = mysqli_fetch_all(mysqli_query($connect, $query_produtos), MYSQLI_ASSOC);

mysqli_close($connect);
?>
<div class="produtos-wrap" id="wrap-produtos-<?=$id?>" name="wrap-produtos-<?=$id?>">
    <div class=" text-center select_height">
        <b>Número:</b>
        <div id="index" class="font-pop"><?=$id?></div>
    </div>

    <div class="text-center select_height">
        <b>ID:</b>
        <div id="number_id_produto-<?=$id?>" class="font-pop"></div>
    </div>

    <div class=" select_height" id="div_produtos">
        <b>Produto:</b>
        <select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos-<?=$id?>" id="select_produtos-<?=$id?>" onchange="initProdutos(<?=$id?>);">
            <?php
            foreach ($result2 as $item_produtos) {
                echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
                    . $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
            }
            ?>
        </select>
    </div>

    <div class="text-center select_height">
        <b>Embalagem:</b>
        <br>
        <input type="text" maxlength="2" class="edit-input font-pop" id="embalagem-<?=$id?>" name="embalagem-<?=$id?>" value="">
    </div>

    <div class="text-center select_height">
        <b>Preço:</b>
        <br>
        <input type="text" maxlength="5" id="preco-<?=$id?>" name="preco-<?=$id?>" class="edit-input font-pop">
    </div>

    <div class="text-center select_height">
        <b>Quantidade:</b>
        <br>
        <input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto-<?=$id?>" name="quantidade-produto-<?=$id?>">
    </div>

    <div class="text-center select_height">
        <b>Preço do Produto:</b>
        <div id="preco-produto-<?=$id?>" name="preco-produto-<?=$id?>" class="font-pop"></div>
    </div>

    <div class="text-center select_height">
       <button id="remove-<?=$id?>" name="remove-<?=$id?>" class="remover" >X</button>
    </div>
</div>

JQuery:

function initProdutos(product_id) {
    var product = ((product_id === undefined) ? 1 : product_id);
    var letras_produtos = $("#select_produtos-" + product).val()
    const $preco = $("#preco-" + product);
    const $qtd = $("#quantidade-produto-" + product);
    const $total = $("#preco-produto-" + product);

    function recalculate() {
        const total = Number($preco.val() || 0) * Number($qtd.val() || 0);
        $total.text("R$ " + total);
    }
    $.ajax({
        type: "GET",
        url: "API.php",
        data: {
            "mode": "produtos", letras_produtos
        },
        dataType: "JSON",
        //CASO DÊ TUDO CERTO
        success: function(data) {
            console.log(data);
            $('#embalagem-' + product).val(data[0]['embalagem']);
            $('#number_id_produto-' + product).text(data[0]['id_produto']);
            $preco.val(data[0]['preco_base']);
            recalculate();
        },
        error: function(request, error) {
            console.log("Request: " + JSON.stringify(request));;
        }
    });
    $preco.on('input', recalculate);
    $qtd.on('input', recalculate);
    recalculate();
};


var index = 1;
$(function () {
    var id = index + 1;
    $.ajax({
        type: "GET",
        url: "elements.php?id=" + id,
        //CASO DÊ TUDO CERTO
        success:function(data){
            $(document).on('click', '#add-button', function () {
                const div = document.getElementById('allProducts');
                div.innerHTML += data;
                index = id;
            })
            $(document).on('click', '.remover', function () {
                $(this).parents('.produtos-wrap').remove();
                index = id - 1;
            })
        },
        error:function(request, error)
        {
            console.log(error);
            // console.log("Request: " + JSON.stringify(request));
        }
    });
})

Por fim um print de como está no navegador: https://prnt.sc/o0i6fw

3
  • Não é a melhor forma colocar id em tudo quanto é elemento (aliás, é a pior forma). Isso porque não vai dar certo caso seja removida uma div no meio das outras, porque ela vai pegar uma id menor que já existe. Use apenas uma id para identificar a div toda e a cada adição e remoção, use uma função para reorganizar a numeração. Resumindo, tem que reavaliar o código.
    – Sam
    Commented 11/06/2019 às 15:39
  • Entendo Sam. Você tem conhecimento de alguma outra pergunta que tenha um tópico parecida a qual eu possa pegar de referência, algum video ou material na internet, ou até mesmo uma dica de como posso começar a refatorar o código da maneira correta ?
    – leozera
    Commented 11/06/2019 às 15:47
  • Vou postar uma resposta.
    – Sam
    Commented 11/06/2019 às 16:14

1 Resposta 1

2

Como comentei, não precisa (nem faz sentido) colocar id's em tudo quanto é elemento, ou alterar os names com nomes diferentes.

A única coisa que você precisa enumerar é o texto desta div abaixo, que enumera a lista:

<div id="index" class="font-pop">1</div>

Só que, em vez de usar id="index", use class="index". Isso porque quando você clonar a div, se usar id="index", irá duplicar a id, e isso não pode. Já a classe você pode duplicar sem problemas. Então ficará assim:

<div class="index" class="font-pop">1</div>

Outro ponto é que você não precisa usar AJAX para inserir uma div igual a que já é carregada na página. Basta clonar a que existe. Portanto, não precisa usar AJAX. Em vez disso, crie uma função que clona a div, usando .append().

Para isso, crie uma cópia da div ao carregar a página:

$(function () {
   var clone = $('#allProducts').html(); // cópia da div existente
   ...

E a função que irá adicionar uma nova div:

function addProd(){
   $('#allProducts').append(clone);
   ids(); // enumera as divs
}

A função ids() é para enumerar as divs. Ela deve ser chamada sempre que uma div for adicionada ou removida:

function ids(){
   $(".index").each(function(i,e){
      $(e).text(i+1);
   });
}

Ela irá buscar todas as classes .index e alterar o texto com os números na sequência.

Essa parte do script irá ficar assim completa:

$(function () {
   var clone = $('#allProducts').html();
   $(document).on('click', '#add-button', addProd);

   $(document).on('click', '.remover', function () {
      $(this).parents('.produtos-wrap').remove();
      ids();
   });

   function addProd(){
      $('#allProducts').append(clone);
      ids();
   }

   function ids(){
      $(".index").each(function(i,e){
         $(e).text(i+1);
      });
   }
})

O HTML

Retire todos os id's e altere os name's em forma de array, acrescentando os colchetes no final do name, desta forma, por exemplo:

<input type="text" maxlength="2" class="edit-input font-pop" name="embalagem[]" value="">
                                                                            ↑↑

E retire os name de divs, porque esse atributo é para elementos de formulário (input, select etc).

Retire a id="number_id_produto" e adicione a classe .number_id_produto na div referente ao ID:

<div class="text-center select_height">
  <b>ID:</b>
  <div class="font-pop number_id_produto"></div>
</div>

Adicione uma classe .preco-produto na div do preço do produto para poder ser achada.

No final, seu HTML deverá ficar desta forma:

<div id="allProducts">
   <div class="produtos-wrap"> <!---- DIV A SER CLONADA / ADICIONADA !---->
       <div class=" text-center select_height">
           <b>Número:</b>
           <div class="index" class="font-pop">1</div>
       </div>

       <div class="text-center select_height">
           <b>ID:</b>
           <div class="font-pop number_id_produto"></div>
       </div>

       <div class=" select_height">
           <b>Produto:</b>
           <select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos[]" onchange="initProdutos(this);">
               <?php
               foreach ($result2 as $item_produtos) {
                   echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
                       . $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
               }
               ?>
           </select>
       </div>

       <div class="text-center select_height">
           <b>Embalagem:</b>
           <br>
           <input type="text" maxlength="2" class="edit-input font-pop" name="embalagem[]" value="">
       </div>

       <div class="text-center select_height">
           <b>Preço:</b>
           <br>
           <input type="text" maxlength="5" name="preco[]" class="edit-input font-pop">
       </div>

       <div class="text-center select_height">
           <b>Quantidade:</b>
           <br>
           <input type="text" maxlength="3" class="edit-input font-pop" value="0" name="quantidade-produto[]">
       </div>

       <div class="text-center select_height">
           <b>Preço do Produto:</b>
           <div class="font-pop preco-produto"></div>
       </div>

       <div class="text-center select_height">
          <button class="remover">X</button>
       </div>
   </div>
</div>
<button id="add-button" onclick="">+</button>

Questão do onchange do select

Altere o parâmetro pra this:

onchange="initProdutos(this);"

O this será recebido na função initProdutos, que será o próprio select. Aí basta buscar a div principal do select com .closest(".produtos-wrap") e usar .find() para encontrar os elementos que você quer, que pode ser pelo name, já que eles são únicos.

A função initProdutos deverá ficar assim:

function initProdutos(e) {
    var wraper = $(e).closest(".produtos-wrap"); // pega a div principal
    var letras_produtos = $(e).val()
    const $preco = $("[name='preco[]']", wraper);
    const $qtd = $("[name='quantidade-produto[]']", wraper);
    const $total = $(".preco-produto", wraper);

    function recalculate() {
        const total = Number($preco.val() || 0) * Number($qtd.val() || 0);
        $total.text("R$ " + total);
    }
    $.ajax({
        type: "GET",
        url: "API.php",
        data: {
            "mode": "produtos", letras_produtos
        },
        dataType: "JSON",
        //CASO DÊ TUDO CERTO
        success: function(data) {
            $('[name="embalagem[]"]', wraper).val(data[0]['embalagem']);
            $('.number_id_produto', wraper).text(data[0]['id_produto']);
            $preco.val(data[0]['preco_base']);
            recalculate();
        },
        error: function(request, error) {
            console.log("Request: " + JSON.stringify(request));;
        }
    });
    $preco.on('input', recalculate);
    $qtd.on('input', recalculate);
    recalculate();
};
4
  • Sam, agradeço imensamente pela sua ajuda e explicação. Fiz a troca do código para fazer o teste, e a parte das DIVs estão funcionando de maneira perfeita, porém, o carregamento dos dados que chegam do banco não está acontecendo. O erro que volta para mim através do console, é o "parsererror" na função initProdutos. Sabe que que pode ser ?
    – leozera
    Commented 11/06/2019 às 17:34
  • Faltou fechar um colchete nesta linha: const $qtd = $("[name='quantidade-produto[]']", wraper);
    – Sam
    Commented 11/06/2019 às 17:37
  • Aqui tb: $('[name="embalagem[]"]'
    – Sam
    Commented 11/06/2019 às 17:37
  • 1
    Ah sim, fechei as que faltavam e deu certo. Muito obrigado pela ajudação Sam, agradeço de coração pela explicação, me ajudou bastante a entender como deveria ter feito !
    – leozera
    Commented 11/06/2019 às 17:42

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 .