Update a table without page refresh

Asked

Viewed 31 times

-3

I saw here several answers to questions similar to mine, but none solved my problem. I am making an item registration system that when clicking the insert button it will give the Insert in the database, clean the input and finally show this item in a table below this item insertion form-inline. I can already give the input in the bank by Submit, I can already reset the input fields. My only problem is that for this registered item to appear in the table I need to give a complete refresh on the page. This will take a lot of user time. Can anyone help me understand what I’m doing wrong?

I will put the HTML and JS codes below. Thank you very much!

<!DOCTYPE html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

<title>Solicitação de Produto Indisponível</title>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="respostas.php">PED Peças</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="respostas.php">Home <span class="sr-only">(página atual)</span></a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Solicitações de Compra
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="Projeto001.php">Nova Solicitação</a>
                    <a class="dropdown-item" href="respostas.php">Solicitações Realizadas</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="listaprecos.php">Respostas dos Fornecedores</a>
                </div>
            </li>

        </ul>


        <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Sair</button>

    </div>
</nav>

<div class="container-fluid pt-2">
    <h4>Solicitação de Produto Indisponível - <?php echo utf8_encode($info_solicitacoes['status_solicitacao']); ?> </h4>
</div>

<div class="form-row">

    <div class="form-group form-control-sm col-sm-1">
        <label for="id_solicitacao">Nº Solicitação</label>
        <input readonly name="id_solicitacao" type="number" value="<?php echo $info_solicitacoes["id_solicitacao"]; ?>" class="form-control form-control-sm" id="codcliente" placeholder="Cód. Int.">
    </div>



    <div class="form-group form-control-sm col-sm-1">
        <label for="codcliente">Cód. Cliente</label>
        <input type="number" value="<?php echo $info_solicitacoes["cod_cliente"]; ?>" class="form-control form-control-sm" id="codcliente" placeholder="Cód. Int.">
    </div>

    <div class="form-group form-control-sm col-sm-3">
        <label for="cliente">Cliente</label>
        <input style="text-transform: uppercase" type="text" value="<?php echo $info_solicitacoes["cliente"]; ?>" class="form-control form-control-sm" id="cliente" placeholder="Cliente">
    </div>

    <div class="form-group form-control-sm col-md-2">
        <label for="tel">Telefone</label>
        <input type="text" value="<?php echo $info_solicitacoes["telefone"]; ?>" class="form-control-sm form-control" id="tel" placeholder="(XX) XXXX-XXXX">
    </div>

    <div class="form-group col-md-2">
        <label for="contato">Contato</label>
        <input style="text-transform: uppercase" value="<?php echo $info_solicitacoes["contato"]; ?>" type="text" class="form-control-sm form-control" id="contato" placeholder="Contato">
    </div>

    <div class="form-group col-md-2">
        <label for="vendedor">Vendedor</label>
        <input style="text-transform: uppercase" value="<?php echo $info_solicitacoes["vendedor"]; ?>" type="text" class="form-control-sm form-control" id="vendedor" placeholder="Vendedor">
    </div>

    <div class="form-group col-md-12 form-control-sm mb-5">
        <label for="obs">Observação</label>
        <input style="text-transform: uppercase" value="<?php echo $info_solicitacoes["observacao"]; ?>" type="text" class="form-control-sm form-control" id="obs" placeholder="Observação">
    </div>


    <a href="../paginas/respostas.php"><button class="btn btn-sm btn-dark">Voltar</button></a>
    <button class="btn btn-sm btn-primary" hidden>Atualizar</button>
</div>
<hr>

<div class="container-fluid">
    <h4>Inserir Itens Para Cotação</h4>


    <form id="insere_itens">

        <input hidden readonly name="id_solicitacao" type="number" value="<?php echo $info_solicitacoes["id_solicitacao"]; ?>" class="form-control form-control-sm" id="codcliente" placeholder="Cód. Int.">
        <div class="form-row">
            <div class="form-group col-md-1 container-fluid">
                <label for="codint">Cód. Int.</label>
                <input type="number" class="form-control" name="codint" id="codint" placeholder="Cód. Int.">
            </div>

            <div class="form-group col-md-2">
                <label for="numorig">Número Original</label>
                <input style="text-transform: uppercase" type="text" class="form-control" name="numorig" id="numorig" placeholder="Número Original">
            </div>

            <div class="form-group col-md-2">
                <label for="codfabr">Código Fabricante</label>
                <input style="text-transform: uppercase" type="text" class="form-control" name="codfabr" id="codfabr" placeholder="Código Fabricante">
            </div>

            <div class="form-group col-md-1">
                <label for="marca">Marca</label>
                <input style="text-transform: uppercase" type="text" class="form-control" name="marca" id="marca" placeholder="Marca">
            </div>

            <div class="form-group col-md-4">
                <label for="produto">Descrição do Produto</label>
                <input required style="text-transform: uppercase" type="text" class="form-control" name="produto" id="produto" placeholder="Descrição do Produto">
            </div>

            <div class="form-group col-md-1">
                <label for="unid">Unidade</label>
                <input required style="text-transform: uppercase" type="text" class="form-control" name="unid" id="unid" placeholder="Und.">
            </div>

            <div class="form-group col-md-1">
                <label for="quant">Quantidade</label>
                <input required style="text-transform: uppercase" type="number" class="form-control" name="quant" id="quant" placeholder="Qtd.">
            </div>

            <input type="submit" value="Inserir" class="btn btn-sm btn-success">

        </div>



    </form>
</div>
<hr>

<table id="tabeladeitens" class="table">
    <thead>
        <tr>
            <th scope="col">Cód. Int.</th>
            <th scope="col">Núm. Orig.</th>
            <th scope="col">Cód. Fabr.</th>
            <th scope="col">Marca</th>
            <th scope="col">Descrição</th>
            <th scope="col">Und.</th>
            <th scope="col">Qtd.</th>
            <th scope="col">R$ Un.</th>
            <th scope="col">R$ Total</th>
            <th scope="col">Ações</th>
        </tr>
    </thead>
    <?php

    $consulta_itens  = "SELECT * FROM itens_solicitacao WHERE id_solicitacao = $id_solicitacao ORDER BY id_item DESC";
    $operacao_itens = mysqli_query($conecta, $consulta_itens);


    ?>

    <div class="conteudotabela">
        <tbody id="tabela_itens">
        <?php while ($registro = mysqli_fetch_assoc($operacao_itens)) { ?>
            <tr>
                <td><?php echo $registro["cod_interno"] ?></td>
                <td><?php echo mb_strtoupper($registro["num_orig"]) ?></td>
                <td><?php echo mb_strtoupper($registro["cod_fabric"]) ?></td>
                <td><?php echo mb_strtoupper($registro["marca"]) ?></td>
                <td><?php echo mb_strtoupper($registro["descricao"]) ?></td>
                <td><?php echo mb_strtoupper($registro["und"]) ?></td>
                <td><?php echo $registro["qtd"] ?></td>
                <td><?php echo $registro["venda_unit"] ?></td>
                <td><?php echo $registro["venda_total"] ?></td>
                <td>
                    <button type="submit" class="btn btn-sm btn-success" title="Autorizar Compra"><i class="fas fa-check"></i></button>
                    <button type="submit" class="btn btn-sm btn-dark" title="Recusar"><i class="fas fa-ban"></i></button>
                </td>
            </tr>
        </tbody>

    <?php
    }
    mysqli_free_result($operacao_itens);

    ?>
    </div>
</table>



<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="../js/jquery.js"></script>

And below follows the JS script. To update I had to turn with Location.Reload for now:

<script>
    $('#insere_itens').submit(function(e) {
        e.preventDefault();

        var formulario = $(this);
        var retorno = inserirFormulario(formulario)

        //$('#insere_itens input').val(""); //coloca todos valores de todos inputs do form como vazio
        //$('#insere_itens input[type = submit]').val("Enviar"); //recoloca o texto no botão

    });


    function inserirFormulario(dados) {
        $.ajax({
            type: "POST",
            data: dados.serialize(),
            url: "../conexoes/inseriritens.php",
            async: false
            //$('#insere_itens input').val(""); //coloca todos valores de todos inputs do form como vazio
            //$('#insere_itens input[type = submit]').val("Enviar");
        }).then(sucesso, falha);

        function sucesso(data) {
            console.log();
            $('#insere_itens')[0].reset();
            $('#tabeladeitens').empty();
            location.reload();
            
            
        }
           


    }
    function falha() {
        console.log("erro");

    }
 </script>
php javascript jquery table updating

  • Just make a .append() or .prepend() in the table with the information inserted in the BD.

  • In javascript do a new TR with the TD with the data entered in the BD and then do a .append() à tbody da table.

1 answer

-1

First of all it would be interesting to separate the excerpt of the code responsible for rendering the table row, we can do this by creating a function in php:

function renderTableLine($registro) {
  return <<<HTML
    <tr>
      <td>{$registro["cod_interno"]}</td>
      <td>{mb_strtoupper($registro["num_orig"])}</td>
      <td>{mb_strtoupper($registro["cod_fabric"])}</td>
      <td>{mb_strtoupper($registro["marca"])}</td>
      <td>{mb_strtoupper($registro["descricao"])}</td>
      <td>{mb_strtoupper($registro["und"])}</td>
      <td>{$registro["qtd"]}</td>
      <td>{$registro["venda_unit"]}</td>
      <td>{$registro["venda_total"]}</td>
      <td>
          <button type="submit" class="btn btn-sm btn-success" title="Autorizar Compra"><i class="fas fa-check"></i></button>
          <button type="submit" class="btn btn-sm btn-dark" title="Recusar"><i class="fas fa-ban"></i></button>
      </td>
    </tr>
HTML;
}

This function would be used in two places, first to render all table rows within tbody:

<tbody id="tabela_itens">
    <?php while ($registro = mysqli_fetch_assoc($operacao_itens)) {
        echo renderTableLine($registro);
    ?>
<tbody>

Then use the same function to render the new line right after inserting the record into the database in the.php file by inserting the same code snippet right after inserting the record into the database:

echo renderTableLine($registro_inserido);

Finally, append the html generated in the execution of the file inseriritens.php in tbody of the table

function inserirFormulario(dados) {
        $.ajax({
            type: "POST",
            data: dados.serialize(),
            url: "../conexoes/inseriritens.php",
            async: false
        }).then(sucesso, falha);

        function sucesso(data) {
            $('#insere_itens')[0].reset();
            $('#tabeladeitens tbody').append(data);
        }
    }

It is likely that you have to make adjustments to the code, a tip is to debug to understand what is coming in the "date" before making the append, but the idea is this.

  • just in javascript make a .append() a TR with all TD with AJAX data. No need to go to php again

  • That’s right, in success makes the append of the result returned from the POST made via AJAX.

Browser other questions tagged php javascript jquery table updating

You are not signed in. Login or sign up in order to post.