JQuery : Fade Out

     setTimeout(function() {
          $('#final_msg').fadeOut();
     }, 10000)

JQuery : Autocomplete Force Input

case : you use jquery autocomplete to replace an old style drop down menu and you want to force user to choose at least one of these input option.
solution : use a "mustMatch";

        $().ready(function() {
            $("#kategori").autocomplete("../actions/autocomplete.php?p=kategori", {
                width: 190,
                max: 2000,
                selectFirst: false,
                mustMatch:true,
            });
        });

JQuery : Star Rating

JQuery : Tooltip and Image Preview

Case : You want to create cool tooltip or image preview from your thumbnail
Solution : JQuery
Script :

this.imagePreview = function(){
/* CONFIG */

 xOffset = 10;
 yOffset = 30;

 // these 2 variable determine popup's distance from the cursor
 // you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
 this.t = this.title;
 this.title = "";
 var c = (this.t != "") ? "
" + this.t : "";
 $("body").append("
"+ c +"
");        
 $("#preview")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast");     
   },
function(){
 this.title = this.t;
 $("#preview").remove();
   });
$("a.preview").mousemove(function(e){
 $("#preview")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
});  
};

// starting the script on page load
$(document).ready(function(){
imagePreview();
});

Source : http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

JQuery : Autocomplete extraParams

Case : You want to create an autocomplete that depends on another fields
Solution : Using JQuery Autocomplete with extraParams
Script :

$("#ProvinsiCalonSuami").autocomplete("actions/autocomplete.php?p=provinsi", {
max: 100,
width: 260,
selectFirst: true,
});

$("#KabupatenCalonSuami").autocomplete("actions/autocomplete.php?p=kabupaten", {
max: 100,
width: 260,
selectFirst: true,
extraParams: {
provinsi: function(){
return $('#ProvinsiCalonSuami').val();
}
}
});

$("#KecamatanCalonSuami").autocomplete("actions/autocomplete.php?p=kecamatan", {
max: 100,
width: 260,
selectFirst: true,
extraParams: {
kabupaten: function(){
return $('#KabupatenCalonSuami').val();
}
}
});

$("#KelurahanCalonSuami").autocomplete("actions/autocomplete.php?p=kelurahan", {
max: 100,
width: 260,
selectFirst: true,
extraParams: {
kecamatan: function(){
return $('#KecamatanCalonSuami').val();
}
}
});

Source : http://docs.jquery.com/Plugins/autocomplete

JQuery : Autocomplete not working more than 10 rows

Case : You are using JQuery autocomplete, but the data cannot display more than 10 rows
Solution : using option "Max"
Script :

$().ready(function() {
$("#targetDiv1").autocomplete("actions/autocomplete.php?p=provinsi", {
 max: 100,
 width: 260,
 selectFirst: false,
});

$("#targetDiv2").autocomplete("actions/autocomplete.php?p=kabkota", {
 max: 100,
 width: 260,
 selectFirst: false,
});

$("#targetDiv3").autocomplete("actions/autocomplete.php?p=kecamatan", {
 max: 100,
 width: 260,
 selectFirst: false,
});
});

JQuery : Reload whole page

Case : You want to reload whole page after add/edit/delete data
Solution : JQuery
Script :

function update(id,tanggal,keterangan,pengeluaran) {
 //alert(id + ' ' + tanggal + ' ' + keterangan + ' ' + pengeluaran);
 var keterangan = keterangan;
 if (confirm('Yakin mau diedit ???')) {
  $.post('actions/pengeluaran_edit.php', {id_pengeluaran: +id, tanggal: tanggal+'', keterangan: keterangan, pengeluaran: +pengeluaran, ajax: 'true' },
  function(){
   location.reload();
  });
 }
}

Source : http://www.jquery.com/

JQuery : Delete row without reload whole page

Case : You want to delete row of data without reload whole page
Solution : Use JQuery
Script :

function hapus(id){
if (confirm('Yakin mau dihapus ???')) {
 $.post('actions/hapus_pengeluaran.php', {id: +id, ajax: 'true' },
 function(){
  $("#row_"+id).fadeOut("slow");
  $('#total_pengeluaran').load('index.php?p=pengeluaran_list #total_pengeluaran');
  $('#total_saldo').load('index.php?p=pengeluaran_list #total_saldo');
  $('#total_pendapatan').load('index.php?p=pengeluaran_list #total_pendapatan');
 });
}
}

Source : http://jquery.com/

JQuery : Delete row and fade out the row affected

Case : You want to delete row without refreshing whole page
Solution : Use JQuery

function hapus(id){
 if (confirm('Yakin mau dihapus ???')) {
  $.post('actions/hapus_pengeluaran.php', {id: +id, ajax: 'true' },
  function(){
   $("#row_"+id).fadeOut("slow");
  });
 }
}

Source : http://www.bitsntuts.com/css/simple-jquery-delete-table

JQuery : Autocomplete hidden input, Autocomplete multiple field

JQuery : Autocomplete not working with Date picker

Solution : load datepicker before autocomplete.

PHP MySQL JQuery - Autocomplete

http://www.uri.edu/blog/2009/06/08/auto-complete-with-jquery-php-and-mysql/

Pandawa Digital

http://pandawa-digital.co.id/

Credits :
1. http://www.extjs.com
2. http://www.defafe.com
3. extjs forum, extjs blog, etc.

Thank you