Ir ao conteúdo
Regras do Clube do Hardware

PHP Ferramenta Select2 atrapalhando outra função

João pedro chaves

Por João pedro chaves
em Web e banco de dados

 Compartilhar

Posts recomendados

João pedro chaves
 

João pedro chaves

Postado
Postado

Olá a todos, estou tentando usar o "select2" mas no meu código eu tenho que adicionar campos a mais porém após adicionar ele, meu código não funciona mais com os campos adicionais, alguém saberia dizer o motivo?

 

O código de adição de campos a mais. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
   $(document).on('change', '#promotor', function () {
      var value  = $(this).val();
      var option = $(this).find("option:selected");

      var cpf       = option.data('cpf');
      var rg        = option.data('rg');

      $('#promotor' ).val(value);
      $('#rg'       ).val(rg);
      $('#cpf'      ).val(cpf);
   });
</script>

<script type="text/javascript">
   $(document).on('change', '#pdv', function () {
      var value  = $(this).val();
      var option = $(this).find("option:selected");

      var numero    = option.data('numero');
      var rua       = option.data('rua');
      var bairro    = option.data('bairro');
      var cidade    = option.data('cidade');
      var estado    = option.data('estado');
      var cep       = option.data('cep');
      var cnpj      = option.data('cnpj');

      $('#pdv'      ).val(value);
      $('#cnpj'     ).val(cnpj);
      $('#rua'      ).val(rua);
      $('#bairro'   ).val(bairro);
      $('#cidade'   ).val(cidade);
      $('#estado'   ).val(estado);
      $('#cep'      ).val(cep);
      $('#numero'   ).val(numero);
   });
</script>

Meu Código dos campos visíveis: 

<script>
                    $(document).ready(function() {
    $('#promotor').select2();
});

$(document).ready(function() {
    $('#pdv').select2();
});
</script>

            <form method="POST" action="gera-carta.php" enctype="multipart/form-data">
                <li>*Promotor:
                    <select required id="promotor" name="promotor">
                <option style="display:none" disabled selected value>-- Selecione um Promotor --</option>

                <?php 
                $resultado_promotor = "SELECT * FROM colaboradores"; 
                $resultado_da_seleção_promotor = mysqli_query($mysqli, $resultado_promotor);
                while($row_promotor = mysqli_fetch_assoc($resultado_da_seleção_promotor)){
                ?>
                <option value="<?php echo $row_promotor['Nome']?>" 
                data-rg="<?php echo $row_promotor['Rg']?>" 
                data-cpf="<?php echo $row_promotor['Cpf']?>">
            <?php echo $row_promotor['Nome']?>
            </option>
                
            <?php }?>
                    </select>
                </li><br>
                            <li>CPF:
                                <input id="cpf" readonly="true" type="text" name="cpf"><br>
                            </li>
                            <li>RG:
                                <input id="rg" readonly="true" type="text" name="rg"><br>
                            </li><br>

                <li>*PDV:
                    <select required id="pdv" name="pdv">
                        <option style="display:none" disabled selected value> -- Selecione um PDV -- </option>
                                        
                    <?php 
                    $resultado_PDV = "SELECT * FROM pdv";
                    $resultado_da_seleção_pdv = mysqli_query($mysqli, $resultado_PDV);
                    while($row_pdv = mysqli_fetch_assoc($resultado_da_seleção_pdv)){
                    ?>
                        <option type="checkbox" 
                            value=         "<?php echo $row_pdv['Razão Social']?>"
                            data-rua=      "<?php echo $row_pdv['Endereço']?>" 
                            data-numero=   "<?php echo $row_pdv['Número']?>" 
                            data-bairro=   "<?php echo $row_pdv['Bairro']?>" 
                            data-cidade=   "<?php echo $row_pdv['Cidade']?>" 
                            data-Estado=   "<?php echo $row_pdv['Estado']?>" 
                            data-cep=      "<?php echo $row_pdv['CEP']?>" 
                            data-cnpj=     "<?php echo $row_pdv['CNPJ']?>">

                                <?php echo $row_pdv['Nome Comercial']?>
                        </option>
                <?php }?>
                    </select>

 

João pedro chaves
 

João pedro chaves

Postado
  • Autor
Postado

Olá, @washalbano Obrigado por me responder, então, o meu código estava funcionando perfeitamente antes do select2, mas surgiu a necessidade de pesquisar em alguns selects, então resolvi usar o select2, mas após adicionar ele o código de adição de campos não funciona mais, que é um código que pega os campos que vem junto da tabela mySQL, e os mostram em campos de texto, mas agora com o select2 eles não aparecem mais.

 

o código index completo. 

<?php

include_once("conexao.php");
include_once("MySQL.php");
include_once("mais-campos.php");
?>          


            
<!DOCTYPE html>
<!--selecionar o idioma principal-->
<html lang="pt-br">
<!--o que vai ser passado para o navegador-->

<head>
    <meta charset="UTF-8">
    <title>Gerador de Cartas</title>
    <link rel="stylesheet" href="style-carta.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function() {
            $("#datepicker").datepicker();
        });
    </script>
   
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>


</head>
<!--o que vai aparecer no navegador-->


<body>

    <img id="logo" src="logo_tembrazil_original_01.png" alt="">

    <h1>Trade & Marketing Brazil</h1>

    <p id="missao"><strong> Gerador de Cartas Para Promotores</strong>.</p>

    <p>Use esse gerador para automatizar a criação da carta de apresentação para o PDV.<br>
Para alteração do arquivo ultiliza as tags desta forma, para suas determinadas Informações.
</P>
<p>
#Funcionario#, #CPF#, #RG#, #Início#, #Final#, #RazãoSocialPDV#, #CNPJPDV#, #endereço#, #RazãoSocialCliente#, #numeração#, #bairro#, #cidade#, #estado#, #cep#
</p>

    <h2 id="titulo">Gerador de Cartas

        <ul>

        <script>
                    $(document).ready(function() {
    $('#promotor').select2();
});

$(document).ready(function() {
    $('#pdv').select2();
});
</script>

            <form method="POST" action="gera-carta.php" enctype="multipart/form-data">
                <li>*Promotor:
                    <select required id="promotor" name="promotor">
                <option style="display:none" disabled selected value>-- Selecione um Promotor --</option>

                <?php 
                $resultado_promotor = "SELECT * FROM colaboradores"; 
                $resultado_da_seleção_promotor = mysqli_query($mysqli, $resultado_promotor);
                while($row_promotor = mysqli_fetch_assoc($resultado_da_seleção_promotor)){
                ?>
                <option value="<?php echo $row_promotor['Nome']?>" 
                data-rg="<?php echo $row_promotor['Rg']?>" 
                data-cpf="<?php echo $row_promotor['Cpf']?>">
            <?php echo $row_promotor['Nome']?>
            </option>
                
            <?php }?>
                    </select>
                </li><br>
                            <li>CPF:
                                <input id="cpf" readonly="true" type="text" name="cpf"><br>
                            </li>
                            <li>RG:
                                <input id="rg" readonly="true" type="text" name="rg"><br>
                            </li><br>

                <li>*PDV:
                    <select required id="pdv" name="pdv">
                        <option style="display:none" disabled selected value> -- Selecione um PDV -- </option>
                                        
                    <?php 
                    $resultado_PDV = "SELECT * FROM pdv";
                    $resultado_da_seleção_pdv = mysqli_query($mysqli, $resultado_PDV);
                    while($row_pdv = mysqli_fetch_assoc($resultado_da_seleção_pdv)){
                    ?>
                        <option type="checkbox" 
                            value=         "<?php echo $row_pdv['Razão Social']?>"
                            data-rua=      "<?php echo $row_pdv['Endereço']?>" 
                            data-numero=   "<?php echo $row_pdv['Número']?>" 
                            data-bairro=   "<?php echo $row_pdv['Bairro']?>" 
                            data-cidade=   "<?php echo $row_pdv['Cidade']?>" 
                            data-Estado=   "<?php echo $row_pdv['Estado']?>" 
                            data-cep=      "<?php echo $row_pdv['CEP']?>" 
                            data-cnpj=     "<?php echo $row_pdv['CNPJ']?>">

                                <?php echo $row_pdv['Nome Comercial']?>
                        </option>
                <?php }?>
                    </select>

                </li><br>
                        <div>
                            <li>Rua:
                                <input id="rua" readonly="true" type="text" name="rua"><br>
                            </li>
                            <li>Número:
                                <input id="numero" readonly="true" type="text" name="numero"><br>
                            </li>
                            <li>Bairro:
                                <input id="bairro" readonly="true" type="text" name="bairro"><br>
                            </li>
                            <li>Cidade:
                                <input id="cidade" readonly="true" type="text" name="cidade"><br>
                            </li>
                            <li>Estado:
                                <input id="estado" readonly="true" type="text" name="estado"><br>
                            </li>
                            <li>CEP:
                                <input id="cep" readonly="true" type="text" name="cep"><br>
                            </li>
                            <li>CNPJ:
                                <input id="cnpj" readonly="true" type="text" name="cnpj"><br>
                            </li><br>
                        </div>

                <li>*Campanha:
               <!--value é o que vai aparecer no docx, e o que vem depois, é o que vai aparecer na página-->
                    <select required name="campanha">
                    <option style="display:none" disabled selected value> -- Selecione uma campanha -- </option>

                        <?php 
                        $resultado_Campanha = "SELECT * FROM campanhas";
                        $resultado_da_seleção = mysqli_query($mysqli, $resultado_Campanha);
                        while($row_campanha = mysqli_fetch_assoc($resultado_da_seleção)) {
                        ?>
                        <option value="<?php echo $row_campanha['razao_social_cliente'] ?>">
                         <?php  echo $row_campanha['nome_fantasia_cliente']?></option>
                        
                        <?php }?> 

                    </select>


                </li><br>

                <li>*Periodo da Carta: <br>

                     Inicio: <input id="date" type="date" required name="inicio">

                    Fim: <input id="date" type="date" required name="fim">
                </li>

                <script>
                    function reformatDate(date)
                        {
                        dArr = date.split("-");  // ex input "2010-01-18"
                        return dArr[2]+ "/" +dArr[1]+ "/" +dArr[0].substring(0,4); //ex out: "18/01/2010"
                        }       
                </script>
                
                
                <input type="file" required name="arquivo" id="arquivo">
                
                 <input type="submit" name="envia_arquivo">
                
               <input type="reset" value="Apagar">
                
            </form>    

            
           
        </ul>

    </h2><br>

    </Select>
    
</body>

</html>

Ele só precisa mostrar as informações nos campos adicionais.

Se puder me ajudar, caso precise de mais informação só me informar.

washalbano
 

washalbano

Postado
Postado
Em 23/02/2022 às 15:03, João pedro chaves disse: 
$(document).on('change', '#pdv', function () {
      var value  = $(this).val();
      var option = $(this).find("option:selected");

      var numero    = option.data('numero');
      var rua       = option.data('rua');
      var bairro    = option.data('bairro');
      var cidade    = option.data('cidade');
      var estado    = option.data('estado');
      var cep       = option.data('cep');
      var cnpj      = option.data('cnpj');

      $('#pdv'      ).val(value);
      $('#cnpj'     ).val(cnpj);
      $('#rua'      ).val(rua);
      $('#bairro'   ).val(bairro);
      $('#cidade'   ).val(cidade);
      $('#estado'   ).val(estado);
      $('#cep'      ).val(cep);
      $('#numero'   ).val(numero);
   });

Acho q estou começando a entender.
Em outras palavras, o sr. quis dizer que esse listener, (que observava as mudanças no select#pdv e alimentava todos aqueles elementos com aquelas ids com o values dos option.data) não está mais funcionando.

Bom, a primeira observação a ser feita é se os options possuem todos esses data-attributes devidamente alimentados
e se esse var option = option:selected retorna o option selecionado

Em 23/02/2022 às 15:03, João pedro chaves disse: 
var option = $(this).find("option:selected");

log option abaixo da declaração dessa var, assim:
  

console.log('option :>> ', option);

E, depois de trocar de option no select#pdv, verifique se é logado o elemento html esperado

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!