Prototype javascript framework’ü için geliştirdiğim radio group eklentisi

2Mar/100

Prototype javascript framework’ü için geliştirdiğim radio group eklentisi

Biliyorsunuz ki Prototype genel yapı itibariyle radio group'ların seçili olan değişkenin değerini getirmiyor.
Bu sorunun çözümü dom nesne bütünlüğüne uygun görülmediği için maalesef gelecek sürümlerde eklenecekler arasında bulunmuyor.

Prototype javascript framework'ünün Form.Element.Serializers sınıfını extend eden aşağıdaki kod sayesinde $F() ve $() fonksiyonlarını radio group'ları içinde sorunsuz şekilde kullanabilirsiniz.

prototype-radio-group.js dosyasının içeriği

Form.Element.Serializers.radioSelector = function(element, value) {
  if (Object.isUndefined(value)){
    checkedRadio = Form.getInputs(element.form,'radio',element.name).find(function(radio) { return radio.checked; })
    return (checkedRadio) ? checkedRadio.value : null;
  } else {
    checkedRadio = Form.getInputs(element.form,'radio',element.name).find(function(radio) { return radio.value == value; });
    checkedRadio.checked = true;
  }
}

Form.Element.Serializers.input = function(element, value) {
  switch (element.type.toLowerCase()) {
    case 'checkbox':
      return Form.Element.Serializers.inputSelector(element, value);
    case 'radio':
      return Form.Element.Serializers.radioSelector(element, value);
    default:
      return Form.Element.Serializers.textarea(element, value);
  }
};

Bu eklentiyi kullanırken dikkat etmeniz gerekenler:

Bu javascript dosyasının web sayfasına head bölümünde prototype.js'den hemen sonra yüklenmesi gerekiyor.
Kullanacağınız radio group'ta sadece bir input için id tanımlamanız gerekiyor. $F() ve $() fonksiyonlarını kullanırken bu id ile işlem yapmalısınız
Prototype.js dosyasının 1.6.1 sürümü ile test edilmiş ve sorunsuz olarak çalıştığı görülmüştür. İleriki sürümlerinde Form.Element.Serializers sınıfında değişiklik yapılmadığı sürece sorunsuz olarak çalışmaya devam edecektir.

Aşağıda bir web sayfası içerisindeki örnek kullanımını görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/prototype-radio-group.js"></script>
</head>
<body>
<form>
  <input type="radio" id="rg_test" name="test" value="1" />1<br />
  <input type="radio" name="test" value="2" checked="checked" />2<br />
  <input type="radio" name="test" value="3" />3<br />
</form>
<script type="text/javascript">
  alert($F('rg_test')); // Seçili olan radio değerini, yani 2'yi verecektir.
  $('rg_test').setValue('3'); // Radio grubunda seçili olan değer 3 olur.
  alert($F('rg_test')); // Yeni radio group değeri olan 3'ü verecektir.
</script>
</body>
</html>