Jump to content
Marcos RJ

Resultados duplicados quando seleciona o select

Recommended Posts

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!

 

Screenshot_20200626_070437.png

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Vinixops
      Bom dia!
       
      Não estou conseguindo receber os dados de um campo textarea e um select. Estou tentando via jquery. Todos os campos input são recebido corretamente.
      Testei de várias formas e não consegui.
       
      Vou colocar os trechos do código. Fico grato caso alguém possa ajudar.
       
       
      Função que uso para enviar os dados para página que fazer o tratamento.
      // --> Envia dados Formulario Orçamento - Start <--
          jQuery(function($){                
              $('#OrcIndex').submit(function(){
                  event.preventDefault();                    
                  $.post('CadastraOrcIndex.asp', $('#OrcIndex input'), function(retorno){
                      if(retorno){                        
                          //alert(retorno);
                          $("#PrintaOrcIndex").html(retorno);
                      }else{
                      }
                  }, 'html');
                  return false;
              });
          });
      // --> Envia dados Formulario de Orçamento - End <--
       
      Formulário o que preciso enviar os dados para tratamento.
       
                               <form method="post" id="OrcIndex" name="OrcIndex">
                                      <input type="hidden" id="latitude" name="Latitude">
                                      <input type="hidden" id="longitude" name="Longitude">
                                  <div class="row g-3">
                                      <div class="col-12 col-sm-6">
                                          <label>Seu nome</label>
                                          <input name="NomeOrc" type="text" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Seu e-mail</label>
                                          <input name="EmailOrc" type="email" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Seu celular</label>
                                          <input name="CelularOrc" type="text" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Escolha o setor</label>
                                          <select name="SetorOrc" id="SetorOrc" class="form-select border-0" style="height: 55px;">
                                              <option value="Selecione" selected>Selecione</option>
                                              <option value="Energia Solar">Energia Solar</option>
                                              <option value="Aquecimento Solar">Aquecimento Solar</option>
                                              <option value="Câmeras e Monitoramento">Câmeras e Monitoramento</option>
                                              <option value="Automação Residencial">Automação Residencial</option>
                                              <option value="Automação Comercial">Automação Comercial</option>
                                              <option value="Redes e Informática">Redes e Informática</option>
                                          </select>
                                      </div>
                                      <div class="col-12">
                                          <label>Detalhe sua necessidade </label>
                                          <textarea name="DetalheOrc" id="DetalheOrc" class="form-control border-0"></textarea>
                                      </div>
                                      <div class="col-12">
                                          <button class="btn btn-primary rounded-pill py-3 px-5" type="submit">Solicitar Orçamento</button>
                                      </div>
                                  </div>
                              </form>
                          <span id="PrintaOrcIndex">&nbsp;</span>
    • By vmenezes
      ola galera . tenho uma aplicação com asp  e utilizo javascript para bater foto do cliente . consigo apos a foto batida salvar no pc com o ID do cliente,
      porem gostaria que assim que a foto fosse batida salvasse na raiz do proprio site.
      tem como fazer isso ?
      obg
    • By marco_fcp
      Estou tentando criar este código para quando escolher uma option no select, ele pegar nesse valor, e somar com quantos checksbox o utilizador quiser. Aí, no fim, no campo do valortotal conforme a option que escolher, irá subtrair um desconto do valor total. Penso ter feito os scripts, mas não estou a conseguir o resultado final com o desconto, dinâmico no mesmo campo.
      <!-- Pedido de Orçamento --> <div class="container-fluid mb-5"> <div class="row"> <div class="col-lg-2"></div> <div class="col-lg-8 mb-5"> <div class="caixa-orcamento pb-5"> <form action="" method="POST" onchange="atualizarPreco()" name="formulario"> <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3> <table class="m-auto"> <tr> <td class="fw-bold labels">Tipo de página web:</td> <td> <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente --> <select name="tipopagina" id="tipopagina" required> <option value="0"></option> <option value="400" id="estatica">Estática</option> <option value="500" id="dinamica" >Dinâmica</option> <option value="600" id="loja" >Loja</option> </select> </td> </tr> <tr> <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% --> <td class="fw-bold labels">Prazo em meses:</td> <td><input type="number" id="prazo"></td> </tr> </table> <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5> <!-- Cada check selecionado soma 400 ao valor total --> <div class="checkbox labels text-center mb-5"> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Quem Somos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Onde estamos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Galeria de fotografias <br> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">eCommerce <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Gestão Interna <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Notícias <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Redes Sociais </div> <h5 class="text-center labels">Orçamento estimado:</h5> <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p> <div class="resultado-orcamento text-center"> <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento --> <input type="text" id="valor-orcamento" name="valor-orcamento" value=""> <br> <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button> <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button> </div> </form> </div> </div> <div class="col-lg-2"></div> </div> </div> function atualizarPreco() { var preco = 0; // Tipo de página Selecionada com preços Diferentes if (document.getElementById('tipopagina').value == '400') { preco = 400; } if (document.getElementById('tipopagina').value == '500') { preco = 500; } if (document.getElementById('tipopagina').value == '600') { preco = 600; } // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%) var prazo = document.getElementById('prazo').value; if (prazo == 0) { preco = preco + 0; } else if (prazo == 1) { preco = preco - (preco * 0.05); } else if (prazo == 2) { preco = preco - (preco * 0.10); } else if (prazo == 3) { preco = preco - (preco * 0.15); } else { preco = preco - (preco * 0.20); } document.getElementById('valor-orcamento').value = preco; // Código que soma 400€ ao total por cada checkbox selecionado var soma1 = 0; function somar(check) { if ( check.checked ){ soma1 += 1*check.value; } else { soma1 -= 1*check.value; } document.getElementById("valor-orcamento").value = soma1; } }  
    • By luiz monteiro
      Olá, tudo bem?
       
      Estou tentando colocar um evento dropdown em um template.js mas sem sucesso.
       
      O script é o seguinte
       
      const template = `
      <nav id="sidebar">

          <ul class="list-unstyled menu">
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                      Home
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                      Analytics
                  </a>
              </li>
              <li>
              <a href="#">
                  <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
                  Ações
              </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                      Controles
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                      Configurações
                  </a>
              </li>
          </ul>

          </nav>
      `
      export default {
        name: "Sidebar", 
        template,
        delimiters: ["#{", "}#"]
      }
       
       
       
       
      ============Preciso colocar um dropdown na opção Ações, algo assim
       
                      <li
                          v-for="item in items">
                          <a :href="item.url"
                             v-if="!item.children">
                              
                          </a>
                          <span
                              v-else
                              v-on:mouseover="mouseover"
                              v-on:mouseleave="mouseleave">
                              {{ item.name }}
                              
                              <ul class=" dropdown"
                                 :class="{ isOpen }">
                                  <li
                                      v-for="child in item.children">
                                      <a :href="child.url">
                                          {{ child.name }}
                                      </a>
                                  </li>
                              </ul>
                          </span>
                      </li>
       
      var nav = new Vue({
          el: '#nav',
          data: {
              isOpen: false,
              items: [
                  {
                      url: '#acoes',
                      name: 'Ações',
                      children: [
                          {
                              url: '#link1',
                              name: 'Opção 1'
                          },
                          {
                              url: '#link2',
                              name: 'Opção 2'
                          },
                          {
                              url: '#link3',
                              name: 'Opção 3'
                          },
                      ]
                  }
              ]
          },
          methods: {
              mouseover: function () {
                  this.isOpen = true;
              },
              mouseleave: function () {
                  this.isOpen = false;
              }
          }
      });
       
       
       
      Quando coloco a programação no sidebar.js, não é exibido nada na tela nem mesmo retorna erro.
       
       
      =============No index os imports estão assim
       
          <script type="importmap">
            {
              "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
              }
            }
          </script>
          <script type="module">
            import { createApp } from "vue";
            import Sidebar from "/components/sidebar.js";
            import Welcome from "/components/welcome.js";
            const app = createApp({
                delimiters: ["#{", "}#"],
                components: {
                  Welcome,
                  Sidebar
                },
                data() {
                  return {}
                },
                methods: {
                
                }
              }).mount("#wrapper");
          </script>
        </body>
       
      Agradeço desde já.
       
       
       
    • By nathanmoreira
      Após diversos cálculos provindos de um código, recebo um número inteiro ao qual não sei o tamanho ao certo (pode variar de 1 pra frente). Quero passar esse número para string e formatar ele de maneira a colocar um ,00 no final e, a cada 3 números antes da virgula, um ponto. Ou seja, deixar o número num formato como: 45.114.477,00
       
      Como fazer? 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.