Saisie de formulaire d'enregistrement automatique à l'aide de Prototype et de PHP

J'implémente un système de sauvegarde automatique relativement simple et j'aimerais le faire en utilisant la bibliothèque Prototype. J'utilise la requête PeriodicalUpdater, mais cela ne fonctionne pas comme je l'espérais. En bref, j'essaye, périodiquement, d'envoyer le contenu d'un textarea via une requête AJAX à une page PHP qui l'enregistrera dans une base de données MySQL. Je fais quelque chose comme (code abrégé):Saisie de formulaire d'enregistrement automatique à l'aide de Prototype et de PHP

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

Alors autosave.php prendra le contenu du formulaire et de les écrire à ma base de données. Cette partie fonctionne bien. Qu'est-ce qui se passe, comme je l'ai découvert, est PeriodicalUpdater est appelé avec l'entrée de formulaire d'origine, puis est appelé périodiquement avec cette entrée de formulaire initial.

Donc, c'était une longue configuration pour une question relativement courte: Comment utiliser Prototype (si possible) pour effectuer périodiquement une requête AJAX en utilisant la valeur de la zone de texte courante?

Source

2009-09-15 Eric

vous pouvez simplement utiliser Ajax.Request avec setInterval, quelque chose comme ceci:

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

Source

2009-09-15 10:52:22 robjmills

Ajax.Request est la bonne, mais pourquoi ne pas le rendre plus réutilisable Si vous avez juste une entrée, ou même si vous aviez beaucoup je vous conseille quelque chose comme:

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

Source

2010-02-10 08:35:33 arbales

Placez simplement votre programme de mise à jour périodique dans l'événement dom: loaded. Il est utilisé pour s'assurer que tous les composants ont été chargés, mieux que l'utilisation de l'événement window.onload. Rappelez-vous juste, qu'il y a un peu différent entre l'événement dom: loaded et l'événement natif window.onload, où dom: loaded appelé quand tout dom est chargé excepté les images et window.onload appelé quand tout dom est chargé y compris le fichier image.

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

Source

2010-08-29 09:54:23 iroel

Saisie de formulaire d'enregistrement automatique à l'aide de Prototype et de PHP

Répondre

Questions connexes