javascript Resultados duplicados quando seleciona o select

[Marcos RJ 0]

Olá pessoal, tudo bem?

 

Tenho um sistema do qual traz em um combobox a relação de grades (masculino, feminino, etc) do banco de dados e a mesma tabela tem chave estrangeira na tabela dos tamanhos. Quando seleciono uma grade, os tamanhos referentes a essa grade aparecem. O problema está quando clico em Incluir nova cor e seleciono uma outra grade. Os tamanhos da nova grade selecionada aparece também na grade já selecionada anteriormente, ou seja, o valor acaba se duplicando. O que está acontecendo é que valor chega até o JQuery, porém quando passo o valor por:

 url: '<?php echo $caminhoAbsoluto; ?>/listar.php?v='+valorEscolhido, 

E pego pelo código abaixo:

 

$grades = $_REQUEST["v"];
echo $metodos->listarTamanhos($grades);
 

Ele pega o último valor selecionado, porém duplica conforme o anexo. Vejam:

 

public function listarTamanhos($grades)
{
    $visualizar = '<table class="table table-bordered">
                        <tr>
                        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Tamanho</td>
                        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Quantidade</td>
                        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">EAN</td>
                        </tr>';
    $sql = mysqli_query($this->conexao,"SELECT * FROM loja_tamanho_grades WHERE IdGrades = '".$grades."';");
    //while($isfast = mysqli_fetch_object($sql))
    // $i = 0;
    while($isfast = mysqli_fetch_assoc($sql))
    {
        $sqlTamanhos = mysqli_query($this->conexao,"SELECT * FROM loja_tamanhos WHERE IdTamanhos = '".$isfast["IdTamanhos"]."';");
        $isfastTamanhos = mysqli_fetch_assoc($sqlTamanhos);
        $visualizar .= '<tr>
                                <td style="font-weight: bold; text-align: center; font-size: 20px; font-style:Arial">'.$isfastTamanhos["Tamanhos"].'</td>
                                <td><input type="number" class="form-control" min="0" oninput="this.value = Math.abs(this.value)" value="0"></td>
                                <td><input type="text" class="form-control" maxlength="17" style="width: 100%"></td>
                            </tr>';        
        $visualizar .= '<tr>';
        // $visualizar .= '<td colspan="3"><div class="mostrarGrades_'.$i.'"></div></td>';
        $visualizar .= '</tr>';                                                    
    // $i++;                 
    }    
    //  $visualizar .= '<tr><td colspan="3"><div class="mostrarGrades"></div></td></tr>';        
    //$visualizar .= '</table>';    
    //return $visualizar;
    $visualiza[] = $visualizar;
    return json_encode($visualiza);
}

Como faço para que não tenha duplicidade. Veja abaixo o restante do código:

<table width="100%" >
<tr class="linhas">
<td>
<table class="table table-bordered">
<tr>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>
    </tr>
<tr>
    <td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>
    <td style="text-align: center; width: 30%">
    <select name="CoresBasicas" class="form-control">
    <?php echo $metodos->comboCores($key); ?>
    </select>        
    </td>
    <td style="text-align: left;">
        <select name="Grades" class="form-control grades" style="width: 100%">
        <?php echo $metodos->comboGrades(); ?>
        </select>    
    </td>
    </tr>
    <tr>
    <td colspan="3">    
    <?php //echo $metodos->listarTamanhos(); ?>
    <div class="mostrarGrades"></div>    
</td>
</tr>
<tr>
<td colspan="3" class="text-left">

<label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>

</td>
</table>

Jquery

$(function () {
  function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    //novoCampo.find("input").val("");
    novoCampo.find('input[type="text"]').val("");
    novoCampo.find('select').val("");

    //novoCampo.find('input[type="radio"]').prop('selected', false);
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});
$(document).ready( function (){
  $(document).on('change', '.grades', function(){
	valorEscolhido = $(this).find('option:selected').val();  
	$.ajax({
		type:'post',
		dataType: 'json',
		url: '<?php echo $caminhoAbsoluto; ?>/listar.php?v='+valorEscolhido,
		success: function(dados){
			/*
			for(var i=0;dados.length>i;i++){
				$('.mostrarGrades').html(dados[i]);				
			}
			*/
			$('.mostrarGrades').html(dados);
		}
	});	
  });
});

Obrigado!

 

[wanderval 19]

Está faltando código onde está a implementação referente aos headers (Tamanho, Quantidade, EAN) aparentemente é uma segunda tabela e tem papel principal no problema o segundo ponto e que você não postou nenhuma estrutura de objeto, lamento mas se você não postar um exemplo do problema nunca terá uma solução de bug apenas especulação, como você colocou (database, php como back-end, e JS como front-end) o mínimo esperado e que seu código frond-end sejá completo e esse não é o caso.

 

Outro ponto e que sua descrição está incoerente com o seu código de exemplo, afinal toda vez que você altera a grade todo conteúdo do elemento "mostrarGrades" será substituído então o método "adicionarCampo" perde o sentido já que tudo será substituído pelos dados pegos do banco 

[Marcos RJ 0]

10 horas atrás, wanderval disse:

Está faltando código onde está a implementação referente aos headers (Tamanho, Quantidade, EAN) aparentemente é uma segunda tabela e tem papel principal no problema o segundo ponto e que você não postou nenhuma estrutura de objeto, lamento mas se você não postar um exemplo do problema nunca terá uma solução de bug apenas especulação, como você colocou (database, php como back-end, e JS como front-end) o mínimo esperado e que seu código frond-end sejá completo e esse não é o caso.

 

Outro ponto e que sua descrição está incoerente com o seu código de exemplo, afinal toda vez que você altera a grade todo conteúdo do elemento "mostrarGrades" será substituído então o método "adicionarCampo" perde o sentido já que tudo será substituído pelos dados pegos do banco 

 

Olá, Wanderval. Fiz os ajustes necessários e alterei a imagem para ficar mais claro minha dúvida.  Certo. Pensei em colocar o elemento mostrarGrades dentro do laço do PHP no método listarTamanhos dessa forma: 

<?php 
...
mostrarGrades_'.$i

Mas sou leigo no Jquery e não sei como eu poderia fazer isso, pois creio que se eu fizer dessa forma, terei que mexer também no Jquery. Como posso resolver para que não ocorra essa substituição?