AJAX Función de guardado automático

Question

¿Cuál es la mejor biblioteca de JavaScript, o complemento o extensión de una biblioteca, que ha implementado la función de autoguardado?

La necesidad específica es poder 'guardar' una cuadrícula de datos. Piense en el guardado automático de Gmail y Google Documents.

No quiero reinventar la rueda si ya se ha inventado. Estoy buscando una implementación existente de la función mágica autoSave().

Ahorro automático: empujando al código del servidor que guarda en el almacenamiento persistente, generalmente un DB. El marco del código del servidor está fuera del alcance de esta pregunta.

Tenga en cuenta que no estoy buscando una biblioteca Ajax, sino una biblioteca/marco un nivel superior: interactúa con el formulario en sí.

daemach introdujo una implementación sobre jQuery @http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script host down]. Sin embargo, no estoy seguro de que cumpla con los criterios de peso ligero y bien diseñados.

Criterios

• estable, ligero, bien diseñado
• ahorra onChange y/o onBlur
• no salva con mayor frecuencia después de un determinado número de milisegundos
• maneja múltiples cambios que ocurren en el mismo tiempo
• no se guarda si no se ha producido ningún cambio desde la última vez que guardó
• guarda en diferentes URL por clase de entrada

Answer 1

El autoguardado debe ser bastante simple de implementar, y puede usar uno de los principales frameworks como jquery o mootools. Todo lo que necesita hacer es usar window.setTimeout() una vez que su usuario edite algo que debe ser guardado automáticamente, y tener ese tiempo de espera para invocar las características estándar de AJAX de frameworks de JavaScript.

Por ejemplo (con 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

Le sugiero que use jQuery. La parte de "salvar" todavía tiene que hacerse en el backend, por supuesto, pero jQuery hace que el envío de solicitudes AJAX sea muy sencillo.

Si usted tiene un backend ASP.NET, sólo tiene que llamar a un WebMethod y presentar la cadena asociada (contenido de un cuadro de texto, etc.) en un intervalo especificado:

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

La solicitud jQuery para llamar a este método sería:

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

Eso es todo. Puede encontrar jQuery en http://jquery.com/.

Answer 3

Si buscas algo simple y liviano, creo que lo más liviano que puedes obtener es usar la función incorporada de JavaScript setTimeout(). Úselo en combinación con su elección de marco para AJAX, y está listo para comenzar.

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

puede ahorrar en un tiempo determinado, mediante el uso de tiempo de espera, pero, un mejor método puede ser que acaba de tener algún tipo de onchange controlador de eventos, por lo que cuando los datos se cambian, si no se ha guardado dentro de un período de tiempo establecido, luego se guarda, pero no se guarda con cada pulsación de tecla.

Por lo tanto, mira para ver la última vez que guardó, antes de llamar a la función ajax.

Esto le permitirá guardar solo cuando sea necesario, pero a una velocidad predeterminada. Por lo tanto, si desea guardar cada 5 minutos, independientemente de los cambios que se realizaron, si se realizó un cambio dentro de esa ventana de 5 minutos, se guarda.

Realizar la llamada ajax es trivial, pero jQuery puede simplificarlo. Lamentablemente, para obtener lo que desea, por lo que he visto, tendrá que implementar su propia funcionalidad. Es difícil hacerlo de manera general, ya que diferentes personas pueden querer ahorrar si solo se cambian ciertos campos. Por lo tanto, el hecho de que haga clic en un cuadro de selección puede no llevar a la función de guardar, pero puede cambiar algo en un cuadro de texto.

Answer 5

synchronize es un jquery plugin que agrega funcionalidad a su página html para enviar periódicamente automáticamente la entrada del usuario al servidor. (source code)

JavaScript y HTML de ejemplo:

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

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

resultante petición Ajax después del retardo por defecto de 1s:

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

Answer 6

¿No es todo lo que necesita un temporizador que se activa cada x segundos? La función de devolución de llamada hará una devolución de datos AJAX al servidor del formulario con un campo "autoguardar = verdadero" agregado. Simplemente maneje esta devolución de datos en el servidor y listo.

Answer 7

Para sencilla copia de seguridad automática de los campos de formulario en las cookies utilizo este gran plugin http://rikrikrik.com/jquery/autosave/ No envía los datos al servidor, pero si no encuentra nada mejor, es más fácil de actualizar su funcitonalily que hacerlo desde cero .

Answer 8

Sé que esta pregunta es antigua, pero me gustaría incluir un código que me gusta más. Lo encontré aquí: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Aquí está el código:

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

Se ahorra cuando el usuario deja de escribir durante más de 750 milisegundos.

También tiene un estado dejando que el usuario sepa que los cambios han sido guardados o no