vijayjoshi.org » jQuery

Favorite tech links of the week : 17 Jan – 23 Jan, 2011

Vijay Joshi — Mon, 24 Jan 2011 06:09:00 +0000

This post contains some of the useful and interesting tech links I found during last week. To keep up to date with the latest information, subscribe to the feed or follow me on twitter @v08i.

How to write a simple application on jQuery Mobile : http://goo.gl/5DpOO

50 Free Tools and Apps for Web Designers and Developers : http://goo.gl/6YjNL

10 Useful jQuery Plugins for Images : http://goo.gl/VTk1F

20 less known Open Source PHP CMS-es : http://goo.gl/cM6f3

11 More Things I Learned From the jQuery Source : http://goo.gl/2zBh7

CSSReset : All the most common CSS Reset scripts in one place : http://goo.gl/8OV9E

JavaScript Slider – TinySlider 2 : http://goo.gl/526cL

Searching text in a HTML table using jQuery

Vijay Joshi — Mon, 03 Jan 2011 12:31:01 +0000

Here is the situation. You have a really long table with hundreds of rows and you want to filter the rows(instantly!) that contain a specific keyword in any of the table cells.

This article will show how this can be achieved with the help of jQuery.

The HTML

Create a table with some rows with multiple cells. Put a textbox above the table in which search term will be entered.


	
		
			Enter keyword to search 
		
		
		e.g. bar, parking, tv
	
	
		
			
				#
				Hotel Name
				Facilities
			
			
				1
				Manu Maharani
				Attached Bath, Bar, Swimming Pool, 
			
			
				2
				Hill View
				TV, In-Room Safe, Bar
			
			
				3
				Hotel Suba Galaxy
				Paid Internet Access, Coffee Shop, Spa
			
			
				4
				The Residence Hotel
				Doctor on Call, Parking
			
			
				5
				The Taj
				Currency Exchange, Bar, Golf
			
			
				6
				Mumbai Grand
				Jacuzzi, Spa, Coffee Shop
			
			
				7
				The Promenade
				Cable TV, Coffee Shop, Spa
			
			
				8
				Hotel Regency
				Mini Bar,Golf, Spa, Sauna
			
			
				9
				Park Plaza
				Currency Exchange, Bar, Golf
			
			
				10
				The Mapple Inn
				Jacuzzi, Spa, Coffee Shop
			
			
				11
				Cidade de Goa
				Cable TV, Coffee Shop, Spa
			
			
				12
				Saurabh Mountview
				Doctor, Free Parking

#	Hotel Name	Facilities
1	Manu Maharani	Attached Bath, Bar, Swimming Pool,
2	Hill View	TV, In-Room Safe, Bar
3	Hotel Suba Galaxy	Paid Internet Access, Coffee Shop, Spa
4	The Residence Hotel	Doctor on Call, Parking
5	The Taj	Currency Exchange, Bar, Golf
6	Mumbai Grand	Jacuzzi, Spa, Coffee Shop
7	The Promenade	Cable TV, Coffee Shop, Spa
8	Hotel Regency	Mini Bar,Golf, Spa, Sauna
9	Park Plaza	Currency Exchange, Bar, Golf
10	The Mapple Inn	Jacuzzi, Spa, Coffee Shop
11	Cidade de Goa	Cable TV, Coffee Shop, Spa
12	Saurabh Mountview	Doctor, Free Parking

The CSS

Apply the following css to style the table and its cells.

body
{
	font-family:verdana,arial;
	font-size:13px;
	margin:0 auto;
	width:100%;
}
.tables
{
	border:1px solid #000;
	margin:0 auto;
	width:600px;
}
th,td
{
	padding:5px;
}
p
{
	background-color:#ACAAFC;
	padding:10px;
}
a
{
	color:#fff;
	text-decoration:none;
}
.even
{
	background-color:#fff;
	color:#343234;
}
.odd
{
	background-color:#DCDEFC;
	color:#343234;
}

The jQuery Code

$(document).ready(function()
{
	$('#search').keyup(function()
	{
		searchTable($(this).val());
	});
});

function searchTable(inputVal)
{
	var table = $('#tblData');
	table.find('tr').each(function(index, row)
	{
		var allCells = $(row).find('td');
		if(allCells.length > 0)
		{
			var found = false;
			allCells.each(function(index, td)
			{
				var regExp = new RegExp(inputVal, 'i');
				if(regExp.test($(td).text()))
				{
					found = true;
					return false;
				}
			});
			if(found == true)$(row).show();else $(row).hide();
		}
	});
}

The jQuery code is simple. searchTable function is called on keyup of textbox. We search for all td elements in each row and then check for the inputted value. A regular expression is used to match the values. If a match is not found, we hide that row. Passing i as second parameter makes the search case-insensitive. Remove it if you want a case-sensitive search.

Another point to note is that this code will not work on nested tables i.e. if you have more tables inside cells.

Future enhancements will include developing it as a simple jQuery plugin and support for searching in nested tables.

Why you MUST use client side validation

Vijay Joshi — Thu, 30 Dec 2010 06:03:48 +0000

Client side validation is checking the values against the desired format before sending them to server side for further processing. Javascript is used for validations on browser. Lately, with the popularity of jQuery, a large number of validation plugins are available which make it even more easy to implement validations on forms.

A word of caution before beginning. Though client side validation is very useful and simple to implement, it should NEVER be thought of as a replacement for server side validations. If the javascript is turned off on the browser or user bypasses it and no server side validation is placed, your application then is at the mercy of users solely.

~~Read Why you must use server side validation?~~

So, here is why you should use client side validation.

Easy to implement

Although you can write your own validation for forms, there are multiple javascript and jQuery plugins available that require developers to write minimal amount of code to implement validation. These plugins also provide several options for customized validation like strings, numbers, dates, email addresses etc.

No waiting time for users

Since javascript executes on users browser itself, client side validation provides instant feedback. Plugins like live validation provide helpful messages to users as they type. Besides saving time, this pattern makes data entry less error prone.

Less server trips

Without javascript validation, each time a value needs to be checked, the form should be submitted and server would then process it and show the result. Take for example a text box which asks for email. Possible validations for it could be blank value and a valid email address. With javascript validations in place we can save these trips to server.

Interactive and Fun

Have a look at jQuery inline formValidator. Gone are the days of ugly alert boxes (those were really irritating). With javascript running in browser, you can unleash your creativity and make validation an interactive and fun process by combining html and css with javascript. You can use tooltips and fancy effects to guide your users.

Users love it

Waiting for full page load only to see one error message is no good. Users like instant feedback and helpful error messages. Javascript allows you to create a rich visual experience that is a major trait of rich internet applications.

That’s it for now.

It is worth mentioning again that alone client side validation is no good. Always, I repeat, always use server side validation along with client side validation. This way, in case the javascript validation fails, you can always rely on the server.

Click here to read more about best practices of form validation

Favorite tech links of the week : 20Dec – 26Dec, 2010

Vijay Joshi — Mon, 27 Dec 2010 06:35:12 +0000

This post contains some of the useful and interesting tech links I found during this week. To keep up to date with the latest information, subscribe to the feed or follow me on twitter @v08i

jQuery 1.4.3 Offline Learning Kit – http://goo.gl/zoAb5

What features would you like to have in PHP? – http://goo.gl/Q84B9

35 Useful and Time saving Firefox Add-Ons – http://goo.gl/ZQQhF

Beware the Trailing Comma of Death – http://goo.gl/P3LqX

2010: Yet another great year for PHP – http://goo.gl/WO0uY

The major incidents on the Internet in 2010 – http://goo.gl/lbfM1

Ten Alternative CMS Options to WordPress – http://goo.gl/1q9ly

3 Lightweight Alternatives to phpMyAdmin – http://goo.gl/izsZc

Rocking Out With CoffeeScript – http://goo.gl/5FCYl

50 Best jQuery Techniques 2010 – http://goo.gl/4TfBF

Using Twitter API and jQuery to display recent tweets

Vijay Joshi — Fri, 24 Dec 2010 06:52:13 +0000

In this article I will show you how you can display your (or any other user’s) recent tweets with some jQuery magic. We will create a widget (sort of) that will fetch n number of latest tweets from public timeline of a user using Twitter API and then we will display them in a nice list.

End result will look like the following.

Have a look at a live example.

Let us start creating it now. First write some HTML. Define some css styles in the head section which will control the display of list. In the body section, there is a select box with id layout which will be used to select either a wide or a narrow layout for displaying the tweets. Then create a div with id tweets. We will create a ul inside this div which will have tweets as list items.



	
		Latest Tweets Widget - Vijay Joshi | http://vijayjoshi.org
		
	
	
		
			Select layout

jQuery Code

Just before the body tag closes, add path to jQuery library either from your local file system or the Google CDN.

With this we are ready to pull the tweets. Start by defining 2 variables userName and count. Inside document.ready add a change event handler to select box with id layout. It will change its width from 600px to 300px on selecting narrow and again back to 600px on selecting wide.

Now call a function getTweets and pass user name and number of tweets to it.

var userName = 'v08i';
var count = 8;
$(document).ready(function()
{
	$('#layout').change(function()
	{
		$('#container').css({ 'width' : $(this).val()+ 'px'});
	});
	getTweets(userName, count);

});

getTweets function will actually contact the Twitter API and will fetch tweets from there. We will request the response in JSON format from Twitter using jQuery’s getJSON method.

Before we proceed let us talk a bit technical. As you probably know, browsers do not allow cross-domain ajax requests due to security reasons. In this case the example we are creating is at domain vijayjoshi.org while the twitter domain is api.twitter.com. If both domains were same, a simple AJAX request would have sufficed. To overcome this problem JSONP aka “JSON with Padding” is used.

To use JSONP with jQuery, just change the dataType parameter from json to jsonp. Now you do not have to worry about cross domain restriction or anything else. Just define a callback function (showTweets in this example) and you will receive the JSON response there.

function getTweets(userName, count)
{
	$.getJSON(
		'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + userName + '&count='+ count +'&callback=?',
		{},
		showTweets,
		'jsonp'
	);
}

Now that we have the response, define showTweets function, iterate in the results and display them. Here is how.

function showTweets(tweets)
{
	var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	var str = '';
	str+= 'Recent Tweets from ' + userName +'';
	var i = 0;
	$.each(tweets, function(index,value)
	{
		if(i == count)	return;
		var dt = new Date(value.created_at);
		str+= '';
		str+= value.text;
		str+= '';
		str+='';
		str+= dt.getDate() + '-' + months[dt.getMonth()] + '-' + dt.getFullYear();
		str+= ' at ' + dt.getHours() + ':' +dt.getMinutes();
		str+= ' From ' + value.source;
		str+= '';
		i++;
	});
	str+= '';
	$('#tweets').html(str);
	$('#tweets > ul > li:odd').addClass('odd');
	$('#tweets > ul > li:even').addClass('even');
}

I have used only some of the values from the JSON response. You can view the full response by typing the following into your browser.

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=your_twitter_username&count=10

With this we are done. Have a look at the demo I have created.

For full source code, just view page source. It’s all happening on your browser after all.

If you have any questions, let me know in comments.

Working with XML Documents in PHP and jQuery

Vijay Joshi — Thu, 23 Dec 2010 10:17:15 +0000

Here is one more sample chapter from my book. It explains reading, writing and editing XML files with PHP and jQuery. Below are the chapter contents.

Loading XML from files and strings using SimpleXML

Accessing elements and attributes using SimpleXML

Searching elements using XPath

Reading an XML using DOM extension

Creating an XML using DOM extension

Modifying an XML using DOM extension

Parsing XML with jQuery

Loading XML from files and strings using SimpleXML
Accessing elements and attributes using SimpleXML
Searching elements using XPath
Reading an XML using DOM extension
Creating an XML using DOM extension
Modifying an XML using DOM extension
Parsing XML with jQuery

To read the full chapter follow this link - https://www.packtpub.com/article/working-with-xml-documents

You can also read the chapter on using JSON with PHP and jQuery.

Filling a select box using javascript and jQuery

Vijay Joshi — Tue, 21 Dec 2010 08:25:22 +0000

innerHTML is commonly used property for setting html content of elements. Though it is not a standard property, even then all browsers support it. It is faster then using DOM methods like createElement and appendChild.

You can use it to set html for almost all elements. In internet explorer there are some exceptions. You cannot set innerHTML for elements of a table and select box.

Recently a reader asked me the workaround for setting options inside a select box with the help of javascript or jQuery. In this post I will explain some methods which you can use as an alternate to innerHTML.

Here is a html select box.

Now let us look at various options available to us.

Using innerHTML

This is the problem. This method will work in all browsers except IE (i have tested till IE8).

var select = document.getElementById('selectBox');
var options = '';
options+= '';
options+= '';
select.innerHTML = options;

Using DOM – Works in all browsers

var select = document.getElementById('selectBox');
for(var i=0; i<3; i++)
{
	var option = document.createElement('option');
	option.appendChild(document.createTextNode('option' + i));
	select.appendChild(option);
}

Using jQuery

Method 1- This will work in all browsers.

$('#selectBox').append('');
$('#selectBox').append('');
$('#selectBox').append('');

append method appends the html at the end of an element.

Using jQuery

Method 2 – This will also work in all browsers.

var options = '';
options+= '';
options+= '';
$('#selectBox').html(options);

html() method in jQuery can be thought of as a counterpart of the innerHTML property.

That is all folks. Hope it helps you. If you know of any other technique, do let me know in comments.

Working with JSON in PHP and jQuery

Vijay Joshi — Mon, 20 Dec 2010 11:56:18 +0000

I mentioned in a previous post that I was writing a book on PHP and jQuery. Well, after a labor of around 7 months the book is out now. It is available on Packt website as well as Amazon.

Meanwhile, to help you make a decision, a sample chapter from the book is available on Packt website. The chapter is Working with JSON in PHP and jQuery and it contains 4 articles that explain creating, reading and writing JSON in PHP as well as jQuery.

Below are the topics that this chapter covers:

Creating JSON in PHP
Reading JSON in PHP
Catching JSON parsing errors
Accessing data from a JSON in jQuery

To read the full chapter, just follow this link http://www.packtpub.com/article/working-json-php-jquery

Creating a text rotator with jQuery

Vijay Joshi — Tue, 14 Dec 2010 07:14:25 +0000

jQuery is appropriately described as the “write less, do more” library. Few lines of code, if written appropriately, can produce wonderful tools or utilities.

In this article we will create a simple text rotator (or banner rotator whatever you want to call it). Simply put, there will be a placeholder which will have multiple quotations written inside it. These quotations will be displayed one by one with a fading effect. Have a look at the demo to see how it will look like.

Now that you have seen the demo and you find it interesting enough, here is how to create it.

Write the following html which will create a container div with id quotes. Inside this div, create multiple divs, each of which will hold a quotation and assign a css class textItem to them.

Except for 2 things, you can style the elements as per your wish. First, div with id quotes should have position as relative and each textItem should have position set to absolute. Absolute positioning for quotations will ensure that they are stacked on top of each other. This way if we fade out a quotation and fade in the next one, it will give desired effect.

Complete markup will look like the following.

 
 
 
jQuery Text Rotator - by Vijay Joshi | vijayjoshi.org

 
 
     
         Before turning to those moral and mental aspects of the matter which
present the greatest difficulties, let the inquirer begin by mastering
more elementary problems.
         

         How often have I said to you that when you have eliminated the
impossible, whatever remains, however improbable, must be the truth?
         

         It is a capital mistake to theorize before one has data.
Insensibly one begins to twist facts to suit theories, instead of
theories to suit facts.
         

         We must fall back upon the old axiom that when all other contingencies
fail, whatever remains, however improbable, must be the truth.

Now just before the body tag closes, include jQuery and next to it write the actual code that will put life to our quotations.

First of all, function setupRotator is called on document ready. This function will hide all textItem elements. Then it finds the first textItem and adds a class current to it. current class will help us identify which quotation is currently being displayed. After applying the class current it uses the fadeIn function to display the first item.

Now comes the key point. Using JavaScript function setInterval, set a function textRotate() to execute every 3 seconds.

Here is what textRotate function does.

get the quotation with class current - This will be currently visible element on page
Check if this quotation has any element next to it or not
If not, this means it is the last quotation. Therefore, remove the class current from it and use fadeOut function which will hide it after 1 second. Find the first quotation, apply class current to it and use fadeIn to make it visible
If a quotation is found next to current quotation, remove the class current from it and use fadeOut to hide it. Apply class current to the next element and make it visible using fadeIn

We have used value 1000 at all places in fadeIn and fadeOut which means the animation will take 1 second to complete, providing the desired effect.

Do not forget to view page source for full code.

I will soon convert it to a jQuery plugin so that it becomes easy to use it on pages without any change to code.

jQuery: Difference between .each and jQuery.each

Vijay Joshi — Tue, 23 Nov 2010 18:55:49 +0000

It can be quite confusing when you have 2 methods in an API with same names. Hopefully, this post will clear up your doubts.

.each is an iterator that is used to iterate over only jQuery objects collection while jQuery.each is a general function for iterating over javascript objects and arrays.

Still confused? Let us look at the usage of both of these with examples.

.each()

Consider the following markup.




paragraph element

span element

Suppose we want to find out the tag name of each element present inside this div. In this case we will use .each iterator

$('#dv').children().each(function(index, element)
{
 console.log('element at index ' + index + 'is ' + (this.tagName).toLowerCase();
});

//Output
element at index 0 is input
element at index 1 is p
element at index 2 is span

each() function takes 2 parameters, index of current element and the DOM element itself. Therefore, this will refer to the DOM element inside each(). We can get the tag name using tagName property of DOM element.(This post explains it in detail). To use the corresponding jQuery object, use $(this)

jQuery.each()

jQuery.each takes 2 parameters. First is the object over which the iteration is to be done and second is the callback function that will execute on each iteration. The callback function provides 2 parameter, first is index of current element(or you can say key in case of objects) in object and second the value at that index.

First, let us iterate over a js array.

var myArray = [10,20,30,40,50];

jQuery.each(myArray, function(index, value)
{
    console.log('element at index ' + index + ' is ' + value);
});

//Output
element at index 0 is 10
element at index 1 is 20
element at index 2 is 30
element at index 3 is 40
element at index 4 is 50

Another example using an object

var myObj = {
"Google" : "http://google.com",
"Reddit" : "http://reddit.com",
"Mashable" : "http://mashable.com"
};
jQuery.each(myObj, function(key, value)
{
    console.log('value for key ' + key + ' is ' + value);
});

//Output
value for key Google is http://google.com
value for key Reddit is http://reddit.com
value for key Mashable is http://mashable.com

That’s it. If you still have doubts, let me know in comments.