Browse Tag

combobox

Liste Kutusu Öğelerini Etkisiz Yapmak

Şu aralar hazırlamakta olduğum bir web sayfasının bir bölümünde üyeleri çeşitli gruplara ayırarak; bu grupların her birine topluca ya da her üyeye ayrı ayrı mesaj gönderebilmek için bir kod yazmak gerekiyordu. Ben de bu kodu yazdıktan sonra bir de bu mesajlar için düzenleme sayfası yaptım. Bu sayfada mesajın kimlere gönderildiği görülecek ve gerekirse başka üyelere de yeniden gönderilebilecek.

Daha iyi anlaşılması için olayı aşağıdaki resimle anlatmaya çalışacağım.

Görüldüğü üzere sol tarafta 5 adet liste kutusu ve bunların içinde de 5 gruptan hangisine uygunsa o kutunun içinde sıralanan üye adları bulunuyor. Ortadaki ekle veye kaldır butonlarından sol taraftan seçilmiş üyeler sağ taraftaki büyük kutuya taşınarak Gönder tuşuna basıldığında ilgili üyelerin e-posta adresleri veritabanından alınarak üyelere posta atılıyor.

Buraya kadar bir sorun yok. Düzenleme sayfasında bu beş kutunun üst taraflarında ilgili mesajın daha önce gönderildiği üyelerin listelenmesi gerekiyor ancak yanlışlıkla aynı üyelere tekrar mesaj gönderilemesin diye de listedeki bu üyeleri etkisiz yani “disable” yapmam gerekiyor.

İlk bakışta çok basit gibi görünüyordu ki aslında gerçekten de çok basitmiş. Yukarıdaki durumu oluşturmak için ben de şöyle bir kod yazdım.

<option value="uye_deger" disabled="disabled">uye_adi</option>

Bu kodun bana istediğim sonucu vermesi lazımken bir türlü olmuyordu. Delirdim resmen… Sonunda bir Google abiye danışayım dedim. Meğerse bu kod Internet Explorer hariç bütün tarayıcılarda çalışıyormuş yalnız IE de sorun yaratıyormuş çünkü Microsoft madem o kutuya o değeri doldurdun o zaman kullanacaksın etkisiz yapamazsın diyormuş. Eee bana lazım oldu ne yapacağım diye düşünürken onun da çaresini buldum. Kod zaten Firefox ve Opera da çalışıyordu. Sadece Explorer için de şu adresten indirdiğim Java Script ile sorunu çözdüm.

Eğer bir gün size de lazım olursa önce benim yukarıda yazdığım şablona benzer şekilde kodunuzu yazın yani liste veya combo kutularının option bölümüne disable değerini ekleyin. Sonra buraya tıklayarak ilgili kodu indirin. En sonunda da sayfanızın başına şu kodu ekleyin.

<script type="text/javascript" src="select-option-disabled-emulation.js"></script>

Burada öneli olan nokta yukarıdaki kodun düzgün çalışması için indirdiğiniz dosyanın adını değiştirmemeniz ve ilgili dosyanın sayfanızla aynı dizin içinde olması gerektiğidir. Eğer bunları değiştirirseniz; kodda da uygun düzenlemeleri yapmayı unutmayın.

Kolay gelsin