javascript - tag - name jquery val()

Funcionalidad AJAX Autosave

Question

¿Cuál es la mejor biblioteca de javascript, o complemento o extensión de una biblioteca, que ha implementado la funcionalidad de guardado automático?

La necesidad específica es poder "guardar" una cuadrícula de datos. Piensa en gmail y en los documentos de Google.

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

Guardado automático: envío al código del servidor que se guarda en el almacenamiento persistente, generalmente una base de datos. 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 en la parte superior de jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script host down]. Sin embargo, no estoy convencido de que cumpla con los criterios ligeros y bien diseñados.

Criterios

• Estable, ligero, bien diseñado
• guarda onChange y / o onBlur
• no guarda con más frecuencia un número dado de milisegundos
• maneja múltiples actualizaciones ocurriendo al mismo tiempo
• no guarda si no ha ocurrido ningún cambio desde la última vez que guardó
• Guarda en diferentes URL por clase de entrada

Answer 1

¿No es todo lo que necesitas un temporizador que se dispara cada x segundos? La función de devolución de llamada realizará una devolución de AJAX al servidor del formulario con un campo "autosave = true" agregado. Simplemente maneja esta devolución de datos en el servidor y listo.

Answer 2

El guardado automático debe ser bastante simple de implementar, y puedes usar uno de los marcos principales como jquery o mootools. Todo lo que necesita hacer es usar window.setTimeout () una vez que su usuario edite algo que debería guardarse automáticamente, y que ese tiempo de espera llame a los javascript frameworks AJAX.

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 3

Para guardar automáticamente los campos de formulario en las cookies, utilizo este gran complemento http://rikrikrik.com/jquery/autosave/ No envía datos al servidor, pero si no encuentra nada mejor, es más fácil actualizarlo. Funcionalmente que hacerlo desde cero.

Answer 4

Puede ahorrar en un tiempo establecido, usando el tiempo de espera, pero, un método mejor puede ser tener algún tipo de controlador de eventos onchange, de modo que cuando se cambian los datos, si no ha guardado dentro de un período de tiempo establecido, entonces guardar, pero, no guardar en cada pulsación de tecla.

Por lo tanto, puede ver cuándo fue la última vez que guardó, antes de llamar a la función ajax.

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

Hacer la llamada ajax es trivial, pero jQuery puede simplificarlo. Desafortunadamente, 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 es posible que diferentes personas quieran guardar si solo se cambian ciertos campos. Por lo tanto, solo porque haga clic en un cuadro de selección puede no llevar a la función de guardar, pero cambiar algo en un cuadro de texto puede.

Answer 5

Sé que esta pregunta es antigua, pero me gustaría incluir un código que me guste 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 guarda después de que el usuario deja de escribir durante más de 750 milisegundos.

También tiene un estado que le permite al usuario saber que los cambios se han guardado o no

Answer 6

Si está buscando algo simple y liviano, creo que lo más liviano que puede obtener es usar la función incorporada setTimeout() JavaScript. Úselo en combinación con su elección de marco para el AJAX, y estará 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 7

Te sugiero que uses jQuery. La parte de "guardar" todavía tiene que hacerse en el backend, por supuesto, pero jQuery hace que la presentación de AJAX solicite una brisa.

Si tiene un backend de ASP.NET, simplemente puede llamar a WebMethod y enviar la cadena asociada (contenido de un cuadro de texto, etc.) en un intervalo específico:

[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. Puedes encontrar jQuery en http://jquery.com/ .

Answer 8

synchronize es un complemento de jquery que agrega funcionalidad a su página html para enviar automáticamente de forma periódica las entradas del usuario al servidor. ( código fuente )

Ejemplo de JavaScript y HTML:

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

solicitud de ajax resultante después del retraso predeterminado de 1s:

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