Автосохранение ввода формы с использованием прототипа и PHP - PullRequest
Новая
       11

Автосохранение ввода формы с использованием прототипа и PHP

1 голос
/ 15 сентября 2009

Я внедряю относительно простую систему автосохранения, и я хотел бы сделать это, используя библиотеку 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-запроса с использованием текущего значения текстовой области?

Ответы [ 3 ]

2 голосов
/ 15 сентября 2009

вы можете просто использовать 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},
    });
}
0 голосов
/ 29 августа 2010

Просто поместите ваш периодический апдейт в событие Дом: загружено. Он используется для гарантии того, что все компоненты были загружены, лучше, чем использование события window.onload. Просто помните, что между событием dom :loaded и родным событием window.onload есть некоторые различия, где dom :loaded вызывается, когда загружается все dom, кроме images и 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
     });
});
0 голосов
/ 10 февраля 2010

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},       
    });
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...