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?

+1 Button

Google has answered Facebook with their newest product in the shelf "Google +1 Button". With this new +1 Button your visitors can promote article, blog post, website or product on your website by simply clicking and +1 Button.

Google's +1 Button is more important and will beat Facebook Like in popularity because it will influence the search result and yes that makes a difference, big time. If you own a website for your personal blog, product or anything and being in search result is important for you, than don't wait to put "this" button on your website. Since it's launch I have seen lot of implementations.

To vote +1 up, user or visitor just need a Google profile/account, a standard one. Till date when I am writing this some of the Google Apps users are not able to use this feature but I am sure it will change in future as Google will migrate them and make all products available to them. For now you might get an error like "Oops... you need a Google profile to use this feature.Google Profiles is not available for your organization."

Placing a Google +1 Button on website is very simple and easy and there are not 2 ways like Facebook had either go for iFrame version of JS and markup. Just include JS and place a <g:plusone></g:plusone> and that's it you're done. There are choice for button size too, so you can choose one which fits your website design and spacing. Refer Google +1 for Webmasters to get started. I am sure no webmaster can afford to dislike +1 Button.

It's kind of Google Friend Connect but not exactly, influence on search results and it's appearance in search result makes the difference. It also shows up all +1d links on a users profile in a separate tab.

Checkout this video to understand Google +1 Button in more detail:

and yes don't forget to +1d Blogs@DiGiTSS if you like our posts.

 Similar Posts:

• Facebook launches Registration Tool
• Google updates Google App’s maximum number of users for Standard/Free Edition
• Google vs Content Farms and Spammers
• goo.gl – URL Shortener from Google
• Google Caffeine: The new Search engine index

Get the Good News out sooner

If you (your organization/company) have good news about your product, clients using the product or any other good and positive news which can impact positively on your brand image or your sales and ultimately the bottom line one should try and do a press-release asap.

And you should not stop just by releasing press-notes, put that on your home page with highlights, write a blog post, update on social media channels and make a good positive wave.

I have observed sometimes we try to perfect the word going out, including marketing materials or the way we want to push that on websites. But it should not take long time because as the time passes it may loose the value and even if not value you might already have lose a customer just because that news/update was not on the website and it would have made a positive impact on the perspective buyer.

Assume that you have got some certification or achieved some milestone with your product which is highly recognized (in your domain or industry) and you're taking some time (due to the process of getting things/materials approved from people who are busy with their own things). Now here with delay of each day you possibly are loosing your perspective buyers for which that news would have mattered to change their decision in your favor.

For example: if designing a flash banner with flashy content and pictures takes time, get it out with just some colorful text on your product/company's website. It would help you get the things going and for those buyers to whom that news (read some milestone/feature or certification) is important, it does not matter whether it's flashy presentation or just a colored text.

When there is a "Good News", just let it go. Don't wait to prepare it to the perfection, just do it whatever you can do now.! later on no one is going to stop you and replace current with the better or best you have prepared after efforts of few days.

Basically now a days for IT, ITES and Tech or non-IT business their website plays important role and so one should preferably get designed in a way (I mean it should be built on top of CMS - Content Management System) that, it can be updated by management/marketing people without knowing much about it's internals.

This post is outcome of what I learned from one of the indecent happened in my current organization. What's your thought on this? Did you experienced anything? Your thoughts are welcome as comments.Similar Posts:

• Google launched new +1 Button
• Hiring a CEO vs Promoting a CEO
• 7 Things You Must Know About Your Customer
• Why blogging?
• Google updates Google App’s maximum number of users for Standard/Free Edition

Google Apps

Today I have received an announcement from Google Apps team that maximum # of users for Standard edition (which is free) has been reduced to 10. Previously that number was 50 (really generous), with which many businesses don't really need to go and buy the Premier Edition which would cost $50/year per user (email account). Especially when they really don't want to go for signing up SLA for up-time and all that.

Now when Google has reduced back this # from 50 to 10, I am sure Google Apps will be big-time earning son (product) for Google. Because lot of businesses today are dependent on excellent set of tools provided by Google which includes Google Calendar as Scheduler/Reminder, Google Docs as an Online Office Suite which includes spreadsheet, drawing and presentation tools and Google Site with which one can build Company Intranet websites for various purpose.

Luckily for those who have signed up earlier they will be able to create more than 10 users, up to what Google has promised them.

Here is the copy of email we have received for the change in policy:

Hello,

We recently announced upcoming changes to the maximum number of users for Google Apps. We want to let you know that, as a current customer, the changes will not affect you.

As of May 10, any organisation that signs up for a new account will be required to use the paid Google Apps for Business product in order to create more than 10 users. We honor our commitment to all existing customers and will allow you to add more than 10 users to your account for apps.digitss.com at no additional charge, based on the limit in place when you joined us.

Sincerely,

The Google Apps Team

Email preferences: You have received this mandatory email service announcement to update you about important changes to your Google Apps account.

Google Inc. | 1600 Amphitheatre Parkway | Mountain View, CA 94043

© 2011 Google Inc. Google and the Google logo are registered trademarks of Google Inc.

Where you lucky enough to sign up before this policy change?

Similar Posts:

• Google launched new +1 Button
• Google vs Content Farms and Spammers
• What’s new with iPhone OS 4.0
• goo.gl – URL Shortener from Google
• Google adsense v3 – new adsense interface

Usually one can read file into an array using PHP's file function but that's okay when size of file is in few hundred KB, if your file-size is running in to few MB to few hundred MB we need to find and use some efficient way to play with them. Because with large file reading as an array we can (and certainly will) run into memory outage issue.

To remove lines from the end of file you can use following snippet of code:

 
// Function to truncate last N lines from the file
function truncate_last_n_lines_of_file($file, $lines_to_remove, $chunk = 1024)
{
	// Open file in read+write mode
	$handle = @fopen($file, "a+");
	$lines_found = array();
 
	// Check if it's a valid file handle
	if($handle)
	{
		// size of file
		$max_length = $file_size = filesize($file);
		if(intval($file_size) == PHP_INT_MAX)
		{
			$max_length = PHP_INT_MAX;
		}
 
		// loop through file as long as we are not done with truncating required files
		for($length = 0; $length < $max_length; $length += $chunk)
		{
			if( ($max_length - $length) > $chunk)
			{
				$seek_size = $chunk;
			}
			else
			{
				$seek_size = $max_length - $length;
			}
 
			// read data in chunk
			fseek($handle, ($length + $seek_size) * -1, SEEK_END);
			$data = fread($handle, $seek_size) . $data;
 
			// Loop thorugh chunk to see if we are done with truncate
			for($i = $chunk; $i > 0; $i--)
			{
				if($data[$i-1] == "\n")
				{
					$lines_found[] = $i;
				}
				if(count($lines_found) == $lines_to_remove+1)
				{
					ftruncate($handle, ($max_length) - ($seek_size - $lines_found[$lines_to_remove]));
					return true;
				}
			}
			fclose($handle);
		}
		return false;
	}
}
 

How to use?

// To remove last 10 lines from the file
truncate_last_n_lines_of_file("./data.txt", 10);

If you find this useful and come across some problem let me know or if you get a fix or do value addition, please add up as a comment.Similar Posts:

• Reading MSSQL BLOG column data with PHP
• Printing data table vertically..! Why? and How?
• PHP – Downloading a File from Secure website (https) using CURL
• PHP: Performance Improvement Tips
• Posting or Uploading Files using cURL with PHP

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

Netbeans IDE 7 RC1 Released

Netbeans has been one of my favorite IDE for PHP, I have been using it in my day to day usage for most of my projects. I have been using Netbeans since 6.x. I know it's Java based IDE which needs powerful machine just like Eclipse. But some of the feature it offers are even not available in commercial competitors. One of the best feature is "Quick Search", the way it provides search through list of file is awesome. Something similar I have seen is in JetBrains PHPStorm but could not find it in Enterprise class Eclipse.

I have been following and using and following progress on Netbeans 7 since it's first beta release and I have noticed that it has improved lot as far as speed of IDE is concerned. Whenever your Netbeans 7 IDE freezes for fraction of second or two it immediately opens up a window to report an issue. With each beta (1, 2) and now RC1 speed improvement and especially intelligent auto-complete speed has improved drastically (compared to 6.x).

Here is the quick view of features supported by Netbeans 7 platform:

What's New in 7.0

NetBeans IDE 7.0 features the following changes:

• Introduction of JDK 7 support including editor enhancements (syntax, hints)
• Revamped support for WebLogic Application Server and GlassFish 3.1b43
• Oracle Database improvements
• HTML5 editing support
• Maven 3 is supported and bundled with the IDE
• Improved support for CDI, REST services, Java Persistence, and Bean Validation
• PHP Rename Refactoring
• Line wrapping
• Improved detection of external changes (native file system listening)
• Updates to the C/C++ support (remote file system browsing, library projects running/debugging, enhanced templates/specializations)
• Support for Git 1.7.х
• Additional enhancements are listed at the NetBeans IDE 7.0 New and Noteworthy page

For more about this release, see the NetBeans IDE 7.0 Release Information page.

So what's your favorite IDE for your programming language? Download Netbeans7 RC1 here.Similar Posts:

• NetBeans 6.8 is out
• NetBeans IDE 7.0 Beta available for download
• Smarty 3.0 is almost here..!
• HeidiSQL 4.0 RC1 released
• Mozilla released Firefox 3.6 – What’s new?

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