0

Estou desenvolvendo um código e o trecho relacionado a exibir os dados que estão no SQL para a HTML Table não estão funcionando. No caso criei uma função na minha DAO com a query SQL e passei para uma especie de Controlador. No HTML, eu fiz uma requisição Jquery chamando este controlador, porém não está funcionando. Alguém poderia me explicar o que esta errado ou tenha algum outro tipo de solução

Segue abaixo o código(primeiro o trecho do meu arquivo DAO)

    //Função para listar os registros 
        public function listarOperadoras() { 



            //Cria o bloco Try Catch para exibir os resultados 
            try {
                    $querySelect = "
                        SELECT [operadora],[sigla],[observacao] FROM [dbo].[tbl_oper_escalona]
                    "; 

                    abreConexao(); //Abre a conexão com o banco de dados 
                    global $sql; //Variavel para efetuar a Conexão 

                    $result = $sql->prepare($querySelect); //Prepara a Consulta  
                    $result->execute(); //Executa a Consulta 

                    sleep(1); //1 Segundo 
                    $json_result =  json_encode($result->fetchAll(PDO::FETCH_ASSOC));


                    fechaConexao();

                } catch (Exception $e) {
                    print "Ocorreu um erro: <code style='color: red;>".$e->getMessage."</code>"; 
                }   
        return $json_result;
      }

Agora o meu 'Controlador' no caso estou usando um Switch Case, a opção de Registrar já está feita e funcionando então só estou postando a de 'Visualizar' que está apresentando o defeito.

case 'Visualizar': 

        $listOperadoras = new DaoOperadoras(); 
        $listOperadoras->listarOperadoras();  

    break;   

E agora o código HTML

<!DOCTYPE html>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <!--CSS Bootstrap e Próprios-->
  <link rel="stylesheet" type="text/css" href="../LIB/CSS/bootstrap.min.css"/> <!--BootStrap-->
  <link rel="stylesheet" type="text/css" href="../LIB/CSS/newPages.css"/><!--CSS Adicional-->

  <!--Bootstrap JS--> 
  <script type="text/javascript" src="../LIB/JS/jquery3.1.1.js"></script>
  <script type="text/javascript" charset="utf-8" src="../LIB/JS/jquery-1.11.1.min.js"></script> 
  <script type="text/javascript" charset="utf-8" src="../LIB/JS/bootstrap.min.js"></script>  

  <!--Auto Complete Source-->
  <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>

  <style type="text/css">
    body { 
        background-color: #F0F8FF;
    }   

  </style> 

  <script  type="text/javascript">
        $(document).ready( function() {

            //Captura o retorno da tabela que contem as unidades 
            $.getJSON('../CONTROLLERS/OperadorasController.php?opcao=Visualizar', function(data) {
                    var Operadoras = ""; //Variavel Operadora que será montada  

                    for (var i = 0; i < data.length ; i++) {
                        operadoras += "<tr>"; 
                        operadoras += "<td>" + data[i].operadora + "</td>"; 
                        operadoras += "<td>" + data[i].sigla + "</td>"; 
                        operadoras += "<td>" + data[i].observacao + "</td>"; 
                        operadoras += "<td>"; 
                        operadoras += "<button type='button' title='Editar' class='btn btn-link' id='btnEdit'>";  
                        operadoras += "<i class='fa fa-cut' style='font-size:20px; color:#0066F8;'></i>"; 
                        operadoras += "</button>"; 
                        operadoras += "</td>";
                        operadoras += "<td>"; 
                        operadoras += "<button type='button' title='Excluir' class='btn btn-link' id='btnExclui'>";  
                        operadoras += "<i class='fa fa-eraser' style='font-size:20px; color:#0066F8;'></i>"; 
                        operadoras += "</button>"; 
                        operadoras += "</td>";
                        operadoras += "</tr>";  
                }  
                 //Preenche a tabela 
                 $("#exiOperadoras").html(operadoras);   

            });

        });
  </script>  


    <table class="table table-striped table-bordered table-responsive"> 
        <thead class="bg-primary">
            <tr>
                <th>Nome da Operadora</th>
                <th>Sigla</th>
                <th>Obs</th>
                <th>Alterar</th>
                <th>Excluir</th>        
            </tr>   
        </thead>    

        <tbody id="exiOperadoras">  


        </tbody>    
    </table>

Agradeço desde já

3
  • 1
    Qual é exatamente a sua dúvida? Commented 14/03/2019 às 10:26
  • No caso preciso que os dados da minha query aparecam na tabela HTML, para isso estou usando o Script em Jquery o começo do HTML. Commented 15/03/2019 às 2:54
  • Veja as minhas observações. Commented 15/03/2019 às 14:47

1 Resposta 1

1

O grande problema na sua questão ou é um erro de digitação ou você desconsiderou a sensibilidade do JavaScript à variação de caixa. Você declara a variável Operadoras e tenta atribuir valores para operadoras.

Mas aproveitando a sua informação de que está utilizando JQuery recomendaria você aproveitar o recurso de interpolação dele para construir a sua string ao invés de ficar quebrando e concatenando, assim como o uso da ` (crase) quando for declarar uma string que possuí várias linhas.

Isso vai deixar o seu código muito mais legível e menos sucessível à erros durante a edição.

let data = [
  {operadora: '0001', sigla: 'A',observacao: 'nada a declarar'},
  {operadora: '0002', sigla: 'B',observacao: 'não sei'},
  {operadora: '0003',sigla: 'A',observacao: 'qual foi a pergunta mesmo?'}];

$(document).ready(function() {

  var operadoras = ""; //Variavel Operadora que será montada  

  for (var i = 0; i < data.length; i++) {
    operadoras += `
      <tr>
        <td>${data[i].operadora}</td>
        <td>${data[i].sigla}</td>
        <td>${data[i].observacao}</td>
        <td>
          <button type='button' title='Editar' class='btn btn-link' id='btnEdit'>
            <i class='fa fa-cut' style='font-size:20px; color:#0066F8;'></i>
           </button>
        </td>
        <td>
          <button type='button' title='Excluir' class='btn btn-link' id='btnExclui'>
            <i class='fa fa-eraser' style='font-size:20px; color:#0066F8;'></i>
          </button>
        </td>
      </tr>`;
  }
  //Preenche a tabela 
  $("#exiOperadoras").html(operadoras);

});
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<table class="table table-striped table-bordered table-responsive">
  <thead class="bg-primary">
    <tr>
      <th>Nome da Operadora</th>
      <th>Sigla</th>
      <th>Obs</th>
      <th>Alterar</th>
      <th>Excluir</th>
    </tr>
  </thead>
  <tbody id="exiOperadoras">
  </tbody>
</table>

1

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 .