-1

Preciso que seja construída uma nova estrutura de (parecido com uma tabela) contendo a informação que acaba de ser inserida no mysql via ajax sem que a página seja atualizada.

Para especificar melhor, atualmente tenho um while que cria as div's dos registro do banco, e ao inserir um novo registro preciso que atualize essa div criando um novo elemento do objeto inserido.

Segue minha estrutura do while:

<div class="panel-heading">Histórico</div>    
                <div class="panel-body panel-size">
                   <p>
                   <?php
                    while($linha2 = mysqli_fetch_assoc($detalhe2)) 
                    {
                   ?>

                <div class="row">
                    <div class="col-md-2">
                        <span class="user-time">
                            <i class="fa fa-user"></i> <?php echo utf8_encode($linha2["usuarioApelido"]) ?><br>
                            <i class="fa fa-clock-o"></i> <?php echo date("d/m/Y - H:i:s",  strtotime($linha2["cHistoricoData"])) ?><br>
                            <button type="button" id="excluiHistorico" title="<?php echo $linha2["cHistoricoId"] ?>" class="btn btn-danger btn-xs">Excluir</button>
                        </span>
                    </div>
                    <div class="col-md-10">
                        <span class="user-post">
                            <?php echo utf8_encode($linha2["cHistoricoDescricao"]) ?>
                        </span>
                    </div>
                </div>

                   <hr>  

                  <?php
                   }
                  ?>
                  </div>
                  <div class="panel-footer">

                          <!--FORMULARIO-->           

             <form role="form" class="formCad">
                        <div class="form-group">
                            <div class="col-xs-8">
                                <input type="text" class="form-control input-sm" name="cHistoricoDescricao" placeholder="Escreva aqui o Histórico...">
                                <input type="hidden" name="userId" value="<?php echo $_SESSION['IDUSER'] ?>">
                                <input type="hidden" name="clienteId" value="<?php echo $clienteId ?>">
                            </div>
                                <button class="btn btn-primary btn-sm" type="submit">Inserir</button>
                        </div>
                    </form>
                  </div>
              </div>

HistProvPub.php

<?php require_once("conexao/conexao.php"); ?>

<?php

  // Cadastro de histórico do cliente
    if (isset ($_POST["cHistoricoDescricao"]) ) {
        setlocale(LC_ALL, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese');
        date_default_timezone_set('America/Sao_Paulo');
        $datahora  =date('Y-m-d H:i:s');


        $userId                      =  $_POST["userId"];
        $clienteId                   =  $_POST["clienteId"];
        $cHistoricoDescricao         =  utf8_decode ($_POST["cHistoricoDescricao"]);

        $inserir          = "INSERT INTO cliente_historico ";
        $inserir         .= "(usuarioId, clienteId, cHistoricoData, cHistoricoDescricao ) " ;
        $inserir         .= "VALUES " ;
        $inserir         .= "($userId, '$clienteId', '$datahora' , UCASE('$cHistoricoDescricao') ) " ;

        $retorno = array();

        $operacao_insercao = mysqli_query ($conecta,$inserir);

        echo json_encode($retorno);

    }

?>

jquery

<script>
            $('.formCad').submit(function(e) {
                e.preventDefault();
                var formulario = $(this);
                var retorno = inserirFormulario(formulario)

            });

            function  inserirFormulario(dados){
                $.ajax({
                    type:"POST",
                    data:dados.serialize(),
                    url:"php/HistProvPub.php",
                    async:false 
                })

            };
        </script>
4
  • deixa eu ver se entendi, você recolheu os dados e quer atualizar a div? Commented 7/03/2016 às 21:38
  • o while monta as div com resultados que ja existem no banco.. o ajax insere um novo resultado que preciso coloca-lo no mesmo esquema do while como um novo elemento que acabou de ser inserido sem atualizar a pagina Commented 7/03/2016 às 21:40
  • 2
    1. Monte uma template do elemento em string no javascript 2. No success ou then do $.ajax escreve a função que vai dar o Append desse template (preenchido com os dados do json (PHP)) 3. Vc precisa converter o evento onclick do btn-danger para funcionar na forma de "delegate", ex: $('.panel-heading').on('click','bt-danger', function() { ... }) Commented 7/03/2016 às 21:54
  • tem como vc me ajudar a montar este esquema? ou me dar um começo pra eu ter uma luz Commented 7/03/2016 às 22:05

1 Resposta 1

3

Se você for usar jQuery, o código pode ficar assim:

HTML:

<div id="pai">
  <div class="filho"></div>
  <div class="filho"></div>
  <div class="filho"></div>
  <div class="filho"></div>
</div>

jQuery:

function ajax() {
    $.ajax({
      url:"ajax.php",  
      success:function(dados) {
         $("#pai").append(dados);
      }
   });
}

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 .