0
Good morning guys, I have a problem where I have done something similar in other functions of my system but this particular one is not working. I have a function that adds and removes Divs of products in my system and these contain a SELECT that brings the names of the Products, when the product is chosen is also populated its Code, its Packaging and the quantity of its Packaging. The problem is that each SELECT to be chosen should popular the data in its DIV and is occurring that is populating in all of the other products. How can I walk and only popular in the right fields ?
main.php // Structure of DIV Products:
<div class="container" id="produtos">
<div class="separator"></div>
<div class="title-padrao">
<h1 class="text-center">
Produtos
</h1>
</div>
<div id="allProducts">
<section id="all-section">
<div class="inform-produtos">
<div class="primeira">
<b>Item:</b>
</div>
<div class="segunda">
<b>Cod.:</b>
</div>
<div class="terceira">
<b>Selecione um produto:</b>
</div>
<div class="quantidade-embalagem">
<b>Qtd. Embalagem:</b>
</div>
<div class="quarta">
<b>Embalagem:</b>
</div>
<div class="quinta">
<b>Preço:</b>
</div>
<div class="sexta">
<b>Quantidade:</b>
</div>
<div class="setima">
<b>Preço Produto:</b>
</div>
</div>
<div class="clone-prod" name="clone-prod[]">
<div class="wrap-prod" name="wrap-prod[]">
<div class="produtos-wrap" name="produtos-wrap[]">
<div class="text-center select_height produto-padrao" id="primeiro-produto">
<input type="text" class="index font-pop input-div" id="index_produto"
name="index_produto[]" value="1" readonly="true" required>
</div>
<div class="text-center select_height produto-padrao" id="segundo-produto">
<input class="font-pop number_id_produto input-div" value=""
readonly="true" name="id_produto[]" required>
</div>
<div class="text-center select_height produto-padrao terceiro-produto"
id="terceiro-produto" name="terceiro-produto[]">
<select class="selectpicker form-control" data-show-subtext="false"
data-live-search="true" name="select_produtos[]"
id="select_produtos" onchange="initProdutos(this)" required>
<?php
echo '<option disabled selected hidden
value="Selecione um produto..."
data-subtext="Selecione um produto...">Selecione um produto...
</option>';
foreach ($res as $item_produtos) {
echo '<option data-subtext="' . $item_produtos['CODACESSO'] . '" value="'
. $item_produtos['CODACESSO'] . "|" . $item_produtos['EMBALAGEM'] . "|"
. $item_produtos['QTDEMBALAGEM'] . '">' . $item_produtos['DESCCOMPLETA'] . '</option>';
}
?>
</select>
</div>
<div class="text-center select_height produto-padrao" id="quantidade-embalagem">
<input type="text" class="edit-input font-pop"
name="qtdembalagem[]" value="" required>
</div>
<div class="text-center select_height produto-padrao" id="quarto-produto">
<input type="text" maxlength="2" class="edit-input font-pop"
name="embalagem[]" value="" required>
</div>
<div class="text-center select_height produto-padrao" id="quinto-produto">
<input type="number" id="preco-input" name="preco[]" step="0.01" min="0"
class="edit-input font-pop" required>
</div>
<div class="text-center select_height produto-padrao" id="sexto-produto">
<input type="number" id="qtd-input" step="0.01" min="0"
class="edit-input font-pop" value="" name="quantidade-produto[]"
required>
</div>
<div class="text-center select_height produto-padrao" id="setimo-produto">
<input class="font-pop preco-produto input-div" readonly="true"
name="preco-produto[]" required>
</div>
</div>
<div class="text-center select_height produto-padrao oitavo-produto"
id="div-remove">
<button type="button"
class="remover glyphicon glyphicon-remove button-produto"></button>
</div>
</div>
</div>
</section>
<div id="wrap-addbutton">
<button type="button" id="add-button"
class="glyphicon glyphicon-plus-sign button-produto"></button>
<b>Adicione um produto...</b>
</div>
</div>
</div>
Function that adds / removes Products:
$(document).ready(function () {
var clone = $(".clone-prod").html();
$(document).on('click', '#add-button', addProd);
$(document).on('click', '.remover', function () {
if ($('.wrap-prod').length === 1) {
$('.remover').attr('disabled', true);
alert('Não é possivel remover o único produto do Pedido !');
} else {
$(this).parents('.wrap-prod').remove();
ids();
calculos();
}
});
function addProd() {
$('.clone-prod').append(clone);
ids();
$('.clone-prod .selectpicker').selectpicker();
$('.remover').attr('disabled', false);
}
function ids() {
$("[name='index_produto[]']").each(function (i, e) {
$(e).val(i + 1);
});
}
})
Function that captures the value / populate the Product data:
var prod = [];
function initProdutos(e) {
var wraper = $(e).closest(".produtos-wrap"); // pega a div principal
var letras_produtos = $("[name='select_produtos[]']", wraper).val();
const $preco = $("[name='preco[]']", wraper);
const $qtd = $("[name='quantidade-produto[]']", wraper);
$.ajax({
type: "GET",
url: "API.php",
data: {
"mode": "produtos",
"letras_produtos": letras_produtos
},
dataType: "JSON",
//CASO DÊ TUDO CERTO
success: function (data) {
prod = [];
var len = data.length;
for (var i = 0; i < len; i++) {
prod.push(data[i]['CODACESSO'] + "|" + data[i]['EMBALAGEM'] + "|" + data[i]['QTDEMBALAGEM']);
}
},
error: function (request, error) {
//console.log("Request: " + JSON.stringify(request));
}
});
$preco.on('input', recalculate());
$qtd.on('input', recalculate());
}
$(document).on("change", "[name='select_produtos[]']", function () {
setValue(this.value);
});
function setValue(valor) {
var tmp = valor.split("|");
var wraper = $("[name='select_produtos[]']").closest(".produtos-wrap");
$('[name="id_produto[]"]', wraper).val(tmp[0]);
$('[name="embalagem[]"]', wraper).val(tmp[1]);
$('[name="qtdembalagem[]"]', wraper).val(tmp[2]);
}