-4

Um código que realiza o autosave de dados em um formulário trabalha assim:

autosave.php

<?php
require_once '../multiinjet/web/includes/configuracao.php';
try {

    /*Pegar valores postados no formulário*/
    $title=&$_POST['title'];
    $body=&$_POST['body'];

    /*ID do usuário*/
    $user_id=1;  

    $query = $conecta->prepare("SELECT * FROM autosave WHERE user='$user_id'");
    $query->execute();
    $resultado = $query->fetchAll(PDO::FETCH_ASSOC);
    $return_count = $query->rowCount();

if($return_count > 0){     

    if(isset($title) || isset($body)){
    /*Atualizar autosave*/
        $update_qry = $conecta->prepare("UPDATE autosave SET msg_title='$title', msg_body='$body' WHERE user='$user_id'");
        $update_qry -> execute(); 
    } else {
    /*Pegar dados salvos no BD*/ 
        $get_autosave = $conecta->prepare("SELECT * FROM autosave WHERE user='$user_id'");
        $get_autosave->execute();
        while ($gt_v = $get_autosave->fetch(PDO::FETCH_ASSOC)) {
            $title=$gt_v['msg_title'];
            $body=$gt_v['msg_body']; 

            echo json_encode(array('title' => $title, 'body' => $body));
        }           
    }
} else { 
/*Inserir as variáveis no BD*/ 
    $insert_qry = $conecta->prepare("INSERT INTO autosave (user, msg_title, msg_body) VALUES (?, ?, ?)");
    $insert_qry->execute(array($user_id, $title, $body));  
}
} catch(PDOException $e) {
    echo $e->getMessage();
    }
?>

JavaScript:

$(function () {
        $.post("autosave.php", function (data) {
            $("[name='title']").val(data.title);
            $("[name='body']").val(data.body);
        }, "json");
        setInterval(function () {
            $.post("autosave.php", $("#form").serialize());
        }, 2000);
    });

HTML:

<body>
    <div class="center">
        <div class="saved"></div>
        <form id="form">
            <input type="text" name="title" placeholder="Title" autofocus>
            <textarea type="text" name="body" placeholder="Body"></textarea>
            <input type="submit" value="Send">
        </form> 
    </div> 
</body>

Contudo ao realizar as seguintes modificações para que o autosave se ajuste ao meu contexto, o mesmo não funciona.

Substituir [autosave.php]:

/*Pegar valores postados no formulário*/
    $title=&$_POST['title'];
    $body=&$_POST['body'];

Por [autosave.php]:

/*Pegar valores postados no formulário: dados*/
    $dados = json_decode(file_get_contents('php://input'), true);
    $p = $dados['dados']; // pega o serializado do AJAX
    parse_str($p, $dados); // transforma em array de PHP
    $title  =  $dados['title'];
    $body   =  $dados['body'];

Acresentar [autosave.php]:

$resultado = $query->fetchAll(PDO::FETCH_ASSOC);

foreach($resultado as $res){
    $titulo = $res['msg_title'];
    $corpo  = $res['msg_body'];
}

Substituir [autosave.php]:

if(isset($title) || isset($body))

Por [autosave.php]:

if(($title != $titulo) || ($body != $corpo))

Substituir [JavaScript]:

$(function () {
    $.post("autosave.php", function (data) {
        $("[name='title']").val(data.title);
        $("[name='body']").val(data.body);
    }, "json");
    setInterval(function () {
        $.post("autosave.php", $("#form").serialize());
    }, 2000);
});

Por [JavaScript]:

setInterval(function () {           
    var dados = $('#form').serialize();
    $.ajax({
      method  : 'POST',
      url     : 'autosave.php',
      dataType: 'json',
      data : {'dados': dados},//
      headers : {'Content-Type': 'application/x-www-form-urlencoded'},
      success: function(data){
         console.debug('Success: ' + data);
         $("[name='title']").val(data.title);
      }
     })
}, 2000);

Referência:

http://www.rrpowered.com/2014/07/auto-save-a-draft-with-php-and-jquery/

9
  • Qual o erro que dá? Sabe debugar javascript/ajax com Firebug ou outro console de inspeção? Commented 25/01/2017 às 23:41
  • Antonio, não exibe erro. Usei console.debug('Success: ' + data); e não é retornado absolutamente nada no console. O save automático para de funcionar. Já com o código original: ao atualizar os campos do formulário ou a página, eles são restaurados automaticamente do BD nos seus respectivos lugares. @AntonioAlexandre
    – lucasbento
    Commented 26/01/2017 às 3:11
  • Então , issa ae se vai ter de fracionar teu código e ir acompanhando até onde ele roda, quando parar, pimba, tá ai o erro, ai se posta...
    – MagicHat
    Commented 28/01/2017 às 2:31
  • @MagicHat, a questão é essa não é exibido erro! Gostaria simplesmente de saber se minha lógica, ou a forma que realizei as modificações estão corretas...
    – lucasbento
    Commented 28/01/2017 às 18:17
  • Veja quando eu digo erro não digo que terá um aviso sobre o que está errado, digo que o programa parou em determinado ponto ou o resultado não é como o esperado, então creio que vc precisa ir testando parte por parte e ver onde exatamente ele para... Por exemplo, dê um echo em ` $title=&$_POST['title'];` e veja se ele está retornando o valor desejado, e assim por diante, no momento em que o programa se comportar diferente do esperado é onde provavelmente estará o erro....
    – MagicHat
    Commented 28/01/2017 às 21:41

2 Respostas 2

1
+100

Luccas, você seguiu um tutorial sem levar em conta que o tutorial poderia estar com erros. E esse da referência meu amigo, estava mesmo capenga em muitas partes. Então o que eu fiz foi tomar o tutorial como base e reescrever o código. Agora você tem um exemplo testado que funciona.

Primeiramente, a tabela e uma linha para teste:

CREATE TABLE `autosave` (
  `id` int(15) NOT NULL AUTO_INCREMENT,
  `user_id` int(15) NOT NULL,
  `msg_title` varchar(255) NOT NULL,
  `msg_body` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
);

INSERT INTO `autosave` (`id`, `user_id`, `msg_title`, `msg_body`) VALUES
(1, 1, 'Teste do autosave', 'Teste de mensagem que ficará sendo autosalva de poucos em poucos segundos.');

Em seguida, vamos ver o index.php, ele iniciava sem carregar nada e foi alterado pra conectar no banco e trazer a linha de teste.

index.php

<?php
    require 'load_form.php';

?>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Auto Save Draft</title>
    <link rel="stylesheet" type="text/css" href="css/autosavedraft.css" />
    <script rel="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script rel="text/javascript" src="js/autosavedraft.js"></script>
</head>
<body>
    <div id="flash_container">
        <div id="flash_message"></div>
    </div>

    <div class="center">
        <form  action="save.php" method="POST">
            <input type="hidden" name="user_id" value="<?php echo $user_id; ?>">
            <input type="text" name="title" value="<?php echo $title; ?>" placeholder="Title" autofocus>
            <textarea type="text" name="body" placeholder="Body"><?php echo $body; ?></textarea>
            <input type="submit" value="Salvar">
        </form> 

        <p>
            <small>O formulário será salvo automaticamente a cada 10 segundos.</small>
        </p>        
    </div> 

<?php
    require 'flash_save.php'; // chama os alertas de saved ou error com javascript após salvar com o botão Salvar
?>

</body>
</html>

Vamos continuar com o código que o index.php chama, a começar pelo load_form.php, o css/autosavedraft.css, o js/autosavedraft.js e o flash_save.php. Mais adiante veremos o código do save.php

load_form.php

<?php

$user_id = 1; // O ideal é que não seja passado pro form, pegar da sessão após algum login
              // Como nesse exemplo não estou usando session, estou passando pelo form

require("config.php"); // traz variável $pdo_connection 


$stmt = $pdo_connection->prepare("SELECT * FROM autosave WHERE user_id=?");
$stmt->execute(array($user_id));


$row = $stmt->fetch(PDO::FETCH_ASSOC);

$title = $row['msg_title'];
$body  = $row['msg_body']; 

O load_form.php carrega as variáveis title e body que serão exibidas ao carregar a página index.php. Como esse arquivo deu um require em config.php, segue abaixo o código do mesmo. Será necessário você adaptar as variáveis com os dados do seu banco.

config.php

<?php

//CONFIG CONEXÃO
$db_name = 'testdb';
$db_host= '127.0.0.1';
$db_user = 'root';
$db_password = '';  

$dsn = 'mysql:dbname='.$db_name.';host='.$db_host;

$pdo_connection = new PDO($dsn, $db_user, $db_password);
$pdo_connection->exec("SET CHARACTER SET utf8");

A seguir, o código CSS que só teve umas poucas mudanças em relação ao original, no final do arquivo. Perceba que o nome do arquivo está sinalizando que você deve criar uma pasta css e pôr ele dentro.

css/autosavedraft.css

body, textarea {
  font-family: "arial";  
}

.center {
    width: 780px;
    margin: 30px auto; 
}

input[type="text"], textarea {
    padding: 20px;
    margin: 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: solid #c5c5c5 1px;
    font-size: 20px;
    outline: none;
    width: 40.5em;
}

input[type="text"]:hover, textarea:hover {
    border: solid #666 1px;
}

textarea {
  height: 300px;  
}

input[type="submit"] {
    margin: 5px;
    background: #2ca5f5;
    background-image: -webkit-linear-gradient(top, #2ca5f5, #2f90cc);
    background-image: -moz-linear-gradient(top, #2ca5f5, #2f90cc);
    background-image: -ms-linear-gradient(top, #2ca5f5, #2f90cc);
    background-image: -o-linear-gradient(top, #2ca5f5, #2f90cc);
    background-image: linear-gradient(to bottom, #2ca5f5, #2f90cc);
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 20px 30px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

::-webkit-input-placeholder {/* WebKit browsers */
    color: #c5c5c5;
}

:-moz-placeholder {/* Mozilla Firefox 4 to 18 */
    color: #c5c5c5;
    opacity: 1;
}

::-moz-placeholder {/* Mozilla Firefox 19+ */
    color: #c5c5c5;
    opacity: 1;
}

:-ms-input-placeholder {/* Internet Explorer 10+ */
    color: #c5c5c5;
}

input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(46, 100, 254, 1);
    border: 1px solid rgba(46, 100, 254, 1);
    padding: 20px;
    margin: 5px;
    font-size: 20px;
}

body { margin:0; padding:0;}
#flash_container { height:30px; padding:0; margin:0; text-align:center; }
#flash_message { padding:10px; display:none; border-bottom:1px solid #ccc; background-color: #fafafa; }
.error { color:#d44; }
.ok { color:#0d4;}

Esses último estilos são para uma mensagem que aparece no topo da tela e dizem quando o formulário foi salvo ou deu erro. A seguir vamos ver o javascript que faz o ajax a cada 10 segundos.

js/autosavedraft.js

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

ultimo_form_salvo='';

function ajaxPost()
{

    form_obj = $('form').serializeObject();
    dados_atuais = JSON.stringify(form_obj);

    //alert(dados_atuais);

    if(dados_atuais==ultimo_form_salvo)
        setTimeout(ajaxPost, 10000);
    else    
    $.ajax({
      type: 'POST',
      url: 'autosave.php',
      data: 
      {
        dados: form_obj
      },
      success: function(data) 
      {
        ultimo_form_salvo = dados_atuais;

        if(data==1)
        {
            $("#flash_message").html('<span class="ok">Salvo automaticamente.</span>');
        }
        else
        {
            $("#flash_message").html('<span class="error">Erro no autosalvamento.</span>');
        }

        $("#flash_message").fadeToggle( "slow","linear" );

        setTimeout(function(){

          $("#flash_message").fadeToggle( "slow","linear" );

          setTimeout(ajaxPost, 10000); // chama de novo após 10 segundos

        }, 5000); // esconde depois de 5 segundos

      }
    });         
}

(function () {setTimeout(ajaxPost, 10000); })();

Esse javascript é executado no carregamento inicial da página e fica enviando os dados do formulário a cada 10 segundos para a página autosave.php.

autosave.php

<?php

require 'functions.php';

echo autosave();

Essa página ficou simplificada pois o código dela foi convertido em função e aproveitado para quando o usuário clicar no botão salvar usando o mesmo código. Segue abaixo o arquivo functions.php que contém a função autosave() que retorna 1 se o ajax rodar com sucesso e 0 se ocorrer algum erro.

functions.php

<?php

function autosave()
{

    try 
    {
        require("config.php");
        //variável $pdo_connection criada em config.php

        /*Get the posted values from the form*/

        if(isset($_POST["dados"])) 
            $dados = &$_POST["dados"]; // se veio do ajax
        else
            $dados = &$_POST;   // se veio clicando no botão de salvar

        $user_id = $dados['user_id'];
        $title   = $dados['title'];
        $body    = $dados['body'];


        /*Get user id*/
        //$user_id=1;  // vindo agora de um input hidden do form, o ideal é que venha de uma variável de sessão após um login

        $stmt = $pdo_connection->prepare("SELECT * FROM autosave WHERE user_id=?");
        $stmt->execute(array($user_id));

        $return_count = $stmt->rowCount();

        if($return_count > 0)
        {     
            /*Update autosave*/
            $update_qry = $pdo_connection->prepare("UPDATE autosave SET msg_title=?, msg_body=? WHERE user_id=?");
            $update_qry -> execute(array($title, $body, $user_id));   
        }
        else
        {
            /*Insert the variables into the database*/ 
            $insert_qry = $pdo_connection->prepare("INSERT INTO autosave (user_id, msg_title, msg_body) VALUES (?, ?, ?)");
            $insert_qry->execute(array($user_id, $title, $body)); 
        }       


        return '1';
    } 
    catch(PDOException $e) 
    {
        //echo $e->getMessage();
        return '0';
    }


}

Essa função autosave() verifica se existe uma linha com o id de usuário que veio por post, caso exista, atualiza essa linha, caso não exista cria a mesma. Todas as queries foram mudadas para usarem prepared statements e não só algumas como no tutorial original. Vejamos agora o código da página save.php que utiliza a mesma função.

save.php

<?php

require 'functions.php';

$retorno = autosave();

if($retorno)
{
    header("Location: index.php?saved");
}
else
{
    header("Location: index.php?error");
}

Ao invés de dar um echo no retorno da função como faz a autosave.php, o save.php analisa o retorno e redireciona para a página index.php, passando uma variável saved se tudo ocorreu bem ou uma variavél error se ocorreu algum erro.

Vejamos agora o código do arquivo flash_save.php que é chamado no rodapé da página index.php

flash_save.php

<?php

if(isset($_GET["saved"])) 
{
?>
     <script> 
        $("#flash_message").html('<span class="ok">Salvo com sucesso.</span>');
        $("#flash_message").fadeToggle( "slow","linear" );

        setTimeout(function()
        {
          $("#flash_message").fadeToggle( "slow","linear" );
        }, 5000); // esconde depois de 5 segundos   
    </script>
<?php 
}  
else
if(isset($_GET["error"])) 
{
?>
     <script> 
        $("#flash_message").html('<span class="error">Erro ao salvar.</span>');
        $("#flash_message").fadeToggle( "slow","linear" );

        setTimeout(function()
        {
          $("#flash_message").fadeToggle( "slow","linear" );
        }, 5000); // esconde depois de 5 segundos   
    </script>
<?php 
}  
?>

Esse código cola um bloquinho de java-script que ativa uma mensagem no topo da tela. Se receber a variável saved, mostra a mensagem de sucesso que some depois de 5 segundos. Se receber a variável error mostra mensagem de erro que também some depois de 5 segundos.

O funcionamento é esse: Carrega informações que possivelmente já existem pra determinado usuário e fica se salvando de 10 em 10 segundos no banco de dados. Caso ainda não exista na tabela uma linha com o id do usuário, aparecerá form em branco. Esse id atualmente pode ser modificado no arquivo load_form.php

Esse é o exemplo proposto pelo tutorial que você estava fazendo com algumas adaptações para poder ver rodando. Do jeito que estava no tutorial não tinha como ver funcionando mesmo e por isso não dava erro mas também nada ocorria.

Espero que essa resposta seja satisfatória. Qualquer dúvida pergunte nos comentários. Achei super maneiro que mesmo a pergunta tendo sido negativada por tanta gente você tenha oferecido 100 da sua reputação para conseguir uma resposta. Você estava mesmo interessado em saber o que estava acontecendo errado. Moral da história: Você não fez nada errado, o tutorial que estava meio capenga mesmo.

Sugiro refazer tudo que fez do zero, criar novamente a tabela, criar os arquivos e mudar variáveis de conexão, utilizando esse código com os nomes de arquivos que escrevi aqui em negrito em cima de cada bloco de código.

Grande abraço e boa sorte nos estudos.

4
  • Antonio, muitíssimo obrigado pela atenção. Satisfez bacana e ainda esclareceu algumas dúvidas. Aproveitando a brecha, sei que alguns membros tentaram me ajudar, criticaram ou simplesmente negativaram, OK, não tiro o mérito dos que não tiveram algo à acrescentar, até porque não soube fazer um Exemplo Mínimo, Completo e Verificável ou até mesmo por várias tentativas sem sucesso, não consegui pensar em um. Contudo, se todos tivessem a mesma disposição, claro que, você quase pegou na minha mão pra programar... o fórum traria, talvez, muito mais aprendizado aos que o buscam.
    – lucasbento
    Commented 1/02/2017 às 1:45
  • AH, uma pequena correção no seu código da functions.php, autoexecução da função: (function ajaxPost(){})();, pelo menos pra mim, só funcionou com o acréscimo desse detalhe.
    – lucasbento
    Commented 1/02/2017 às 1:46
  • Ué, no functions.php não tem javascript. Você se refere a chamada inicial do ajaxPost no autosavedraft.js? Essa parte mantive o código que estava no tutorial e aqui foi de boa: $(function () { setTimeout(ajaxPost, 10000); }); começando com $ e sem o parênteses. Tb já vi em jquery como $(document).ready(function() { ... }); Conheci a forma que você usou nessa resposta: pt.stackoverflow.com/a/175343/62295 E já usei tb como window.load=function(){...} De qualquer forma fico feliz que tenha funcionado. Obrigado por aceitar a resposta. :-) Commented 1/02/2017 às 2:24
  • Isso, peço desculpas, o código é da autosavedraft.js. Mas de qualquer forma, se alguém se interessar pela solução, caso ocorra esse problema, fica aí as alternativas.
    – lucasbento
    Commented 1/02/2017 às 2:36
1

[COMPLEMENTO à resposta do Antônio]:

A captura dos dados serializados na página PHP, utilizando a estrutura abaixo [problema apresentado na pergunta], não é possível pois, somente $_POST['dados'] ficará acessível. $_POST['dados'] é uma string e conterá algo como: title=titulo&body=corpo e não um array como esperado.

[JavaScript do problema supracitado]

var dados = $('#form').serialize();
$.post("autosave.php", {'dados': dados});

[PHP do problema supracitado]

$title=&$_POST['title'];
$body=&$_POST['body'];

[Solução]

Com base na resposta do @FilipeMoraes: Como pegar, por referência, valores de string utilizando o PHP, uma solução é pegar o retorno da função serializeArray e criar um novo objeto:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Sendo assim, aplicando a solução:

[JavaScript]

var dados = $('#form').serializeObject();
$.post("autosave.php", {'dados': dados});

[PHP]:

$title = &$_POST['dados']['title'];
$body  = &$_POST['dados']['body'];
5
  • Luccas, acho que conseguimos fazer com dados serializados tb se quisermos. Na minha resposta coloquei daquela forma porque é a forma que uso mais. Vou tentar mudar aqui na minha máquina o código com a forma que você postou porque acho que pode ser vantajoso para caso vá mudar pra mais campos depois, não precisar mudar nada no javascript. Commented 1/02/2017 às 2:37
  • Olha rapaz, com a serialização do objeto e uma verificação ficou muito melhor, pois coloquei uma condição comparando o JSON do último form que foi enviado com o atual e se for igual, não envia de novo, apenas chama a verificação de novo depois de 10 segundos pra ver se algo mudou. Assim só manda os dados pra atualização se o conteúdo do form tiver sido alterado. Vou editar lá na resposta. E depois explico aqui o que foi alterado. Commented 1/02/2017 às 4:00
  • Pronto, alterei o arquivo autosavedraft.js incluindo a função que vc passou e pondo para pegar ao invés dos valores do campo, o form serializado e alterei o functions.php pra pegar os dados tb da forma como vc indicou. Isso teve dois bônus: 1) Passou a ser desnecessário mudar o javascript pra incluir novos campos. 2) Podemos usar o form serializado para comparar com o último que foi salvo de maneira bem simples, fazendo que só faça requisição realmente se algo foi modificado. Volta lá na resposta e vê o código dos arquivos autosavedraft.js e functions.php Commented 1/02/2017 às 4:13
  • Foi preciso alterar no functions.php o trecho que afetava o Salvar com botão tb, pq quando a função passou a pegar $_POST["dados"] o código php que é executado ao salvar clicando com o "botão Salvar" passou a ser diferente. Inseri uma condição que verifica da onde veio, se foi por $_POST["dados"] enviado pelo ajax ou com todas as variáveis soltas enviado pelo botão de salvar. Commented 1/02/2017 às 4:43
  • Compreendi, excelente @AntonioAlexandre, obrigado novamente. Se não for pedir demais, caso possua, poderia me chamar lá no Skype? lucasbignose ou acessa o chat → chat.stackexchange.com/rooms/52883/…
    – lucasbento
    Commented 1/02/2017 às 17:39

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 .