It's takes just few lines of Javascript / jQuery code to implement quick filter for an HTML table, here you go:

The HTML

 
<label for="kwd_search">Search:</label>
<input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Name</th>
<th>Sports</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin Tendulkar</td>
<td>Cricket</td>
<td>India</td>
</tr>
<tr>
<td>Tiger Woods</td>
<td>Golf</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Sharapova</td>
<td>Tennis</td>
<td>Russia</td>
</tr>
</tbody>
</table>
 

The Javascript

 
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
	// Write on keyup event of keyword input element
	$("#kwd_search").keyup(function(){
		// When value of the input is not blank
		if( $(this).val() != "")
		{
			// Show only matching TR, hide rest of them
			$("#my-table tbody>tr").hide();
			$("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
		}
		else
		{
			// When there is no input or clean again, show everything back
			$("#my-table tbody>tr").show();
		}
	});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
    "contains-ci": function(elem, i, match, array)
	{
		return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});
 

That's all it takes to put a quick filter using jQuery, see a live working demo here.Similar Posts:

• jQuery case-insensitive Contains Expression..!
• jQuery Fancy Custom Radio-button and Checkbox
• jQuery tablesorter plugin – a friend in need…
• Hacking jQuery Thickbox..!
• Printing data table vertically..! Why? and How?

Recently I have to give an example to one of my friend on how raw AJAX works and here I am sharing that sample with my blog readers as a reference.

Raw AJAX Example:

The Problem Statement: We want to SUM 2 values and we want to achieve that using server-side scripting as we don't want to do that using JavaScript due to some ABC reason.

The HTML:

Raw AJAX Example Demo
 
Val 1: 
<input id="val1" name="val1" type="text" />
 + 
Val 2: 
<input id="val2" name="val2" type="text" />
<input onclick="doSum()" type="button" value="=" />
<input id="sum" name="sum" type="text" />

The Javascript:

function doSum()
{
	var url = "simple_ajax_server.php";
	var data = "val1=" + document.getElementById("val1").value + "&val2=" + document.getElementById("val2").value;
	var method = 'POST';
	var async = true;
	var xmlHttpRequst = false;
 
	// Mozilla/Safari/Non-IE
    if (window.XMLHttpRequest)
	{
        xmlHttpRequst = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject)
	{
        xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
	// If AJAX supported
	if(xmlHttpRequst != false)
	{
		// Open Http Request connection
		xmlHttpRequst.open(method, url, async);
		// Set request header (optional if GET method is used)
		xmlHttpRequst.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		// Callback when ReadyState is changed.
		xmlHttpRequst.onreadystatechange = function()
		{
			if (xmlHttpRequst.readyState == 4)
			{
				document.getElementById("sum").value = xmlHttpRequst.responseText;
			}
		}
		xmlHttpRequst.send(data);
	}
	else
	{
		alert("Please use browser with Ajax support.!");
	}
}

# How does it work?
As you can see in above JavaScript example code that, first we need to initialize XMLHttpRequest object. For IE and non-IE there is a different way to initialize that object. IE being Microsoft product supports XMLHTTPRequest object creation using ActiveX while rest of the browser does it the common way.
If you're successful creating the HTTP-Request object then you open the connection to URL/URI with which you want to interact to perform desired operation; with method either POST or GET. 3rd optional parameter to open method indicates whether you want to make async request or sync request.
# What is sync / async?
Due to the behavior of JavaScript when you perform any operation in JavaScript statements start executing in parallel. So if you go the async way your next line of code will start getting executed irrespective of whether request is completed or not?
# When to use sync? When you have to perform some operation which is dependent on the result of AJAX request and you can't define them in request-handler function (one which is defined as onreadystatechange) than you must use sync request.
# When to use async? When you're loading some static content which is for information purpose and there is no dependent operation to be performed on the data being received from the AJAX request at that time you have to use async.
If you omit that argument it defaults to true meaning an asynchronous request to the server.

# What is readyState?
Here is the list of possible values and meaning of each value of XMLHttpObject's property readyState, for more reference refer w3.org docs.

Raw AJAX Example Demo

The PHP/Server-side:

$val1 = (int)$_POST['val1'];
$val2 = (int)$_POST['val2'];
 
echo $val1 + $val2;

If you can see in open method we are making a post request on simple_ajax_server.php file. In that file we have simply written above content.

See this example live in action.

Generalizing JavaScript: plain_ajax.js

// Common function to initialize XML Http Request object
function getHttpRequestObject()
{
	// Define and initialize as false
	var xmlHttpRequst = false;
 
	// Mozilla/Safari/Non-IE
    if (window.XMLHttpRequest)
	{
        xmlHttpRequst = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject)
	{
        xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
    }
	return xmlHttpRequst;
}
 
// Does the AJAX call to URL specific with rest of the parameters
function doAjax(url, method, async, responseHandler, data)
{
	// Set the variables
	url = url || "";
	method = method || "GET";
	async = async || true;
	data = data || null;
 
	if(url == "")
	{
		alert("URL can not be null/blank");
		return false;
	}
	var xmlHttpRequst = getHttpRequestObject();
 
	// If AJAX supported
	if(xmlHttpRequst != false)
	{
		// Open Http Request connection
		if(method == "GET")
		{
			url = url + "?" + data;
			data = null;
		}
		xmlHttpRequst.open(method, url, async);
		// Set request header (optional if GET method is used)
		if(method == "POST")
		{
			xmlHttpRequst.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		}
		// Assign (or define) response-handler/callback when ReadyState is changed.
		xmlHttpRequst.onreadystatechange = responseHandler;
		// Send data
		xmlHttpRequst.send(data);
	}
	else
	{
		alert("Please use browser with Ajax support.!");
	}
}

# Same JavaScript can be generalized and written in following way: (embed in html)

# How to use?: (include plain_ajax.js first and then embed following code;)

var displaySum = function()
{
	if (this.readyState == 4)
	{
		document.getElementById("sum").value = this.responseText;
	}
}
 
function doSum()
{
	var url = "simple_ajax_server.php";
	var data = "val1=" + document.getElementById("val1").value + "&val2=" + document.getElementById("val2").value;
	var method = 'GET';
	var async = true;
	doAjax(url, method, async, displaySum, data);
}

Example can be downloaded here or find it in my gist repository.

 Similar Posts:

• Hacking jQuery Thickbox..!
• Calculate Date/Time difference – Simple Javascript code snippet
• Truncate last N lines of a file using PHP
• Posting or Uploading Files using cURL with PHP
• PHP – Downloading a File from Secure website (https) using CURL

I have gone through some of other implementation before writing this but here this version is complete copy of jQuery library's "contains" filter except it is case-insensitive.

In below code when it's using $(elem).text() it's calling Sizzle.getText internally which is Utility function for retreiving the text value of an array of DOM nodes.

$.extend($.expr[":"],
{
    "contains-ci": function(elem, i, match, array)
	{
		return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});

Here are some other nice jQuery Selectors and Expressions:

• JQuery Plugin: Extra selectors for JQuery
• jQuery Custom [:] Expressions

I thought let me use gist to host this tiny piece of code, may be just to make it easy to share and live as long as possible..!
Similar Posts:

• Implementing Quick Table Search using jQuery filter
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• Printing data table vertically..! Why? and How?
• jQuery Fancy Custom Radio-button and Checkbox
• WordPress Auto-Login for Friend/Ally Websites

Google Calendar

If you're looking for Google-like Calendar for your next web-application than, here is list of jQuery/ non-jQuery but Javascript based Calendar Schedulers which you can use in your web-application to provide scheduling and/or event calendars.

1) jQuery FullCalendar: FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.

Just recently FullCalendar 1.5.1 is released which is bundled with jQuery 1.5.2. It has all 3 Day, Week and Month view. You can see it's preview in screen-capture below:

jQuery FullCalendar

2) jQuery Frontier Calendar: Is a full month calendar plugin that looks like Google Calendar. Supports Drag and Drop, tooltips, iCal Event import, Customizable style via css file, resizable and well documented.

jQuery Frontier Calendar

3) jQuery jMonthCalendar: jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

Negative point again here is it comes with only Month view and since last 20 months project is silent.

Download: http://code.google.com/p/jmonthcalendar/downloads/list

jQuery plugin repository: http://plugins.jquery.com/project/jMonthCalendar

Demo: Interactive demo not available.

4) jQuery Week Calendar: Excellent plugin if you're looking for just Week view, Work Day view and Day view. Good documentation and demonstration.

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar. If you require a monthly calendar view, I highly recommend checking out the FullCalendar plugin by Adam Shaw.

• Display of calendar events within a weekly grid
• Calendar events can be supplied as an array, url or function returning json
• Calendar events can be dragged, dropped and resized
• Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc
• Automatically scrolls to current time
• Extend the core calendar event data structure with your own data
• Highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.

jQuery week calendar

5) jQuery wdCalendar: It's a jQuery plugin supporting both Day, Week and Month view. Not well documented or decent api for extending but decent tool if you want to just get it plug-in to your application. But be sure that if you want to make some modification you gotta understand the code and hack into that without much helpful documentation. If you have to many overlapping events it will not arrange them all properly so one has to tweak the code as per the need because it's not being maintained well so far.

jQuery wdCalendar

6) dhtmlxScheduler: Unlike rest of above plugins it's not jQuery based and another point is it's not free for commercial projects so unless you want to use it for your open-source project you gotta buy license for this.

Well documented and API. Comes with Day, Week, Month, Year and Agenda view. There is multiple resource view as well. By far the best one which highly customizable but licensing (paid) is required if you want to commercialize it.

dhtmlxScheduler is a web-based JavaScript events calendar that provides a rich and intuitive scheduling solution similar to Microsoft Outlook Calendar, Apple's iCal, or Google Calendar. The events can be displayed in Day, Week, Month, Year, or Agenda views. Advanced drag-and-drop functionality allows users to change date and time of an event by easily moving or resizing event boxes. Very lightweight (about 20Kb gzipped) and fast-performing, the calendar uses Ajax to smoothly update and display the events schedule.

dhtmlxScheduler - Ajax Events Calendar/Scheduler

Other than this list if you can try Create astonishing iCal-like calendars with jQuery tutorial to do it yourself and if you can write Java you can always pick up the best of all Google's gwt-cal.Similar Posts:

• jQuery Fancy Custom Radio-button and Checkbox
• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• jQuery Magnet Multi-Select List – DG Magnet Combo
• Radio-button with Checkbox behavior

jQuery mobile framework

jQuery 1.5.2 is released (on April 2nd) as a bug-fix release of jQuery version 1.5.x, fixing about 18+ issues/bugs reported. Along with that couple of days back on 31st March 2011 jQuery Mobile's alpha-4 version has been released.

jQuery mobile project is making good and steady progress though from their road-map published earlier I was expecting production ready release of jQuery mobile in Jan 2011. As I have invested into jQuery mobile as a technology and tool for one of my project and it's obvious that I can not release that when framework itself is not mature for production.

I am highly impressed with jQuery mobile framework project and I have chosen jQuery mobile over Sencha Touch after researching over it for sometime. One of the reason behind choosing jQuery mobile was number of devices they support. Look at the device support grid here.

I will be writing more on ExtJS Mobile (Sencha Touch) vs jQuery mobile in coming weeks, hopefully which will make developers take a smart decision depending upon the features they are looking for.

I would appreciate if you can share your experiences on above topic if you are about to take or have already taken decision in favor of one of them.

Similar Posts:

• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• jQuery 1.2.5 released
• When PHP Frameworks are going to stop PHP 4 support?
• jQuery 1.3.2 is out
• Symfony 1.1 RC1 Released

jQuery dg-magnet-combo (no CTL+Click Select)

Basically I wanted to write this plugin since long long time but could not get a while to hold and push my thoughts as a code to form this plugin. As the name suggests (which seems kind of difficult to understand the real purpose of this plugin) it does not deselect existing option when one selects another option in multi-selection list/combo-box.  How does this sound? Yes, w/o having your control key pressed. Basically I have been found of changing the default behavior of the html controls and with this new jQuery Magnet Multi-select List plugin, I will continue this trend. If you have already understood the meaning and purpose of this plugin you can move to plugin-usage without reading more boarding story about the plugin.

One would say that it's very easy you just have to hold the CTL key while selecting another option in combo-box but it's going to be very irritating when you have hundreds of options in your list and you have to select multiple out of them one of them is on top and the other one at the end of list, which makes it keeping that CTL key difficult and if one misses out CTL hold for a while and clicks he's gone. He has to start from all over again. To get rid of this problem many web-developers implement their lists/combo-box in ways where one has to click > select and move options from left-to-right and those on the right-side are the ones which are being selected by users. But this plugin will make your life as a developer and users life much easier by not dropping down the selected option each time they select another. Basically this will help many users who are less-friendly with computers and web in general and this plugin development with jQuery came in mind just out of need for such a plugin who can do so and as per my knowledge so far we don't have such plugin available for any javascript library.

Learning from the past experiences, this plugin will support accessibility from the beginning. Yes, there is a keyboard support too.

To use DG Magnet Combo plugin just add following code in your javascript:

$(document).ready(function(){
	$("#my_list").dgMagnetCombo();
});

See live demo here or goto github repository to download or fork.

Update: Plugin updated to 1.1 with following changes:

- Used inbuilt javascript/jQuery functions instead of self-made.
- Made it work with CTL key pressed. So now it works normal when someone uses it with CTL key pressed and then takes back (in hybrid mode)

Todo: Need to verify and test SHIFT key compatibility to make it work in natural mode when used with SHIFT key.

Bugs: Please let me know if you encounter any problem/bug while using this plugin. Either post comment on this blog or create an issue on github repository.

PS: I should have done a Google search properly before writing this one, I saw Anup Gupta has made his efforts in this direction and this plugin has some inspiration from his code for v1.1. But additionally this plugin has CTL key support which I could not see available somewhere else.Similar Posts:

• jQuery tablesorter plugin – a friend in need…
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• Radio-button with Checkbox behavior
• jQuery UI – 1.7.1 is released..
• jQuery 1.2.5 released

Fancy Radio/ Checkbox

I have written a jQuery Plugin for Fancy Custom Checkbox and Radio-buttons. To make form elements visually more expressive. I required this for one of my project and later on I have rewritten it completely to make it more generic and easier for jQuery Lovers. I am great fan of jQuery and I am inspired by http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ to write this plugin.

It's fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.

Javascript You need:

$(document).ready(function(){
	$(".radio").dgStyle();
	$(".checkbox").dgStyle();
});

CSS You need:

.radio {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("radio.png");
	background-repeat:no-repeat;
	cursor: default;
}
.checkbox {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("checkbox.gif") no-repeat;
	cursor: default;
	text-align:left;
}
.checkbox input,.radio input {
	display: none;
}
.checkbox input.show,.radio input.show {
	display: inline;
}
.selected {
	background-position: 0 -52px;
}
.block {
	width: 50%;
	float: left;
}
label {
	padding-left:10px;
	float:left;
	text-align:left;
}
 

Here, CSS class which we need to give is not fixed and it can be changed in CSS code and Javascript as well. So in above example it is "radio" and "checkbox", which could be anything you want. The only thing which needs to be taken care of is it has to be consistent in all CSS, Javascript and HTML we generate.

See live demo in action or just download a zip file consisting sample image, js and html code to play with.

Please comment your experience or any enhancement/feature you add to it or wish to have or any bug encountered while using it.

Love to hear back from You..! Similar Posts:

• Radio-button with Checkbox behavior
• Implementing Quick Table Search using jQuery filter
• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery tablesorter plugin – a friend in need…
• Hacking jQuery Thickbox..!

Dirty because I would have to say because I would have made it little more generalized by provide options and formats which convert string to date automatically..!

Anyway for that matter I would rather suggest using php.js which is interesting and helpful library which let's us use lot of PHP functions in Javascript.. It includes hundreds of useful and handy functions which we are used to while we develop PHP Applications.

This simple functions takes only 2 arguments as Javascript Date objects and in return provides an object with days, hours, minutes and seconds as the property in difference between these 2 date provided as parameter to function.

Here is the code for simple Date-time difference calculation:

// Simple function to calculate time difference between 2 Javascript date objects
function get_time_difference(earlierDate,laterDate)
{
       var nTotalDiff = laterDate.getTime() - earlierDate.getTime();
       var oDiff = new Object();
 
       oDiff.days = Math.floor(nTotalDiff/1000/60/60/24);
       nTotalDiff -= oDiff.days*1000*60*60*24;
 
       oDiff.hours = Math.floor(nTotalDiff/1000/60/60);
       nTotalDiff -= oDiff.hours*1000*60*60;
 
       oDiff.minutes = Math.floor(nTotalDiff/1000/60);
       nTotalDiff -= oDiff.minutes*1000*60;
 
       oDiff.seconds = Math.floor(nTotalDiff/1000);
 
       return oDiff;
 
}
// Function Usage
function use_time_difference()
{
	dateWhenIndiaWonFirstCricketWorldCup = new Date(1983, 6, 25, 5, 0, 0);
	dateCurrent = new Date();
	oDiff = get_time_difference(dateWhenIndiaWonFirstCricketWorldCup, dateCurrent);
	alert("It has been " + oDiff.days + " days since India won it's first cricket worldcup");
}
use_time_difference();
 

Go see live demonstration or download and view source code.

I hope it would help some Javascript beginners.Similar Posts:

• Implementing Quick Table Search using jQuery filter
• jQuery case-insensitive Contains Expression..!
• Simple / Plain Ajax – without any JavaScript library
• Printing data table vertically..! Why? and How?
• Hacking jQuery Thickbox..!

jQuery and jQuery-UI Compatibility:

The fact is jQuery and jQueryUI are not compatible, YES they are not. I tried to upgrade my application with jQuery1.4 but UI components are failed to work. I was using jQueryUI 1.7.2, later on I digg-in on the web to see how soon UI will support jQuery1.4 but seems like 1.7.x won't do that probably 1.8.x would.  So I tried looking at what is cooking with jQueryUI 1.8 but when I downloaded alpha release of UI1.8.a1 it had jQuery1.3.2 powering it...!

So I am just positive that before jQuery UI 1.8 will be released for production they would probably add support or make it compatible with jQuery 1.4.

Help/Reference:

Function calls for Popular jQuery methods

See how dramatically the function calls are reduced in 1.4 compared to 1.3.2..! It's just indication that how hard-work John Resig and Team would have put in.

To learn jQuery 1.4 and more about it's feature visit official website http://jquery14.com/ or take a look at this post on net-tuts website to checkout 15 must-know features of jQuery 1.4.Similar Posts:

• jQuery 1.5.2 and jQuery mobile alpha 4 released
• jQuery case-insensitive Contains Expression..!
• Implementing Quick Table Search using jQuery filter
• Hacking jQuery Thickbox..!
• jQuery 1.2.5 released

It includes some code improvements and stays compatible to latest version of jQuery 1.3.2 just like 1.2.4. It has been tested on Safari 4.x, Internet Explorer 7.0+, Firefox 3.x and will work on Chrome 2.x or 3.x as well.

I request any users to post back any problems/bugs they encounter or enhancements they need to be included.

jQuery Radio-button with Checkbox behavior

I saw a bug reported by ReneLeonhardt and tried to find out bug everything seemed all-right. Though I have made some changes, but still if you think that there is any patch required please let me know.Similar Posts:

• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery Magnet Multi-Select List – DG Magnet Combo
• jQuery 1.5.2 and jQuery mobile alpha 4 released
• Radio-button with Checkbox behavior
• MySQL 5.1 General Availability announced