CODEWITHSUNDEEP
phpajaxprototypejs
Eric
Eric

Reputation: 193

Autosaving Form Input Using Prototype and PHP

I'm implementing a relatively simple autosave system and I'd like to do so using the Prototype library. I'm using the PeriodicalUpdater request, but it's not working as I'd hoped. In short, I'm trying to, periodically, send a textarea's content via an AJAX request to a PHP page that will save it to a MySQL database. I'm doing something like (abbreviated code):

<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>

Then autosave.php will take the form contents and write them to my database. That part is working fine. What is happening, as I discovered, is PeriodicalUpdater is called with the original form input, then is called periodically with that initial form input.

So that was a long setup for a relatively short question: How do I use Prototype (if possible) to periodically make an AJAX request using the current textarea's value?

Upvotes: 1

Views: 1970

Answers (3)

iroel
iroel

Reputation: 1798

Just place your periodical updater in dom:loaded event. It is used to ensure that all components have been loaded, better than using window.onload event. Just remember, that there is a little bit different between dom:loaded event and native window.onload event, where dom:loaded called when all dom loaded except images and window.onload called when all dom loaded including images file.

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

Upvotes: 0

arbales
arbales

Reputation: 5536

Ajax.Request is the right move, but why not make it more reusable If you just have one input, or even if you had many I'd advise something like:

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

Upvotes: 0

robjmills
robjmills

Reputation: 18598

you could just use Ajax.Request with setinterval,something like this:

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

Upvotes: 2

Related Questions