AJAX Automatisches Speichern Funktionalität

StackOverflow https://stackoverflow.com/questions/931252

  •  06-09-2019
  •  | 
  •  

Frage

Was ist die beste JavaScript-Bibliothek, oder Plugin oder Erweiterung eine Bibliothek, das automatische Speichern Funktionalität implementiert hat?

Der spezifische Bedarf ist in der Lage sein, einen Datenraster zu ‚retten‘. Denken Sie gmail und Google Documents' Autosave.

Ich will nicht das Rad neu erfinden, wenn seine bereits erfunden worden. Ich suche nach einer bestehenden Implementierung der magischen Autosave () Funktion.

Auto-Speichern: Drücken auf den Server-Code, der den Persistent-Speicher speichert, in der Regel ein DB. Der Server-Code-Framework ist nicht in den Anwendungsbereich dieser Frage.

Beachten Sie, dass ich nicht für eine Ajax-Bibliothek suchen, aber eine Bibliothek / Rahmen eine Ebene höher. Interagiert mit dem Formular selbst

daemach eine Implementierung auf eingeführt von jQuery @ http: // daemach .blogspot.de / 2007/03 / Autosave-jquery-plugin.html [Script Host down]. Ich bin nicht überzeugt, dass es, obwohl die leicht und gut entwickelt Kriterien erfüllt.

Kriterien

  • stabil, leicht, gut entwickelt
  • spart onChange und / oder onBlur
  • spart nicht häufiger dann eine bestimmte Anzahl von Millisekunden
  • Griffe mehrere Updates zur gleichen Zeit geschieht
  • nicht speichern, wenn keine Änderung zuletzt aufgetreten ist seit speichern
  • spart an unterschiedliche URLs pro Eingangsklasse
War es hilfreich?

Lösung

Automatisches Speichern sollte ziemlich einfach zu implementieren sein, und man konnte eine der wichtigsten Frameworks wie jQuery oder Mootools verwenden. Alles, was Sie tun müssen, ist window.setTimeout () verwenden, wenn Ihre Benutzer etwas bearbeitet, die automatisch gespeichert werden sollen, und haben das Timeout der JavaScript-Frameworks AJAX Zeug Standard nennen.

Zum Beispiel (mit 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
    }
}

Andere Tipps

Ich weiß, dass diese Frage ist alt, aber ich möchte einen Code enthalten, die ich am meisten mag. Ich fand es hier: http://codetunnel.io/how-to-implement -autosave-in-your-web-app /

Hier ist der Code: 

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

$commentBox.keypress(function () { // or keyup to detect backspaces
    $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);
});

Es speichert, nachdem der Benutzer für mehr als 750 Millisekunden nicht mehr zu schreiben.

Es hat auch einen Status lassen den Benutzer wissen, dass die Änderungen gespeichert wurden oder nicht

Sie könnten auf einer festgelegte Zeit sparen, indem Timeout verwenden, aber kann eine bessere Methode sein, nur eine Art von Event-Handler onchange hat, so dass, wenn Daten geändert werden, wenn Sie nicht innerhalb einer festgelegten Menge an gespeicherten Zeit, dann speichern, aber nicht auf jedem Tastendruck speichern.

Also, schauen Sie sehen, wenn Sie das letzte Mal gespeichert, bevor die Ajax-Funktion aufrufen.

Dies ermöglicht es Ihnen nur zu sparen, wenn nötig, aber mit einer vorgegebenen Geschwindigkeit. Also, wenn Sie alle 5 Minuten gespeichert werden sollen, dann unabhängig davon, welche Änderungen vorgenommen wurden, wenn eine Änderung innerhalb dieser 5 Minuten Fenster gemacht wurde, um Sie speichern.

Machen Sie den Ajax-Aufruf ist trivial, aber jQuery kann es vereinfachen. Leider zu bekommen, was Sie wollen, von dem, was ich gesehen habe, müssen Sie nur Ihre eigene Funktionalität implementieren. Es ist schwierig, in einer allgemeinen Art und Weise, wie verschiedene Menschen tun wollen, wenn nur speichern bestimmte Felder geändert werden. Also, nur weil ich auf einer Auswahlbox Klicken Sie nicht auf die Funktion speichern führen kann, sondern etwas in einem Textfeld zu ändern kann.

Für einfache automatische Speichern von Formularfeldern in Cookies verwenden ich diese große Plugin http://rikrikrik.com/jquery/ Autosave / Es werden keine Daten an den Server zu senden, aber wenn Sie nichts besseres finden, ist es einfacher zu aktualisieren, es ist funcitonalily als es von Grund auf zu tun.

Ich würde vorschlagen, dass Sie jQuery verwenden. Der „Speicher“ Teil noch auf dem Backend zu tun, natürlich, aber jQuery macht die Einreichung von AJAX fordert eine Brise.

Wenn Sie einen ASP.NET-Backend haben, können Sie einfach eine WebMethod anrufen und die zugehörige Saite (Inhalt einer Textbox etc.) einreichen in einem bestimmten Intervall: 

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

Die jQuery Anfrage zum Aufrufen dieser Methode wäre: 

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

Das ist alles. Sie können jQuery unter http://jquery.com/ finden.

Ist das nicht alles was Sie brauchen einen Timer, der alle x Sekunden feuert? Die Callback-Funktion wird auf den Server des Formulars ein AJAX-Postbacks tut hinzugefügt mit einem „Autosave = true“ ein. Griff einfach dieses Postbacks auf dem Server und Sie sind fertig.

synchronisieren ist ein Quellcode )

JavaScript und HTML-Beispiel: 

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

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

resultierende Ajax-Anforderung nach der Standardverzögerung von 1 s: 

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

Wenn Sie sich für eine einfache und leicht suchen, denke ich, das leichteste Sie bekommen kann, ist JavaScript eingebauten in setTimeout() Funktion. Verwenden Sie es in Kombination mit Ihrer Wahl der Rahmen für die AJAX, und Sie sind gut zu gehen. 

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.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top