Implementing Quick Table Search using jQuery filter

Before sometime I had written a post on jQuery case-insensitive expression filter. Now today we will learn about how to put simple filter for our HTML table using jQuery and it's case-insensitive expression.

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>
 

Read the rest of this entry »

Tags: , , ,

Google launched new +1 Button

Google +1 Button

+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. :)

 

Tags: ,

Don’t wait for Good News to get out and make the positive wave..!

Get the Good News out sooner

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. :) Read the rest of this entry »

Tags: , ,

Google updates Google App’s maximum number of users for Standard/Free Edition

Google Apps

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. Read the rest of this entry »

Tags: , ,

Truncate last N lines of a file using PHP

For one of my project I needed to remove certain footer / tail-end lines from the large-file to make it clean as it was containing some summary of records within the file. Because if I do that it can be directly loaded into database by LOAD DATA command.

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;
	}
}
 

Read the rest of this entry »

Tags: , , ,

Simple / Plain Ajax – without any JavaScript library

Yes, we are in the world of AJAX where we don't live without jQuery, Prototype or Mootools but when it comes to explaining someone that how raw ajax works, you need an example of plain AJAX which we have been using 5 years back when these libraries were either just born and were not as famous as today. Because my favorite jQuery has become a de facto standard when it comes to DOM manipulation or AJAX.

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? Read the rest of this entry »

Tags: , , ,

jQuery case-insensitive Contains Expression..!

Most of the time to search through DOM and filter text we need a jQuery Expression/filter which gives us case-insensitive result. I believe it's required to have it as a part of jQuery base-library but anyway writing your own is very simple.

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: Read the rest of this entry »

Tags: , , ,

Paying the bills.!