-3

Bom estou com um projeto usando html,css, js e php pra criação de uma tabela aonde os dados do banco serão mostrados na tela. Porém quando eu entro na página, ele não carrega os dados da tabela. Ele só acaba mostrando os dados da tabela após eu chamar uma função do js que seria um pra adicionar, aonde ele abre uma tela pra inserir. Só depois de chamar essa função que ele acaba mostrando todos os dados da tabela.

function vizualizar(pagina, novo=false, id=null){
    document.body.setAttribute('page',pagina)
    if(pagina === 'cadastro'){
        if(novo) limparEdicao()
        if(id){
            const usuario = listaRegistros.usuarios.find( usuario => usuario.id == id )
            if(usuario){
                document.getElementById('id').value = usuario.id
                document.getElementById('nome').value = usuario.nome
                document.getElementById('fone').value = usuario.fone
            }
        }
        document.getElementById('nome').focus()
    }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Heebo', sans-serif;
}

body{
  background-image: url("./imgTabela/fundo-MIR.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
  display: flex;
  min-height: 100vh;
  height: 100%
}

img{
  width: 74px;
  padding-right: -1px;
}

.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #3c3c3c;
  z-index: 100;
  transition: all 0.5s ease;
}
.sidebar.close{
  width: 78px;
}
.sidebar .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i{
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.sidebar .logo-details .logo_name{
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin-left: 30px;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name{
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links{
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links li:hover{
  background: #666666;
}
.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
  display: block
}
.sidebar .nav-links li i{
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
  display: none;
}
.sidebar .nav-links li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name{
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: #565656;
  display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
  display: block;
}
.sidebar .nav-links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
  opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 18px;
  opacity: 1;
  display: block;
  text-align: center;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .profile-details{
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: black;
  padding: 12px 0;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details{
  background: none;
}
.sidebar.close .profile-details{
  width: 78px;
}
.sidebar .profile-details .profile-content{
  display: flex;
  align-items: center;
}
.sidebar .profile-details img{
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 14px 0 12px;
  background: #666666;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
  padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}
.sidebar .profile-details .job{
  font-size: 12px;
}
.home-section{
  position: fixed;
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
  left: 78px;
  width: calc(100% - 78px);
}
.home-section .home-content{
  height: 60px;
  display: flex;
  align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
  color: #3c3c3c;
  font-size: 25px;
}
.home-section .home-content .bx-menu{
  margin: 0 15px;
  cursor: pointer;
}
.home-section .home-content .text{
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 400px) {
  .sidebar.close .nav-links li .sub-menu{
    display: none;
  }

  .pesquisa{
    margin-left: 40px;
    margin-bottom: 10px;
    position: absolute;
   }

  .sidebar{
    width: 78px;
  }
  .sidebar.close{
    width: 0;
  }
  .home-section{
    left: 78px;
    width: calc(100% - 78px);
    z-index: 100;
  }
  .sidebar.close ~ .home-section{
    width: 100%;
    left: 0;
  }
}

.container {
  
background-color: #fafafa;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 600px;
max-width: 100%;  
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}

.header {
  background-color: #eee;
  padding: 20px;
  text-align: center;
  
}
::placeholder{
  text-align: center;
}

#listaRegistros{ display: none; }
      #cadastroRegistro{
          display: none;
          flex-direction: column;
          gap: 20px;
      }

      body[page=lista] #listaRegistros{ display: block; }
      body[page=cadastro] #cadastroRegistro{ display: flex; }
      body[page=cadastroEditar] #cadastroRegistro{ display: flex; }

     

      table{
          width: 100%;
          border-collapse: collapse;
          table-layout:fixed;
      }
      table th,
      table td{
        word-wrap:break-word;
          font-size: 14px;
          padding: 10px 15px;
          border: solid 1px #ccc;
      }

      button{
          border: none;
          border-radius: 10px;
          cursor: pointer;
          background-color: #3c3c3c;
          color: #fff;
          margin: 3px;
          padding: 4px 8px;
      }
      button.cinza{
          background-color: #ccc;
          color: #666;
          border-radius: 10px;
      }
      button.azul{
          border-radius: 10px;
          cursor: pointer;
          background-color: #3c3c3c;
          color: #fff;
          margin: 3px;
          padding: 4px 8px;
      }
      button.btnSalvar{
          border-radius: 10px;
          cursor: pointer;
          background-color: #3c3c3c;
          color: #fff;
          margin: 3px;
          padding: 4px 8px;

      }
      button.editar{
          border-radius: 10px;
          cursor: pointer;
          background-color: #3c3c3c;
          color: #fff;
          margin: 3px;
          padding: 4px 8px;

      }

     

     
      button.vermelho{
          background-color: #ccc;
          color: #3c3c3c;
          border-radius: 10px;
      }
      button:hover{
          opacity: 0.8;
      }

      input{
          border: solid 1px #ccc;
          border-radius: 10px;
          padding: 10px;
      }

      .label>div{
          display: flex;
      }
      .label>div>input{
          flex: 1;
      }
<?php



if(isset($_POST['submit'])){

  include_once('config.php');


  $idUnidMed = $_POST['idUnidMed'];
  $codUnidMed = $_POST['codUnidMed'];
  $descUnidMed = $_POST['descUnidMed'];

  $result = mysqli_query($conexao, "INSERT INTO UnidMed(idUnidMed,codUnidMed,descUnidMed) VALUES('$idUnidMed', '$codUnidMed', '$descUnidMed')");
  
  $sql = "SELECT * FROM UnidMed ORDER BY idUnidMed DESC";

  $result = $conexao->query($sql);

  
}

?>





<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="uniMed.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="shortcut icon" href="imgTabela/logo-cinzaClaro.png" type="image/x-icon">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
    <!-- Boxiocns CDN Link -->
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <title>Unidade de Medida</title>
</head>

<body page="lista">

  <div class="sidebar close">
    <div class="logo-details">
      <img src="./imgTabela/logo-cinzaClaro.png" alt="">
      <span class="logo_name">Grupo MIR</span>
    </div>
    <ul class="nav-links">
      <li>
        <a href="../menuInicio/menuInicio.html" >
          <i class='bx bx-home'></i>
          <span class="link_name">Inicio</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="../menuInicio/menuInicio.html" >Inicio</a></li>
        </ul>
      </li>
      <li>
        <div class="iocn-link">
          <a href="#">
            <i class='bx bx-message-square-edit'></i>
            <span class="link_name">Cadastro</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Cadastro</a></li>
          <li><a href="../CadastroUsuario/index.html" >Cliente/Fornecedor </a></i></li>
          <li><a href="../PRODUTO/Produto.html" >Produto</a></li>
          <li><a href="../Unidade de Medida/uniMed.html">Unidade de Medida</a></li>
        </ul>
      </li>
      <li>
        <div class="iocn-link">
          <a href="#">
            <i class='bx bx-book-alt' ></i>
            <span class="link_name">Consulta</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Consulta</a></li>
          <li><a href="../CadastroUsuario/indexC.html" >Cliente/Fornecedor </a></i></li>
          <li><a href="../PRODUTO/ProdutoC.html" >Produto</a></li>
          <li><a href="./uniMedC.html">Unidade de Medida</a></li>
        </ul>
      </li>
      <li>
        
      <li>
        <a href="#">
          <i class='bx bx-cog' ></i>
          <span class="link_name">Setting</span>
        </a>
        
        <ul class="sub-menu blank">
          <li><a class="link_name" href="#">Setting</a></li>
        </ul>
      </li>
      <li>
        <a href="https://megaconsult-dev.com.br" target="_blank">
          <i class='bx bx-building-house'></i>
          <span class="link_name">Site Oficial</span>
        </a>
        
        <ul class="sub-menu blank">
          <li><a class="link_name" href="https://megaconsult-dev.com.br" target="_blank">Site Oficial</a></li>
        </ul>
      </li>
      <li>
    <div class="profile-details">
      <div class="profile-content">
        <img src="imgTabela/mir cloud.png" alt="profileImg">
      </div>
      <div class="name-job">
        <div class="profile_name">Usuário</div>
        <div class="job">Usuário</div>
      </div>
      <a href="../Login/login.html">
        <i  class='bx bx-log-out'  ></i>
      </a>
    </div>
  </li>
</ul>
  </div>
  <section class="home-section">
    <div class="home-content">
      <i class='bx bx-menu' ></i>
      
    </div>
  </section>



    
  <div page="cadastro" class="container">
    <div class="header">
      <h2>Unidade de Medida</h2>
      <div style='display: flex;'>

        
        
        <div>
            <button class = "azul"  type = "submit" onclick="vizualizar('cadastro', true)">Nova Unidade</button>
            
        </div>
    </div>
    
    </div>
    
      <div id='listaRegistros'>
  
  
          <table>
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>Código</th>
                      <th>Descrição</th>
                      <th>...</th>
                  </tr>
              </thead>
              <tbody>
                <?php

                  while($user_data = mysqli_fetch_assoc($result))
                  {
                    echo "<tr>";
                    echo "<td>".$user_data['idUnidMed']."</td>";
                    echo "<td>".$user_data['codUnidMed']."</td>";
                    echo "<td>".$user_data['descUnidMed']."</td>";
                    echo "<td>
          
                    <a href='cadastroUnidMed.php?idUnidMed=$user_data[idUnidMed]'><button class = 'azul'>Editar</button></a>
                    <a href='delete.php?idUnidMed=$user_data[idUnidMed]'><button class = 'azul'>Deletar</button> </a>
                      
                    </td>";
                    echo "</tr>";
                  }
                ?>
              </tbody>
          </table>
  
          
  
      </div>
  
      <form action="uniMed.php" id='cadastroRegistro' method = "POST">
  
  
          <div class='label'>
              <div>Código</div>
                <div>
                  <input id='nome' data-ls-module="charCounter" maxlength="2" name = 'codUnidMed' />
                </div>
              </div>
  
          <div class='label'>
              <div>Descrição</div>
                <div>
                  <input type='text' id='fone' data-ls-module="charCounter" maxlength="50" name = 'descUnidMed'/>
                </div>
              </div>
  
          <div>
              <button class="btnSalvar" type = "submit" name="submit">Salvar</button>
              <a href="uniMed.php"><button class="btnSalvar" type = "submit" name="submit">Cancelar</button> </a>
          </div>
  
      </form>
  
  



        <script src="https://kit.fontawesome.com/88f75b51d6.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
        <script src="uniMed.js"></script>

<script>

          //Java Script do Menu Lateral

          let arrow = document.querySelectorAll(".arrow");
            for (var i = 0; i < arrow.length; i++) {
              arrow[i].addEventListener("click", (e)=>{
           let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
            arrowParent.classList.toggle("showMenu");
            });
          }
          let sidebar = document.querySelector(".sidebar");
          let sidebarBtn = document.querySelector(".bx-menu");
          console.log(sidebarBtn);
          sidebarBtn.addEventListener("click", ()=>{
            sidebar.classList.toggle("close");
          });

</script>

</body>
</html>

Página não recebe os dados ao dar reload

1 Resposta 1

-2

No seu arquivo HTML, no código PHP do início, você está carregando os dados apenas quando for uma requisição POST, você deveria retirar a parte do consulta de dentro do bloco if.

<?php

include_once('config.php');

if(isset($_POST['submit'])){
  $idUnidMed = $_POST['idUnidMed'];
  $codUnidMed = $_POST['codUnidMed'];
  $descUnidMed = $_POST['descUnidMed'];

  $result = mysqli_query($conexao, "INSERT INTO UnidMed(idUnidMed,codUnidMed,descUnidMed) VALUES('$idUnidMed', '$codUnidMed', '$descUnidMed')");
  
}

  $sql = "SELECT * FROM UnidMed ORDER BY idUnidMed DESC";

  $result = $conexao->query($sql);

?>
2
  • Eu modifiquei aqui e foi tudo certinho, obrigado amigo pela ajuda! :D 28/09/2022 às 17:41
  • Que bom que te ajudou. Para auxiliar outros que tenham alguma questão semelhante, por favor, marque a resposta como aceita.
    – Lucas
    28/09/2022 às 19:22

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 .