fonctionnalités AJAX Autosave

Question

Quelle est la meilleure librairie javascript ou plug-in ou extension à une bibliothèque, qui a mis en œuvre la fonctionnalité de sauvegarde automatique?

Le besoin spécifique est de pouvoir « sauver » une grille de données. Pensez et Google Documents gmail de la sauvegarde automatique.

Je ne veux pas réinventer la roue si son déjà été inventé. Je cherche une implémentation existante de la fonction Autosave () magique.

Auto-économie: pousser au code serveur qui enregistre un stockage persistant, habituellement un DB. Le cadre de code du serveur est en dehors de la portée de cette question.

Notez que je ne suis pas à la recherche d'une bibliothèque Ajax, mais une bibliothèque / cadre un niveau plus élevé. Interagit avec la forme elle-même

daemach introduit une mise en œuvre sur le dessus de jQuery @ http: // daemach .blogspot.de / 2007/03 / AutoSave-jquery-plugin.html [hôte vers le bas de script]. Je ne suis pas convaincu qu'il répond aux critères légers et bien conçus cependant.

Critères

• stable, léger, bien conçu
• enregistre onChange et / ou onBlur
• enregistre plus souvent alors un nombre donné de millisecondes
• gère plusieurs mises à jour qui se produisent en même temps
• ne sauvegarde pas si aucun changement n'a eu lieu depuis la dernière sauvegarde
• enregistre différentes urls par classe d'entrée

Answer 1

Autosave devrait être assez simple à mettre en œuvre, et vous pouvez utiliser l'un des principaux cadres comme jquery ou Mootools. Tout ce que vous devez faire est d'utiliser window.setTimeout () une fois que votre utilisateur modifie quelque chose qui devrait être enregistré automatiquement, et avoir ce délai d'attente appeler les cadres javascript commandes standard AJAX.

Par exemple (avec 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

Je sais que cette question est vieux, mais je voudrais inclure un code qui me plaît le plus. Je l'ai trouvé ici: http://codetunnel.io/how-to-implement -autosave-in-your-web-app /

Voici le 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);
});

Il sauve après que l'utilisateur cesse d'écrire plus de 750 millisecondes.

Il a également un statut permettant à l'utilisateur sait que les changements ont été enregistrés ou non

Answer 3

Vous pouvez économiser sur un temps de jeu, en utilisant délai d'attente, mais une meilleure méthode peut être d'avoir juste une sorte de onchange gestionnaire d'événements, de sorte que lorsque les données sont modifiées, si vous avez pas enregistré dans un laps de temps, puis enregistrez, mais, ne pas enregistrer sur chaque frappe.

Alors, vous regardez à voir lors du dernier enregistrement, avant d'appeler la fonction ajax.

Cela vous permettra d'économiser uniquement en cas de besoin, mais à un taux prédéterminé. Donc, si vous voulez enregistrer toutes les 5 minutes, puis, peu importe les changements qui ont été faites, si un changement a été effectué dans cette fenêtre de 5 minutes vous enregistrez.

Faire l'appel ajax est trivial, mais jQuery peut le simplifier. Malheureusement, pour obtenir ce que vous voulez, de ce que je l'ai vu, vous devrez implémenter simplement vos propres fonctionnalités. Il est difficile de le faire d'une manière générale que différentes personnes peuvent vouloir sauver si sont modifiés que certains champs. Donc, juste parce que je clique sur une boîte de sélection ne peut pas conduire à la fonction de sauvegarde, mais changer quelque chose dans une zone de texte peut.

Answer 4

Pour de simples AutoSave de champs de formulaire dans les cookies j'utiliser ce grand plug-in http://rikrikrik.com/jquery/ AutoSave / Il n'envoie pas de données sur le serveur, mais si vous ne trouvez rien de mieux, il est plus facile de mettre à niveau est funcitonalily que de le faire à partir de zéro.

Answer 5

Je suggère que vous utilisez jQuery. Le « sauver » une partie reste à faire sur le back-end, bien sûr, mais jQuery fait la présentation d'AJAX demande un jeu d'enfant.

Si vous avez un backend ASP.NET, vous pouvez simplement appeler un WebMethod et soumettre la chaîne associée (le contenu d'une zone de texte, etc.) à un intervalle spécifié:

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

La demande jQuery pour appeler cette méthode serait:

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

C'est tout. Vous pouvez trouver jQuery http://jquery.com/ .

Answer 6

est-ce pas tout ce que vous avez besoin d'une minuterie qui déclenche toutes les x secondes? La fonction de rappel fera un postback AJAX au serveur de la forme avec un champ « AutoSave = true » ajouté. Il suffit de gérer ce postback sur le serveur et vous avez terminé.

Answer 7

est Synchronize )

échantillon JavaScript et HTML:

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

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

résultant de la demande ajax après le délai par défaut de 1 s:

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

Answer 8

Si vous cherchez simple et léger, je pense que le plus léger, vous pouvez obtenir l'aide est intégrée dans la fonction setTimeout() de JavaScript. Utilisez-le en combinaison avec votre choix de cadre pour l'AJAX, et vous êtes bon pour aller.

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.