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.
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. @AntonioAlexandreecho
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....