Подтвердить что ты не робот

Функциональность автозапуска AJAX

Какая лучшая библиотека javascript или плагин или расширение для библиотеки, которая реализовала функции автосохранения?

Конкретная необходимость заключается в том, чтобы иметь возможность "сохранять" сетку данных. Подумайте об автосохранении gmail и Google Documents.

Я не хочу изобретать велосипед, если его уже изобрели. Я ищу существующую реализацию магической функции автосохранения().

Автоматическое сохранение: нажатие на код сервера, который сохраняется в постоянном хранилище, обычно в базе данных. Структура кода сервера выходит за рамки этого вопроса.

Обратите внимание: я не ищу библиотеку Ajax, но библиотека/фреймворк выше уровня: взаимодействует с самой формой.

daemach представил реализацию поверх jQuery @http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [script host down]. Я не уверен, что он удовлетворяет легким и хорошо спроектированным критериям.

Критерии

  • стабильный, легкий, хорошо спроектированный
  • сохраняет onChange и/или onBlur
  • сохраняется не чаще, чем заданное количество миллисекунд
  • обрабатывает одновременно несколько обновлений.
  • не сохраняется, если никаких изменений не произошло с момента последнего сохранения
  • сохраняет разные URL-адреса для каждого класса ввода
4b9b3361

Ответ 1

Автосохранение должно быть довольно простым в реализации, и вы можете использовать одну из основных фреймворков, таких как jquery или mootools. Все, что вам нужно сделать, это использовать window.setTimeout(), когда ваш пользователь редактирует что-то, что должно быть автосохранено, и этот таймаут вызывается стандартными файлами AJAX фреймворков javascript.

Например (с помощью 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
    }
}

Ответ 2

Я знаю, что этот вопрос старый, но я хотел бы включить код, который мне больше всего нравится. Я нашел его здесь: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Вот код:

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

Сохраняется после того, как пользователь перестанет писать более 750 миллисекунд.

Он также имеет статус, позволяющий пользователю узнать, что изменения были сохранены или нет

Ответ 3

Вы можете сохранить в установленное время с помощью тайм-аута, но лучшим способом может быть просто какой-то обработчик событий onchange, чтобы при изменении данных, если вы не сохранили в пределах установленного количества время, затем сохраните, но не сохраняйте при каждом нажатии клавиши.

Итак, вы можете посмотреть, когда вы последний раз сохранили, перед вызовом функции ajax.

Это позволит вам сохранять только при необходимости, но с заданной скоростью. Таким образом, если вы хотите сэкономить каждые 5 минут, то независимо от того, какие изменения были внесены, если изменения были сделаны в течение этого 5-минутного окна, которое вы сохраняете.

Создание вызова ajax тривиально, но jQuery может упростить его. К сожалению, чтобы получить то, что вы хотите, из того, что я видел, вам нужно будет просто реализовать свою собственную функциональность. Это сложно сделать в общем, так как разные люди могут захотеть сэкономить, если изменились только определенные поля. Таким образом, только потому, что я нажимаю на поле выбора, может не привести к функции сохранения, но изменение чего-либо в текстовом поле может.

Ответ 4

Для простого автосохранения полей формы в файлах cookie я использую этот отличный плагин http://rikrikrik.com/jquery/autosave/ Он не отправляет данные на сервер, но если вы не найдете ничего лучшего, проще обновить его функционально, чем сделать это с нуля.

Ответ 5

Я бы предположил, что вы используете jQuery. Разумеется, часть "сохранения" по-прежнему должна выполняться на бэкэнд, но jQuery делает подачу AJAX запросами на ветер.

Если у вас есть бэкэнд ASP.NET, вы можете просто вызвать WebMethod и отправить связанную строку (содержимое текстового поля и т.д.) с заданным интервалом:

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

Запрос jQuery для вызова этого метода:

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

Это все. Вы можете найти jQuery в http://jquery.com/.

Ответ 6

Если вы ищете простой и легкий, я думаю, что самый легкий, который вы можете получить, это использование встроенной функции setTimeout() для JavaScript. Используйте его в сочетании с вашим выбором фреймворка для AJAX, и вам хорошо идти.

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.

Ответ 7

synchronize является плагин jquery который добавляет функциональность вашей странице html, чтобы периодически автоматически отправлять пользовательский ввод обратно на сервер. (исходный код)

Пример JavaScript и HTML:

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

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

результат запроса ajax после задержки по умолчанию 1s:

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

Ответ 8

Не все ли вам нужно таймер, который срабатывает каждые x секунд? Функция обратного вызова выполняет обратную передачу AJAX на сервер формы с добавленным полем "autosave = true". Просто обработайте эту обратную передачу на сервере, и все готово.