Я реализую относительно простую систему автосохранения, и я хотел бы сделать это, используя библиотеку Prototype. Я использую запрос PeriodicalUpdater, но он не работает, как я надеялся. Короче говоря, я периодически периодически отправляю содержимое textarea через запрос AJAX на страницу PHP, которая будет сохранять его в базе данных MySQL. Я делаю что-то вроде (сокращенного кода):
<html> <head> <script type="text/javascript" src="scripts/prototype.js"></script> <script> function autosave() { new Ajax.PeriodicalUpdater('save_message', 'autosave.php', { method: 'post', parameters: {id: $('id').value, save_text: $('myInput').value}, frequency: 5, decay: 2 }); } </script> </head> <body> <input type="hidden" id='id' name='id' /> <textarea id='myInput' name='myInput'></textarea> <script> autosave(); </script> </body> </html> Затем autosave.php примет содержимое формы и напишет их в мою базу данных. Эта часть работает нормально. То, что происходит, как я обнаружил, это PeriodicalUpdater вызывается с исходным вводом формы, а затем периодически вызывается с этим начальным входом формы.
Таким образом, это была длинная настройка для относительно короткого вопроса: как использовать Prototype (если возможно) для периодического создания запроса AJAX с использованием текущего значения textarea?
вы можете просто использовать Ajax.Request с setinterval, что-то вроде этого:
document.observe("dom:loaded", function() { intervalID = window.setInterval("autosave()",500); }); function autosave() { new Ajax.Request('autosave.php', { method: 'post', parameters: {id: $('id').value, save_text: $('myInput').value}, }); }
Ajax.Request – правильный ход, но почему бы не сделать его более многоразовым. Если у вас есть только один вход, или даже если у вас было много, я бы посоветовал что-то вроде:
<form action="/user/4" method="post"> <input type="text" name="user[name]" value ="John" class="_autosave" /> <input type="hidden" name="user[id]" value ="4" class="uid"/> <input type="submit" /> </form>
…
$$('input._autosave').each(function(s){ s.observe("change", function(event){ var el = event.element(); var uid = el.next("uid").value; var r = new Ajax.Request(el.up("form").readAttribute("action"),{ parameters: {el.readAttribute("name"): el.value}, }); }); });
Просто разместите периодическое обновление в dom: загруженное событие. Он используется для обеспечения загрузки всех компонентов, лучше, чем использование события window.onload. Просто помните, что между dom: загруженным событием и исходным событием window.onload немного отличается, где dom: загружается, когда все dom загружается, кроме изображений и window.onload, вызываемых при загрузке всех dom, включая файл изображений.
document.observe("dom:loaded", function() { new Ajax.PeriodicalUpdater('save_message', 'autosave.php', { method: 'post', parameters: {id: $('id').value, save_text: $('myInput').value}, frequency: 5, decay: 2 }); });