AJAX Autosave fonctionnalité

Je sais que cette question est ancienne, mais je voudrais 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 () {
    $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 dispose également d'un statut permettant à l'utilisateur de savoir que les modifications ont été enregistrées ou non

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

Donc, vous voyez lorsque vous avez enregistré, 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 économiser toutes les 5 minutes, alors peu importe quoi des modifications ont été apportées, si une modification a été effectuée dans cette fenêtre de 5 minutes que 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 votre propre fonctionnalité. Il est difficile de le faire d'une manière générale car différentes personnes peuvent vouloir enregistrer si seulement certains champs sont modifiés. Donc, juste parce que je clique sur une boîte de sélection peut ne pas conduire à la fonction de sauvegarde, mais changer quelque chose dans une zone de texte peut.

Pour une simple Sauvegarde automatique 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 de mieux, il est plus facile de mettre à niveau son fonctionnement que de le faire à partir de zéro.

Je vous suggère d'utiliser jQuery. La partie" sauver " doit encore être faite sur le backend, bien sûr, mais jQuery rend la soumission des demandes AJAX un jeu d'enfant.

Si vous avez un ASP.NET backend, vous pouvez simplement appeler une 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 à http://jquery.com/ .

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 publication AJAX sur le serveur du formulaire avec un champ" autosave=true " ajouté. Juste gérer cette publication sur le serveur et vous avez terminé.

Synchroniser {[4] } est un plugin jQuery {[4] } qui ajoute des fonctionnalités à votre page html pour envoyer 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

Si vous cherchez simple et léger, je pense que le plus léger que vous pouvez obtenir utilise la fonction setTimeout() intégrée de 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.