I have a system where it is possible to add new colors (Include nova cores). Look:
In the option Grids (Grades), we can choose Woman and Man. This option comes from the database and fetches the sizes for that grid. In the table sizes we have a foreign key of the grids of the table.
However, when I click the Add New Color option (Include nova cor) and select another grid (Grades), the sizes of that grid will also appear in the first previously selected grid. How can I get the sizes to appear correctly within each grid?
The code is the following:
HTML
<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($grades); ?>
<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>
</td>
<td style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
</tr>
<tr><td colspan="3" class="text-right">
<button type="button" class="adicionarCampo btn btn-success" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Incluir nova cor</button>
</div>
</td></tr>
</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[type="text"]').val("");
novoCampo.find('select').val("");
novoCampo.find('.mostrarGrades').empty();
valorEscolhido = $(this).find('option:selected').val(); //PERMANECE
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]);
}
}
});
});
});
list.php
$grades = $_REQUEST["v"];
echo $metodos->listarTamanhos($grades);
listSizes($grades) method
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))
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 .= '</tr>';
}
$visualiza[] = $visualizar;
return json_encode($visualiza);
}
Sorry for my Spanish, but I hope my question is clear.
In your javascript code you have the following:
where
$('.mostrarGrades')
refers to all elements withclass="mostrarGrades"
, but you only want to change the one that belongs to the sameTR
one thatSELECT.grades
the user has changed, so you have to restrict the search to that row: