2

Estou fazendo uma página onde o usuário clicar no button vai exibir algumas informações do banco de dados, só que está passando somente uma parte, eu não tenho muita experiencia com javascript, meu código é

<?php
  session_start();
  if((!isset ($_SESSION['logado']) == true)){
    unset($_SESSION['logado']);
    header('location:index.php');
  }     
  require_once "conn.php";
  require_once 'func.php';
  header('Content-Type: text/html; charset=UTF-8');
  $id = $_SESSION['id'];
  $nome = $_SESSION['nome'];
  $pv = $_SESSION['pv'];
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>.:: Painel ::.</title>
  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/estilo.css" rel="stylesheet">
  <!-- Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark static-top" style="background-color: #005da0;">
    <div class="container">
      <a class="navbar-brand" href="site.php"><img src="css/Asset-17.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="site.php">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="deslogar.php">Sair</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container centraliza_tudo">
    <div class="filtro"> 
      <form method="POST" class="form-inline">
        <div class="form-group mx-sm-3 mb-2">
          <label class="col-sm-2 col-form-label col-form-label-sm">Inicial:</label>
          <input type="date" class="form-control" name="inicial">
        </div>
        <div class="form-group mx-sm-3 mb-2">
          <label class="col-sm-2 col-form-label col-form-label-sm">Final:</label>
          <input type="date" class="form-control" name="final">
        </div>
        <button type="submit" class="btn btn-primary mb-2">Filtrar</button>
      </form>
    </div>
    <div class="lista-data">
      <?php 
      if (isset($_POST['inicial'])) {
      ?>
      <table class="table table-striped table-bordered ">
        <thead>
          <tr style="background-color: #005da0 !important;color: white !important;">
            <th scope="col">Data</th>
            <th scope="col">Exibir</th>
          </tr>
        </thead>
        <tbody>
        <?php
          $inicial = $_POST['inicial'];
          $final = $_POST['final'];
          $sql = "SELECT * FROM tb_cupom WHERE id_consultor = $id AND cadastro between '$inicial' and '$final'";
          $stm = $conexao->prepare($sql);
          $stm->execute();
          $lista = $stm->fetchAll();

          $data_inicial = new DateTime( implode( '-', array_reverse( explode( '/', $inicial ) ) ) );
          $data_final   = new DateTime( implode( '-', array_reverse( explode( '/', $final ) ) ) );

          while( $data_inicial <= $data_final ) {

          $data = $data_inicial->format('Y-m-d');
          $cp = "";
          for ($i=0; $i < count($lista); $i++) {
            $cupom = $lista[$i]['cupom'];
            $cadastro = $lista[$i]['cadastro'];
            if ($data == $cadastro) {
              $cp .= "$cupom;";
            }
          }
          if ($cp != "") {
            $data = converte_data_sem_ano($data);
              echo '<tr>
                      <td>'.$data.'</td>
                      <td><button id="'.$cp.'" type="button" class="exibir btn btn-primary btn-sm">Exibir</button></td>
                    </tr>';
            }
          $data_inicial->add( DateInterval::createFromDateString( '1 days' ) );

          }
        }
        ?>
        </tbody>
      </table>
    </div>
    <div class="exibe-lista"></div>
  </div>
  <script type="text/javascript">
    $(function(){
      $('button.exibir').click(function(){
        var id = $(this).attr('id');
        $.ajax({
          type: "POST",
          url: "exibe_cupom.php?cp="+id,
          dataType:"text",
          success: function(res){
            $(".exibe-lista").children(".table-striped").remove();
            $(".exibe-lista").append(res);
            console.log(res);
          }
        });
      })
    });
  </script>
</body>
</html>

Estranho que quando inspeciono a página ele mostra assim o ID ->

<button id="teste;teste2" type="button" class="exibir btn btn-primary btn-sm">Exibir</button>

Mas quando olho na rede ele passa somente o teste, exibe_cupom.php?cp=teste Como posso resolver isso? Agradeço desde já.

1 Resposta 1

3

Você não deveria usar o atributo ID do elemento para este fim.

O atributo ID deve ser utilizado para manipulação do elemento via JS e/ou CSS.

Recomendo você utilizar o data-attribute para a passagem de dados customizados.

Um outro detalhe é que você está enviando um request do tipo POST mas mandando uma query string na url ao invés dos dados no body do post.

você poderia montar um vetor assim:

$cp = array();
for ($i=0; $i < count($lista); $i++) {
    $cupom = $lista[$i]['cupom'];
    $cadastro = $lista[$i]['cadastro'];
    if ($data == $cadastro) {
        //$cp .= "$cupom;";
        $cp[] = $cupon;
    }
}

Com isso terá um vetor com os dados que deseja enviar no request e colocaria no documento com

<button id="meuId" data-cupons="<?php echo json_encode($cp);?>" type="button" class="exibir btn btn-primary btn-sm">Exibir</button>

O seu script ficaria similar a:

  <script type="text/javascript">
    $(function(){
      $('button.exibir').click(function(){
        var id = JSON.parse($(this).attr('data-cupons')); // Ou
        var id = JSON.parse($(this).data('cupons'));
        $.ajax({
          type: "POST",
          url: "exibe_cupom.php",
          data: {'id':JSON.stringify(id)},
          dataType:"text",
          success: function(res){
            $(".exibe-lista").children(".table-striped").remove();
            $(".exibe-lista").append(res);
            console.log(res);
          }
        });
      })
    });
  </script>

Lembrando que no seu exibe_cupom.php você precisará usar decodificar os parametros para poder utilizar:

$ids = json_decode($_POST['id']);

Uma observação:

Esta referencia que eu passei é para o caso de você precisar enviar um vetor para o servidor.

Alguns links para aprofundar os estudos:

Data attributes https://www.w3schools.com/tags/att_data-.asp

Formato do post do jQuery https://api.jquery.com/jQuery.post/

Referencia dos metodos encode/decode do json no PHP https://www.php.net/manual/pt_BR/ref.json.php

Tutorialzinho de como fazer algo similar ao que precisa https://www.kvcodes.com/2015/10/passing-javascript-array-to-php-through-jquery-ajax/

Mais algumas informações sobre JSON https://www.w3schools.com/js/js_json.asp

3
  • Não consegui entender muito bem pelo exemplo, eu até hoje usei ajax apenas assim como botão e em select, sou bem leigo no javascript, isso meio que fui procurando em tutoriais pra fazer, ele funcionou pra apagar dados tranquilo, somente como envio para outra página sem retorno, achei que daria certo pra essa situação, teria como você me da um exemplo desse método que tu falou?
    – Faillen
    26/08/2019 às 19:18
  • @Faillen dei uma melhorada na resposta, incluindo algumas referencias para aprofundar os estudos
    – Jorge Lima
    26/08/2019 às 19:21
  • @JorgeLima ele estava dando erro de syntaxe nessa função -> JSON.parse(), removi isso e funcionou direitinho, muito obrigado
    – Faillen
    26/08/2019 às 21:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .