Função de atualização

Programação
, , , ,
#1

Salve, estou com um formulário que recebe todos os dados do banco de dados e tem a opção de excluir tal dado desejado. Queria saber se existe alguma forma que quando o usuário clicar no Excluir a pagina já se atualizaria com a nova tabela.

<?php
//Conectando com o Banco de Dados
require "conexaoBD.php";

function filtraEntrada($dado) {
  $dado = trim($dado);
  $dado = stripslashes($dado);
  $dado = htmlspecialchars($dado);
  
  return $dado;
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {

	$msgErro = "";

  $nomeMarca = $modelo = $mei = $operadora = $datafabricao = "";
  
  $nomeMarca          = filtraEntrada($_POST["nomeMarca"]);     
  $modelo             = filtraEntrada($_POST["modelo"]);
  $mei                = filtraEntrada($_POST["mei"]);
  $operadora          = filtraEntrada($_POST["operadora"]);
  $datafabricao       = ($_POST["datafabri"]);

  try {    
    $conexao = conectando();

    $sql = "
      INSERT INTO Celular (DataFabricacao, MEI, Modelo, NomeMarca, Operadora)
      VALUES (NOW(), $mei, '$modelo', '$nomeMarca', '$operadora');
    ";
    
    if (! $conexao->query($sql))
      throw new Exception("Erro na inserção de dados: " .$conexao->error);

    $formProcSucesso = true;
  }
	catch (Exception $e) {
		$msgErro = $e->getMessage();
  }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Cadastro Celular</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 class = "p-3 mb-2 bg-light text-dark">Cadastro Celular</h2>
  <br><br>
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
	
    <div class="form-group">
      <label for="nomeMarca">Nome Marca:</label>
      <input type="text" class="form-control" name="nomeMarca" id="nomeMarca" placeholder="Informe a marca do Celular" required>
    </div>
		
    <div class="form-group">
      <label for="">Modelo:</label>
      <input type="text" class="form-control" name="modelo" id="modelo" placeholder="Informe o modelo do Celular" required>
    </div>
    
    <div class="form-group">
      <label for="mei">MEI:</label>
      <input type="number" class="form-control" name="mei" id="mei" placeholder="Informe o MEI" required>
    </div>

    <div class="form-group">
      <label for="operadora">Operadora:</label>
      <select name="operadora" id="operadora" class="form-control" required>
        <option value="TIM">TIM</option>
        <option value="VIVO">VIVO</option>
        <option value="CLARO">CLARO</option>
        <option value="ALGAR">ALGAR</option>
        <option value="NEXTEL">NEXTEL</option>
        <option value="OI">OI</option>
      </select>
    </div>

    <div class="form-group">
      <label for="datafabri">Data Fabricação:</label>
      <input type="date"  class="form-control" placeholder="Data Fabricação do Celular" name="datafabri" id="datafabri" required>
    </div>   
		
    <button type="submit" class="btn btn-default">Enviar</button>
  </form>

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Celulares</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  <h3 class="text-light bg-dark" id = "h3">Celulares Cadastrados</h3>

  <table class="table table-striped retorno">
    <thead>
      <tr>
        <th>Nome Marca</th>
        <th>Modelo</th>
        <th>MEI</th>
        <th>Operadora</th>
        <th>Data Fabricação</th>
        <th>Excluir</th>
      </tr>
    </thead>
    
    <tbody>
		<?php
  
    if ($arrayCelulares != "") {
      
      foreach ($arrayCelulares as $celular) {       
        echo "
        <tr>
          <td>$celular->nomeMarca</td>
          <td>$celular->modelo</td>
          <td>$celular->mei</td>
          <td>$celular->operadora</td>
          <td>$celular->datafabri</td>
          <td><a href= 'excluirCelular.php?MEI=$celular->mei'>Excluir celular</a> </td>     
        </tr>      
        ";
      }
    }
		?> 	
    </tbody>
  </table>
  
  <?php
  
  if ($msgErro != "")
    echo "<p class='text-danger'>A operação não pode ser realizada: $msgErro</p>";
  
  ?>
  
  <br><br>
  
  <div>
  <a href="menu.php"><button class="btn btn-info">Menu de Opções</button></a>
  </div>
</div>
#2

Tem como fazer isto com ajax ou colocando um location.href="" para atualizar a página após a exclusão.
Aconselho fazer com ajax, manja de ajax?

#3

Não muito cara, mas se possível, me de um pequeno exemplo, que tento interpretar e aplicar.

#4

Primeiramente vai precisar do jquery no seu site ou aplicação.

e então pode usar o seguinte código

    <script>
    var DadosEnviados = {
    nomeDado: 'aqui vai a informacao a enviar',
    };

    $.post('arquivo.php', {'DadosEnviados':DadosEnviados}).done(function(DadosRecebidos){
        $('.retorno').html(DadosRecebidos);
    });

    </script>

<div class="retorno"></div>

Como funciona isto?

o “arquivo.php” é o arquivo que vai carregar suas informações do banco de dados.

o array “DadosEnviados” envia as informações pro php interpretar, e o DadosRecebidos é o retorno do php, que pode ser qualquer tipo de retorno de dado bruto(teste com um echo “ola mundo”).

este cara aqui:
$(’.retorno’).html(DadosRecebidos);

Vai pegar o retorno do php e colocar dentro da div com a classe “.retorno”

#5

Lembrando o tipo de envio é um “post”, ou seja, voce recebe os dados php em uma super global $_POST.

PS: utilize o var_dump($_POST) para debugar e entender melhor.

#6

Em nomeDado: eu coloco o que cara?

#7

o “nomeDado” pode ser considerado como um campo, e como voce ta fazendo o envio via post, ele vai chegar no php como $_POST[‘DadosEnviados’][‘nomeDado’].
Ele pode ter qualquer nome que quiser, logo apos os dois pontos “:”, vem o valor dele dentro de aspas.

#8

Cara, até deu certo. Só que tipo tem um h1 e ele fico duplicado como o botão. Tentei ocultar, mas não seu. tem alguma solução. grato!

#9

me mostra seu codigo html, javascript e php para eu analisar melhor.

#10

pronto @lucasgarcez

#11

@lucasgarcez se possível, me de uma orientação em relação ao var DadosEnviados