Sayfalarınızda olmazsa olmazı haline gelen javascript APIsi jquery ile bir çok işlemi kolay ve işlevsel bir şekilde gerçekleştiriyoruz. Bunun yanında jquery ile birlikte gelmeyen ama yine çok işimize yarayabilecek bir eklenti olan Jeditable kullanımından ile ilgili kullanımı bu yazıda bulabilirsiniz. Bu eklenti sayesinde yerinde düzenleme yani yazımızın üzerine tıklayarak yazımızı input içerisinde yada farklı seçenekler de değiştirme ve kaydetme imkanı sağlıyor. Bu yazıda en sık kullanılan input içerisinde düzenleme ile ilgili basit bir örnek bulacaksınız.
Jeditable kullanabilmemiz için öncelikle http://www.appelsiini.net/download/jquery.jeditable.js adresinden eklentiyi indiriyoruz.
<script src=”jquery.min.js”></script>
<script src=”jquery.jeditable.mini.js”></script>
şeklinde jquery ve jeditable kütüphanelerini sayfamıza dahil ettinden sonra kullanmaya geçebiliriz. En basit haliyle kullanımı için sayfamıza ekleyeceğimiz javascript kodları
$(document).ready(function() { $(‘.duzenlenebilir’).editable(‘kaydet.php’); });
Görüldüğü gibi eklentinin sadece tek bir zorunlu parametresi var oda içeriği post edileceği url.
Bunun yanında aşağıdaki kod örneğinde olduğu gibi kullanabileceğimiz zorunlu olmayan parametrelerde mevcut.
$(document).ready(function() { $(".duzenlenebilir").editable("kaydet.php", { indicator : "Kayıt işlemi yapılıyor...", type : 'text', onblur : 'submit', submit : 'Kaydet', cancel : 'İptal', });
Diğer parametre ve farklı kullanımlar için eklentinin sayfasını
http://www.appelsiini.net/projects/jeditable ziyaret edebilirsiniz.
Evet yukarıdaki koddan da anlaşılabileceği gibi sayfamızın içerisinde duzenlenebilir class’ına sahip nesneleri değiştirerek kaydet.php dosyasına POST değeri olarak gönderebiliyoruz.
Örneğin : <b class=”duzenlenebilir”>Beni Değiştir</b> gibi.
Bu tabi ki nesnelerin idsi ilede yapılabilir. $(‘#duzenlenebilir’).editable(‘kaydet.php’); şeklinde.
Bu şekilde oluşturulmuş bir sayfa örneğimiz :
<html> <head> <script src="jquery.min.js"></script> <script src="jquery.jeditable.mini.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $(".duzenlenebilir").editable("kaydet.php", { indicator : "İşleminiz Yapılıyor...", type : 'text', onblur : 'submit', submit : 'Kaydet', cancel : 'İptal', }); }); </script> </head> <body> Örnek metnimiz içerisinde değiştireceğimiz bir alan: <b id="duzenlenebilir" id="duzenlenebilir" class="duzenlenebilir"> Beni Düzenle! </b> ... </body> </html>
kaydet.php dosyasını yapmak istediğiniz işleme göre düzenleyebilirsiniz. Bu dosyada gelen değerleri $id = $_POST["id"]; $deger = $_POST["value"]; şeklinde alabilirsiniz. Sonradan sayfaya eklenen nesneler sorunu :jQuery ile sayfaya sonradan eklenen nesnelerde [ live() özelliği kullanılmış olsa bile ] Jeditable bu şekilde çalışmayacaktır, bunu düzeltmek için :
$('.duzenlenebilir').editable('kaydet.php');
kullanımı yerine ;
$('.secenek_duzenle').live('click',function(event) { event.preventDefault(); $(this).editable('kaydet.php'); });
25 kez okundu
Etiketler: Jeditable, jquery, live sorunu, yerinde düzenleme