web-dev-qa-db-fra.com

AJAX Fonction d'enregistrement automatique

Quelle est la meilleure bibliothèque javascript, ou plug-in ou extension d'une bibliothèque, qui a implémenté la fonctionnalité d'enregistrement automatique?

Le besoin spécifique est de pouvoir "sauvegarder" une grille de données. Pensez à Gmail et à la sauvegarde automatique de Google Documents.

Je ne veux pas réinventer la roue si elle a déjà été inventée. Je recherche une implémentation existante de la fonction magique autoSave ().

Enregistrement automatique: pousser vers un code serveur qui enregistre dans un stockage persistant, généralement une base de données. Le cadre de code du serveur sort du cadre de cette question.

Notez que je ne recherche pas une bibliothèque Ajax, mais une bibliothèque/framework d'un niveau supérieur: interagit avec le formulaire lui-même.

daemach a introduit une implémentation au-dessus de jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [Script Host down]. Je ne suis pas convaincu cependant qu'il réponde aux critères légers et bien conçus.

Critères

  • stable, léger, bien conçu
  • économise onChange et/ou onBlur
  • n'économise pas plus souvent qu'un certain nombre de millisecondes
  • gère plusieurs mises à jour en même temps
  • ne sauvegarde pas si aucun changement n'est intervenu depuis la dernière sauvegarde
  • enregistre dans différentes URL par classe d'entrée
javascriptajaxsynchronize
28
antony.trupe

L'enregistrement automatique devrait être assez simple à implémenter, et vous pouvez utiliser l'un des principaux frameworks comme jquery ou mootools. Tout ce que vous devez faire est d'utiliser window.setTimeout () une fois que votre utilisateur a édité quelque chose qui devrait être enregistré automatiquement, et que ce délai appelle la norme des frameworks javascript AJAX stuff).

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
    }
}
47
jrista

Je sais que cette question est ancienne, mais j'aimerais inclure un code que j'aime 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 enregistre après que l'utilisateur arrête d'écrire pendant plus de 750 millisecondes.

Il a également un statut permettant à l'utilisateur de savoir que les modifications ont été enregistrées ou non

18
Claudio Shigueo Watanabe

Vous pouvez économiser sur un temps défini, en utilisant le délai d'expiration, mais une meilleure méthode peut être d'avoir simplement une sorte de gestionnaire d'événement onchange, de sorte que lorsque les données sont modifiées, si vous n'avez pas enregistré dans un laps de temps défini, alors enregistrer, mais, ne pas enregistrer sur chaque frappe.

Donc, vous regardez pour voir quand vous avez enregistré la dernière fois, avant d'appeler la fonction ajax.

Cela vous permettra d'économiser uniquement en cas de besoin, mais à un rythme prédéterminé. Donc, si vous souhaitez enregistrer toutes les 5 minutes, quelles que soient les modifications apportées, si une modification a été effectuée 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, d'après ce que j'ai vu, vous devrez simplement implémenter vos propres fonctionnalités. Il est difficile de le faire de manière générale car différentes personnes peuvent vouloir enregistrer si seuls certains champs sont modifiés. Donc, juste parce que je clique sur une zone de sélection peut ne pas conduire à la fonction d'enregistrement, mais changer quelque chose dans une zone de texte peut.

3
James Black

Pour la sauvegarde automatique simple des champs de formulaire dans les cookies, j'utilise ce super plugin http://rikrikrik.com/jquery/autosave/ Il n'envoie pas de données au serveur, mais si vous ne trouvez rien mieux, il est plus facile de le mettre à niveau de manière fonctionnelle que de le faire à partir de zéro.

1
Antony Harder

N'est-ce pas tout ce dont vous avez besoin d'une minuterie qui se déclenche toutes les x secondes? La fonction de rappel fera une AJAX publication sur le serveur du formulaire avec un champ "autosave = true" ajouté. Il suffit de gérer cette publication sur le serveur et vous avez terminé.

0
Naren

Je vous suggère d'utiliser jQuery. La partie "sauvegarde" doit encore être faite sur le backend, bien sûr, mais jQuery rend la soumission de 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 (contenu d'une zone de texte, etc.) à un intervalle spécifié:

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

La requête 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 sur http://jquery.com/ .

0
Alex

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

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.
0
James Skidmore

synchronize est un plugin jquery qui ajoute des fonctionnalités à votre page html pour renvoyer périodiquement automatiquement les entrées de l'utilisateur au serveur. ( code source )

Exemple JavaScript et HTML:

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

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

requête ajax résultante après le délai par défaut de 1s:

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