jQuery filter [^=] dan lawannya

Pada suatu kasus tertentu, kita ingin membuat fitur pencarian dari beberapa <div> dengan menggunakan filterisasi. Contoh tag kasus :

<div class="majalah"></div>
<div class="koran"></div>
<div class="marsitoh"></div>

Di atas, saya menyediakan 3 <div> tag yang dari setiap div memiliki class. Contoh, kita akan menyeleksi <div> yang memiliki class dengan berawalan 'ma', maka kurang lebih kita bisa menggunakan jQuery seperti berikut :

$('div[class^="ma"]')

Namun, bagaimana jika kita ingin menyeleksi <div> tag yang memiliki class selain berawalan 'ma' ? ('koran' misalnya).
Cukup sederhana! jQuery telah mengantisipasi ini dengan menyediakan fungsi selektor :not() . Yap, anda cukup mengubahnya sehingga menjadi :

$('div:not([class^="ma"])')

Mudah bukan? Sekarang anda bisa bereksperimen sendiri dengan trik ini. Sebagai contoh, ketika tag html diatas tadi akan anda hilangkan berdasarkan apa yang User ketik dalam sebuah teks inputan. Lihat kode dibawah :

<input type="text" name="q" />

Maka tinggal anda atur seleksi eventnya! Contoh :

$(function(){
    $('input[name="q"]').keyup(function(){
        var q = $(this);
        $('div:not([class^="' + q.val() + '"])').remove();
    });
});

Semoga bermanfaat! :)

Read More

jQuery .attr() tidak berfungsi pada plugin jQuery dialog

Pernahkah anda meng-costumize jQuery.dialog plugin ? Tag default HTML nya kurang lebih seperti berikut :

<div id="user-detail" title="Ini form User Detail"></div>

Tag seperti HTML diatas itu akan menghasilkan nilai konstan pada bagian title. Perhatikan gambar dibawah ini.(ilustrasi1.1)

Ilustrasi 1.1

Pada suatu kasus, saya ingin membuat sebuah fungsi javascript(ilustrasi 1.2) dimana pada fungsi ini nantinya akan dilakukan pemanggilan terhadap selektor jQuery.dialog namun kali ini bagian title akan kita setting secara dinamis. Bagaimana caranya?

function user_detail(selector, id, title){
    var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);

    $(selector).attr('title', title)
                     .dialog('close')
                     .html(output)
                     .dialog('open');
}

 Ilustrasi 1.2

jQuery sendiri sudah melengkapi library nya supaya kita bisa dengan mudah mengubah value dari suatu attribut tertentu. Yap! dengan menggunakan .attr() (lihat ilustrasi 1.2) . Namun jangan harap fungsi ini akan bekerja pada selektor untuk jQuery Dialog yang script HTML sudah saya berikan diatas tadi.

Lalu bagaimana caranya?
Cukup simple!
Anda cukup mengubah tag yang dibuat oleh jQuery.dialog dan me-replace nya dengan variable yang anda kirim ke fungsi dengan menggunakan .text(). Maka kurang lebih gantilah script fungsi yang sudah dibuat tadi seperti ilustrasi 1.3.

function user_detail(selector, id, title){
    var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
    $("span.ui-dialog-title").text(title); 

 
    $(selector).dialog('close')
                     .html(output)
                     .dialog('open');
} 

Ilustrasi 1.3
 

Selamat mencoba! semoga bermanfaat :)

(You can translate this article to English! Check out on sidebar bottom.)

Read More

Menampilkan hanya hari libur pada plugin jQuery Datepicker

jQuery Datepicker Plugin

Hey sobat programming! Jika anda sedang membuat web aplikasi yang pada satu fitur akan anda tampilkan jQuery datepicker namun hanya menampilkan hari libur saja(dalam hal ini hari sabtu dan minggu), disini akan saya berikan jawabannya.

Cobalah untuk memodifikasi script jQuery anda seperti dibawah ini:

$(function()
   {
   $('tag_selektor_anda').datepicker({ beforeShowDay:
     function(dt)
     {
        return [dt.getDay() == 0 || dt.getDay() == 6, ""];
     }
   });
 });

It's so easy right? Selamat mencoba! :)

(You can translate this article to English! Check out on sidebar bottom.)

Read More