jQuery Flexigrid AJAX Asynchronous Search

Flexigrid is one cool lightweight jquery plugin to create javascript ajax dynamic table. It’s official site define flexigrid as Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Moreover, we can use flexigrid to show search results asynchronously (without reloading page) based on user’s keywords.

Javascript code

$("form[name='filter']").submit(function(){ //invoke function when user click search button
	var start_date = this.start_date.value; //start_date input by user

	$("#grid").flexOptions({
		params: [
			{ name: 'start_date', value: start_date }
		]
	});
	$("#grid").flexReload();

	return false; //prevent form to reload page
});

Server side (PHP) code. PHP can read start_date variable sent by flexigrid using

$_POST["start_date"];

And voila!

Easy jQuery Text Slider using easyslider

We can make cool javascript text slider easily using jQuery easyslider plugin. By example, jQuery easyslider works for image slider, but we can customize it to create text slider like this one…

This is the html structure for text slider

<div id="s-prev"> <!-- previous button -->
	<a href="#fp-blog" id="s-prev-link"><img src="public/image/frontpage/prev.jpg" alt="" /></a>
</div>
<div id="slider">
	<ul>
		<li>
			<div class="s-item">
				<div class="s-title">
					Latest Blog Entries
				</div>
				<div class="s-content">
					<b>Title 1 .</b> Lorem ipsum dolor sit amet... <a href="#">read more</a>
				</div>
			</div>
		</li>
		<li>
			<div class="s-item">
				<div class="s-title">
					Latest Blog Entries
				</div>
				<div class="s-content">
					<b>Title 1 .</b> Lorem ipsum dolor sit amet... <a href="#">read more</a>
				</div>
			</div>
		</li>
		<li>
			<div class="s-item">
				<div class="s-title">
					Latest Blog Entries
				</div>
				<div class="s-content">
					<b>Title 1 .</b> Lorem ipsum dolor sit amet... <a href="#">read more</a>
				</div>
			</div>
		</li>
	</ul>
</div>
<div id="s-next"> <!-- next button -->
	<a href="#fp-blog" id="s-next-link"><img src="public/image/frontpage/next.jpg" alt="" /></a>
</div>

And this is the javascript code for easyslider

$('#slider').easySlider({
	auto : true,
	continuous : true,
	prevId : 's-prev-link',
	nextId  : 's-next-link',
	controlsShow : false, //hide default previous and next control, replace with custom control
});

Unfortunately, click both previous and next button do not make easyslider display previous or next slide immediately. My easyslider version is 1.7, and after a couple of searches, I found suspicious code on easySlider1.7.js line 108

$("a","#"+options.nextId).click(function(){
	animate("next",true);
});
$("a","#"+options.prevId).click(function(){
	animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
	animate("first",true);
});
$("a","#"+options.lastId).click(function(){
	animate("last",true);
});

I modified it into

$("a#"+options.nextId).click(function(){
	animate("next",true);
});
$("a#"+options.prevId).click(function(){
	animate("prev",true);
});
$("a#"+options.firstId).click(function(){
	animate("first",true);
});
$("a#"+options.lastId).click(function(){
	animate("last",true);
});

And gladly previous and next button work find afterwards. Have questions? Fell free to ask 🙂

jQuery Sliding Gallery

Buat yang belum tau, gw mahasiswa tingkat 4 Teknik Informatika ITB, dan saat ini sedang sangat tertarik dengan Web development. Di post kali ini gw mu coba share pengalaman gw pake plugin sliding gallery untuk framework javascript favorit gw, jQuery. Plugin ini gw pake waktu mau buat efek sliding gallery alias carousel di salah satu web kerjaan gw, http://www.licht-soft.com. Sebelum jatuh hati di plugin ini, gw sempat mencoba-coba plugin yang lain, jcarousellite, tapi plugin sliding gallery punya kelebihan di lengkapnya event yang disediakan, ‘n efeknya sesuai dengan yang dimau designer gw (gambar tengah bisa dizoom). Masalah efek yang tidak sesuai seringkali berbuntut panjang kalau kita pakai plugin, soalnya kadang harus ngoprek source code nya sampai dalam, dan hal ini sebisa mungkin dihindari.

Di samping semua kelebihannya, ada hal yang cukup annoying, yaitu halaman yang ga bisa discroll. Setelah ngecek pakai firebug, ternyata ada bagian javascript di sliding gallery yang dengan seenaknya menambahkan style overflow:hidden di bagian body. Bagian tersebut bisa dihapus di line 107 script sliding gallery yang isinya:

$(‘body’).css(‘overflow’, ‘hidden’);

Buat yang mau mencoba sliding gallery, bisa dilihat di http://www.meadmiracle.com/SlidingGallery.aspx, semoga berhasil 🙂