JQuery ajax não trás informações de uma coluna de outra página no modal

[vitizin]

O meu problema é esse, ao clicar em um botão "mais informações" ele deveria mostrar o id e nome das colunas porém mostra como undefined, segue o codigo abaixo para a resolução:

 

index.php

<table class="table">
          <thead class="table-dark">
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Nome</th>
              <th scope="col">Data de registro</th>
              <th scope="col">Ações</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach($lista as $obra): ?>
            <tr>
              <td><?php echo $obra['idobra']; ?></td>
              <td><?php echo $obra['nome']; ?></td>
              <td><?php echo date("d/m/Y", strtotime($obra['data_registro'])); ?></td>
              <td><button data-id="<?php echo $obra['idobra']; ?>" class="userinfo btn btn-success btn-sm">Mais informações</button></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>

        <script>
            $(document).ready(function(){
                $('.userinfo').click(function(){
                    var id = $(this).data('id');
                    $.ajax({
                        url: 'ajaxfile.php',
                        type: 'post',
                        data: {id: id},
                        success: function(response){ 
                            $('.modal-body').html(response); 
                            $('#empModal').modal('show'); 
                        }
                    });
                });
            });
            </script>

            <div class="modal" id="empModal" role="dialog" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Informações</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <!-- Aqui vai aparecer o conteúdo -->
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
              </div>
            </div>
            </div>

 ajaxfile.php

<?php
include("conexao/connect.php");

$id = filter_input(INPUT_GET, 'id');

$obra = [];

if($id) {
    $sql = $pdo->prepare("SELECT * FROM obras WHERE idobra = :id");
    $sql->bindValue(':id', $id);
    $sql->execute();
    $obra = $sql->fetch(PDO::FETCH_ASSOC);
}
?>

<table border='0' width='100%'>
<tr>
    <td style="padding:20px;">
    <p>ID: <?php echo $obra['idobra']; ?></p>
    <p>Nome: <?php echo $obra['nome']; ?></p>
    </td>
</tr>
</table>

 

[DiF]

@vitxr Olá,

 

Tenho algumas considerações...

Olhando assim por cima no seu código, talvez o erro possa estar na linha de recebimento do valor ID no arquivo ajaxfile.php...

 

Veja bem, você está passando por POST, o valor do ID.  Mas no arquivo ajaxfile.php. é recebido por GET.

Experimenta trocar para:

$id = $_POST["id"];

 

Além disso, nesse caso em específico, não tem necessidade de usar o input_filter() pois é um valor que não é editável.. se fosse um campo de texto sim, mas como é um data-atribute com o valor id "fixo"...  não precisa, mas se você faz questão,  pelo menos troca o INPUT_GET por INPUT_POST.

 

Basicamente, o erro acontece, pois o  arquivo não recebeu valor id...   então a intrução SQL não pode ter sido feita, que naturalmente ocasionou o undefined, pois o idobra e nome estão "vazio", no vetor.  

Reveja a parte do código em php, que é onde está o problema provavelmente.

 

 

Um extra,  Se você estiver usando a versão mais recente do jQuery,  a estrutura do ajax  foi alterada para este modelo.. e  no seu modelo há um pequeno erro. O type, não é POST... no caso você deve especificar o POST no atributo method.    e o dataType como HTML.

 $.ajax({
     url: 'ajaxfile.php',
     dataType: 'HTML',
     method: 'POST', 
     data: {id: id}
}).done(function(response){
     $('.modal-body').html(response); 
     $('#empModal').modal('show'); 
 });

 

[vitizin]

9 minutos atrás, DiF disse:

@vitxr Olá,

 

Tenho algumas considerações...

Olhando assim por cima no seu código, talvez o erro possa estar na linha de recebimento do valor ID no arquivo ajaxfile.php...

 

Veja bem, você está passando por POST, o valor do ID.  Mas no arquivo ajaxfile.php. é recebido por GET.

Experimenta trocar para:

$id = $_POST["id"];

 

Além disso, nesse caso em específico, não tem necessidade de usar o input_filter() pois é um valor que não é editável.. se fosse um campo de texto sim, mas como é um data-atribute com o valor id "fixo"...  não precisa, mas se você faz questão,  pelo menos troca o INPUT_GET por INPUT_POST.

 

Basicamente, o erro acontece, pois o  arquivo não recebeu valor id...   então a intrução SQL não pode ter sido feita, que naturalmente ocasionou o undefined, pois o idobra e nome estão "vazio", no vetor.  

Reveja a parte do código em php, que é onde está o problema provavelmente.

 

 

Um extra,  Se você estiver usando a versão mais recente do jQuery,  a estrutura do ajax  foi alterada para este modelo.. e  no seu modelo há um pequeno erro. O type, não é POST... no caso você deve especificar o POST no atributo method.    e o dataType como HTML.

 $.ajax({
     url: 'ajaxfile.php',
     dataType: 'HTML',
     method: 'POST', 
     data: {id: id}
}).done(function(response){
     $('.modal-body').html(response); 
     $('#empModal').modal('show'); 
 });

 

Perfeito, consegui resolver. muito obrigado !!