6. 2009

říjen

Autoukládání textarey pomocí AJAXu a cookies

Po poslední zkušenosti, kdy se mi kvůli pádu prohlížeče smazal celý článek těsně před odesláním jsem si naprogramoval jednoduchou zálohu textarey pomocí AJAXu a cookies.

EDIT:

Pro případné rýpaly: Ano, pro tento příklad je samozřejmě zbytečné použití jQuery a vůbec celého AJAXu, ale jako příkladové řešení použití AJAXu v jQuery je tento příklad použitelný. Celý tento příklad by se dal napsat pouze v JavaScriptu.

Pro začátek budeme potřebovat JavaScriptový framework jQuery.

A nyní již k samotnému principu. Nápad byl takový, že se jednou za X sekund zavolá PHP skript, který obsah textarey (nebo čehokoliv jiného) uloží do cookie. Nikdo vám samozřejmě nebrání ukládat do databáze nebo souboru, ale tyto způsoby jsou jednak náročnější a na rozdíl od cookie se po čase samy nesmažou.

Vytvoříme si PHP skript, který si vezme potřebná data a uloží je do koláčku. Pojmenujeme jej třeba Autosave.php:

<?php
if(isset($_POST['name']) && isset($_POST['text'])){  //zjistíme zda byly přijaty parametry
        setCookie($_POST['name'],$_POST['text']);  //vytvoříme nebo přepíšeme koláček
}
?>

Nyní si vytvoříme stránku obsahující trochu javaScriptu, jednu textareu a jeden PHP výpis. Soubor nazvěme třeba index.php

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        setInterval(function() {
                $.post("autosave.php", {name:'text', text: $("#text").val()}); // pošleme souboru autosave.php parametry 'name' a 'text'
                },5000); // a to každých 5 sekund
</script>

<textarea cols="50" rows="10" id="text" name="text"><?php echo $_COOKIE['text']; ?></textarea>

A to je prosím vše. Nyní se vám bude textarea s ID text každých pět sekund ukládat do cookie s názvem text (pro přehlednost při použití více prvků) a při znovunačtení stránky se uložený text vypíše do textarey.

Kompletní příklad si můžete stáhnout zde.

Komentáře

Zatím nebyl napsán žádný komentář. Můžeš být první!

 

Hledej