Prototip ve PHP Kullanımı Form Input Otomatik kaydetmeyi

3 Cevap php

Ben nispeten basit kaydetme sisteminin uygulanması ve ben Prototip kitaplığı kullanarak bunu yapmak istiyorum. Ben PeriodicalUpdater isteği kullanıyorum, ama ben ümit ediyorum gibi çalışmıyor. Kısacası, ben, periyodik olarak, bir MySQL veritabanına kaydetmek bir PHP sayfası için bir AJAX isteği üzerinden bir textarea içeriğini göndermeye çalışıyorum. Ben (kısaltılmış kod) gibi bir şey yapıyorum:

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

Sonra autosave.php form içeriğini almak ve benim veritabanına bunları yazacaktır. O kısmı gayet iyi çalışıyor. Ne oluyor, ben keşfettiği gibi, PeriodicalUpdater o ilk form girişi ile periyodik olarak adlandırılan, özgün form girişi ile denilmektedir.

Böylece nispeten kısa bir soru için uzun bir tuzaktı: Nasıl periyodik geçerli TextArea değerini kullanarak bir AJAX isteği yapmak için Prototype (eğer mümkünse) kullanıyorsunuz?

3 Cevap

Eğer sadece bu gibi setInterval, bir şey ile Ajax.Request kullanabilirsiniz:

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

Yüklenen olay: Sadece dom daki periyodik güncelleştiricisini yerleştirin. Tüm bileşenler window.onload olayı kullanarak daha iyi, yüklenmiş olmasını sağlamak için kullanılır. Yüklenen bir olay ve yerli window.onload olay, dom: tüm dom dom tüm görüntüler dosyaya dahil yüklendiğinde çağrılan görüntüleri ve window.onload dışında yüklendiğinde çağrılan loaded sadece dom arasında farklı biraz olduğunu, unutmayın.

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

etiketler