AJAX自動保存機能

Question

自動保存機能を実装した、最も優れたjavascriptライブラリ、またはライブラリのプラグインまたは拡張機能は何ですか？

特定の必要性は、データグリッドを「保存」できることです。 GmailとGoogleドキュメントの自動保存について考える。

既に発明されているホイールを再発明したくないです。私は魔法のautoSave（）関数の既存の実装を探しています。

自動保存：永続ストレージに保存するサーバーコード（通常はDB）にプッシュします。サーバーコードフレームワークはこの質問の範囲外です。

私はAjaxライブラリを探しているわけではありませんが、レベル以上のライブラリ/フレームワークはフォーム自体とやりとりしています。

daemachは、jQuery @http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script host down]の上に実装を導入しました。私はそれが軽量でよく設計された基準を満たしているとは確信していません。

、安定した軽量、うまく設計さ

基準

• のonChangeおよび/またはonBlurを
• が頻繁に続いミリ秒
• の一定数がで起こって複数の更新を処理し、それ以上保存し保存していません同じ時刻
• 最後に保存してから変更がない場合は保存しません。
• は入力クラスごとに異なるURLに保存します

Answer 1

オートセーブは実装が非常に簡単で、jqueryやmootoolsのような主要なフレームワークを使うことができます。自動保存されるべきものをユーザが編集した後、window.setTimeout（）を使用して、そのタイムアウトでjavascriptフレームワークの標準AJAXのものを呼び出すだけです。（jQueryを使って）例えば

：

var autosaveOn = false; 
function myAutosavedTextbox_onTextChanged() 
{ 
    if (!autosaveOn) 
    { 
     autosaveOn = true; 

     $('#myAutosavedTextbox').everyTime("300000", function(){ 
      $.ajax({ 
       type: "POST", 
       url: "autosavecallbackurl", 
       data: "id=1", 
       success: function(msg) { 
        $('#autosavenotify').text(msg); 
       } 
      }); 
     }); //closing tag 
    } 
} 

Answer 2

jQueryを使用することをお勧めします。もちろん、 "保存"の部分はバックエンドでやっていなければなりませんが、jQueryはAJAXリクエストの送信を簡単にします。

あなたはASP.NETのバックエンドを持っている場合、あなたは、単にWebメソッドを呼び出すと、指定した間隔で関連する文字列（テキストボックスなどの内容）を提出することができます

[WebMethod] 
public void AutoSave(String autoSaveContent) 
{ 
// Save 
} 

これを呼び出すためのjQueryのリクエスト方法は：

$.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}", 
dataType: "json" 
}); 

それだけです。 jQueryはhttp://jquery.com/にあります。

Answer 3

シンプルで軽量なものをお探しの場合は、JavaScriptの組み込みのsetTimeout()機能を使用すると最も軽量になると思います。 AJAXのフレームワークの選択と組み合わせて使用​​すると、あなたは良いです。

function autoSave() 
{ 
    $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery. 
    setTimeout("autoSave()", 60000); // Autosaves every minute. 
} 
autoSave(); // Initiate the auto-saving. 

Answer 4

あなたはタイムアウトを使用することにより、設定した時間を節約することができ、しかし、より良い方法は、ただのonchangeイベントハンドラのいくつかの並べ替えを持っているかもしれときように設定された時間内に保存していない場合はデータを変更して保存しますが、すべてのキーストロークで保存しないでください。

したがって、最後に保存したときに、ajax関数を呼び出す前に確認します。

これにより、必要なときにのみ、所定のレートで保存することができます。したがって、5分ごとに保存したい場合は、変更内容にかかわらず、その5分間のウィンドウ内で変更が行われた場合は保存します。

ajax呼び出しを行うことは簡単ですが、jQueryを使用すると単純化できます。残念ながら、私が見たことから、あなたが望むものを得るためには、独自の機能を実装するだけで済みます。特定のフィールドだけが変更された場合、保存したい人が多いため、一般的なやり方で行うのは難しいです。だから、私は選択ボックスをクリックするだけで保存機能につながることはできませんが、テキストボックス内の何かを変更することがあります。

Answer 5

synchronizeは、ユーザーの入力を定期的に自動的にサーバーに返すために、HTMLページに機能を追加するjquery pluginです。 （source code）

JavaScriptとHTMLサンプル：1秒のデフォルトの遅延の後

<script> 
    $("input").synchronize(); 
</script> 

<input type="text" value="initial_value" 
     class="{url:'/entity.cfc?method=updateDescription',data:{ID1:'1',ID2:'2'}}" /> 

たAJAXリクエスト：

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2 

Answer 6

を使用すると、x秒ごとに発射タイマーを必要とするすべてではないですか？コールバック関数は、 "autosave = true"フィールドが追加されたフォームのサーバーへのAJAXポストバックを行います。サーバー上でこのポストバックを処理すれば完了です。

Answer 7

クッキー内のフォームフィールドの単純な自動保存の場合は、この偉大なプラグインを使用します。http://rikrikrik.com/jquery/autosave/ サーバーにデータを送信しませんが、何も見つからない場合は、最初からそれを行うよりも、 。

Answer 8

私はこの質問は古いことを知っていますが、私は最も好きなコードを含めたいと思います。私はここでそれを見つけた： http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

ここではコードです：

var $status = $('#status'), 
    $commentBox = $('#commentBox'), 
    timeoutId; 

$commentBox.keypress(function() { 
    $status.attr('class', 'pending').text('changes pending'); 

    // If a timer was already started, clear it. 
    if (timeoutId) clearTimeout(timeoutId); 

    // Set timer that will save comment when it fires. 
    timeoutId = setTimeout(function() { 
     // Make ajax call to save data. 
     $status.attr('class', 'saved').text('changes saved'); 
    }, 750); 
}); 

ユーザーが750以上のミリ秒書き込みを停止した後、それは保存されます。

また、ユーザーをさせる状況は、私は、「自動保存」を行うことになっているものに関しては少し混乱している変更が保存されていることを知っているかいない