tbl_fruits

The front-end would be a products list with all of the products in place and customers can filter which color and type of fruits they need to find.

Traditional wisdom would tell us that we would need to make a script that would send a query to the backend for every post request the reload the page for the search results.

SELECT fruit FROM `tbl_fruits` WHERE color = “Red” AND type = “Berry”;

However there are some instances that this approach has too much overhead on our backend and our database. In cases where all data has already been preloaded, we don’t have to query the database once again for data that is already available. We can simply use jQuery to control this information.

First of all, we need to make our form. Lets make 2 select boxes for our category selection:

Select Color Category:
<select name="selFruitColor" id="fruitColor">
	<option value="all">Any Color</option>
	<option value="red">Red</option>
	<option value="blue">Blue</option>
	<option value="yellow">Yellow</option>
</select>
<br>
Select Fruit Type:
<select name="selFruitType" id="fruitType">
	<option value="all">Any Type</option>
	<option value="fruit">Fruit</option>
	<option value="berry">Berry</option>
</select>
<br>
<input type="button" id="btnFilter" value="Filter the list">

Thing to note:
#fruitColor – The id of the select box for choosing fruit color
#fruitType – The id of the select box for choosing fruit type
#btnFilter – The id of the button that triggers the filtering of our list

Labelling the id of our elements is quite important so we can refer to them later in our script for triggering events and extracting values.

Now for displaying our data, in this case, we need to label each item properly to match with their respective categories. We can do this either manually for static pages or dynamically using your script of choice:

<ul>
	<li class="item red fruit">Apple</li>
	<li class="item blue fruit">Grape</li>
	<li class="item yellow fruit">Lemon</li>
	<li class="item red fruit">Cherry</li>
	<li class="item yellow fruit">Banana</li>
	<li class="item red berry">Strawberry</li>
	<li class="item blue berry">Blueberry</li>
	<li class="item red berry">Raspberry</li>
	<li class="item yellow fruit">Pineapple</li>
	<li class="item yellow berry">Yellowberry</li>
</ul>

Thing to note:
.item – This is the class of all the items from the list. This is important so we can show all, or ignore one of the categories when this is selected.
.red.berry, .blue.fruit, .yellow.fruit – Depending on the fruit’s category, we will apply the appropriate class. For example, an item under blue and berry will have class=”item blue berry”

And finally to piece it all together, we would need the jQuery script to filter our list based on our trigger:

$(document).ready(function()
{
	$("#btnFilter").click(function()
	{
		var fruitColor	= $("#fruitColor").val();
		var fruitType	= $("#fruitType").val();
		var fruitColorSelector = '';
		var fruitTypeSelector = '';		

		if (fruitColor == "all" && fruitType == "all")
		{
			//show all items
			$(".item").show();
		}
		else
		{
			if (fruitType != "all")
			{
				fruitTypeSelector = '.' + fruitType
			}

			if (fruitColor != "all")
			{
				fruitColorSelector = '.' + fruitColor
			}

			$(".item").hide();
			$(fruitTypeSelector + fruitColorSelector).show();
		}

	});

});

So what does this script basically do?

When #btnFilter has been clicked, it takes the value of #fruitType and #fruitColor. If it detects that both categories are set to “any”, it will display everything on the list.

If the categories for fruitType and fruitColor and both set, it will only display items in the list that fits the class criteria of both.

Now if it detects that just one of the categories is set to “any”, it sets the selector for the category to an empty string to the category will be omitted. Only one of the categories will then take effect.

A working demo of this article can be found below:
jQuery: List Filter Multiple Categories Demo

The source code for the demo can be downloaded here:
jQuery: List Filter Multiple Categories Demo Source Code

Bookmark to:

Imagine a database table with the following data:

tbl_fruits

The user can then choose to display all of the data, or filter the results based on their color.
Traditionally, queries like this are handled through the backend. When a user selects a color, it would send a query to our database like this:

SELECT fruit FROM `tbl_fruits` WHERE color = “red”;

In this example, the user selects the color red. This is the most common way of filtering a list. The problem lies however in that the more users requesting the data from our database, the more strain it gives on our server.

However, there is another solution: We can simply cache the most common database results so we don’t strain our database too much. This is what some programs like memcached do.

Even with memory caching, it still doesn’t deal with the fact that clients will have to request with the server multiple times for each request in a category.

With smaller lists however, we can perform client-side list filtering. This is where jQuery comes in. With client-side list filtering, we only have to request the page once, and let the client’s browser do the work for us. In this way, most of the workload is distributed to the client computers.

So how do we make a list filter in jQuery?

Its quite simple really, and it is more of a matter of labeling our element classes correctly. Given our example database from above, we can simply write a back end script to output each item with the element’s class as its category in our database.

Given our database example, for this demo, this is how we would show our form:

Select Color Category:
<select name="catSelect" id="catSelect">
	<option value="all">Show All</option>
	<option value="red">Red</option>
	<option value="blue">Blue</option>
	<option value="yellow">Yellow</option>
</select>
<input type="button" id="btnFilter" value="Filter the list">
<ul>
	<li class="item red">Apple</li>
	<li class="item blue">Grape</li>
	<li class="item yellow">Lemon</li>
	<li class="item red">Cherry</li>
	<li class="item yellow">Banana</li>
	<li class="item red">Strawberry</li>
	<li class="item blue">Blueberry</li>
	<li class="item red">Raspberry</li>
	<li class="item yellow">Pineapple</li>
</ul>

In this set-up notice that:

#catSelect – This is the id of the select box, we need this to get its value
#btnFilter – This is the id of the button that will trigger the filter event
.item – This is the class of all the items from the list. This is important so we can show all.
.red, .blue, .yellow – Depending on the fruit’s category, we will apply the appropriate class.

With all of these considerations in mind, this is how our final jQuery script will look like:

$(document).ready(function()
{
	$("#btnFilter").click(function()
	{
		var selection = $("#catSelect").val();

		if (selection == "all")
		{
			//show all items
			$(".item").show();
		}
		else
		{
			$(".item").hide();
			$("."+selection).show();
		}
	});
});

What happens in this code is that whenever the #btnFilter button is clicked, it triggers an event where we get the value of the category from select box #catSelect.

If the “all” value is selected, we would show all of the list. However, if only a specific category is specified, we will hide all of the other categories and only show the items with the proper class.

A working demo of this article can be found below:
jQuery: List Filter Demo

The source code for the demo can be downloaded here:
jQuery: List Filter Demo Source Code

The continuation of this article can be found below:
Filtering Lists With Multiple Categories Using jQuery

Bookmark to:

Lets create a very simple example jQuery script which simply changes a list’s class on hover:

We’ll assign red as the hover color:

<style type="text/css">
.hover
{
	color: #f00;
}
</style>

Then add the jQuery hover() event to toggle/change the list’s class when the mouse hovers over the list. This is how the javascript code will look like inside the document.ready() function:

$("li").hover(
function()
{
	$(this).toggleClass("hover");
},
function()
{
	$(this).toggleClass("hover");
});

To simplify things, I’ve added a sample AJAX callback function which is triggered by a button:

<div id="container">
<ul><li>This list should trigger the hover event</li></ul>
The AJAX callback loads here...
</div>

<input type="button" id="btnLoad" value="Click me to change list">

Our javascript would then look like this:

$(document).ready(function()
{
	$("li").hover(
	function()
	{
		$(this).toggleClass("hover");
	},
	function()
	{
		$(this).toggleClass("hover");
	});

	$("#btnLoad").click(function()
	{
		$.ajax(
		{
			url: "samplelist.html",
			success: function(html)
			{
				$("#container").empty().append(html);
			}
		});
	});

});

The completed demo of the code above can be found here:
jQuery: Non-working Callback Events

When you click the button and load the AJAX callback, notice that the hover() event no longer triggers? This problem is also applicable to other jQuery events suck as click(), blur(), and others.

Lets take a look at what happens:

When we set the hover event for our lists, what is actually does is that it adds a javascript event and its matching function for each of the matched elements. So upon loading of the page, this is what happens to our list. It turns from:

<li>...</li>

to:

<li onmouseenter="function()..." onmouseleave="...">...</li>

But what we forgot is that is that when we loaded the AJAX callback, it still doesn’t have the event binded to the element:

<li>AJAX callback loaded me</li>

So our hover event doesn’t trigger anymore because our AJAX callback doesn’t have one in the first place!

So how do we fix this? It quite simple. We just need to rebind the hover event to our AJAX callback. Running this function again:

$("li").hover(
function()
{
	$(this).toggleClass("hover");
},
function()
{
	$(this).toggleClass("hover");
});

will make our hovers work again. But to make it even easier on our part, we can simply move all the initial bindings into a separate function and just call that on our document.ready() and AJAX success functions.

Remember, we don’t have to move all the bindings, just the ones that are affected by the AJAX callback. In this example’s case, we only need the binding for the hover event on our list.

By doing this, our javascript will now look like this:

$(document).ready(function()
{
	initBinding();

	$("#btnLoad").click(function()
	{
		$.ajax(
		{
			url: "samplelist.html",
			success: function(html)
			{
				$("#container").empty().append(html);
				initBinding();
			}
		});
	});

});

function initBinding()
{
	$("li").hover(
	function()
	{
		$(this).toggleClass("hover");
	},
	function()
	{
		$(this).toggleClass("hover");
	});
}

Now we no longer have to worry why our Javascript events and validations don’t work on AJAX callbacks.

The working demo of this page can be found here:
jQuery: Re-binding jQuery Events on AJAX Callbacks

Or if you want to download all the source codes, you can follow the link below:
Download jQuery: Re-binding jQuery Events on AJAX Callbacks Source

Bookmark to:

Consider this simple form where a user is required to select at least one checkbox:
Which of the following jQuery selectors do you usually use?
(Please select at least one)

Which of the following jQuery events do you usually encounter?
(Please select at least one)

<b>Which of the following jQuery selectors
do you usually use? (Please select at least one)</b><br>
<input type="checkbox" name="selector[]"
id="selector" value="id">#id<br>
<input type="checkbox" name="selector[]"
id="selector" value="class">.class<br>
<input type="checkbox" name="selector[]"
id="selector" value="element">element[@attribute]<br><br>

<b>Which of the following jQuery events
do you usually encounter? (Please select at least one)</b><br>
<input type="checkbox" name="event[]"
id="event" value="click">click<br>
<input type="checkbox" name="event[]"
id="event" value="focus">focus<br>
<input type="checkbox" name="event[]"
id="event" value="change">change<br>
<input type="checkbox" name="event[]"
id="event" value="blur">blur<br>
<input type="checkbox" name="event[]"
id="event" value="submit">submit<br>

So how do we do the validation?

First we’ll have to bind the validations with the form’s submit event (submit() event on jQuery) and return false for all empty checkbox groups to prevent the form triggering its submission.

Without using jQuery, you’ll have to iterate through all of the checkbox elements, then check for the checked status of each individual check boxes (if none is checked then return false). And you’ll have to do this for each check box grouping.

However, jQuery makes things a little bit easier by introducing a selector filter for checked elements.
Using the :checked filter, it will select all of the checked elements for a particular element. so in this case,

$("input:checked")

will select all of the checked input elements. However, this is a downside for this. The :checked filter does not support #id and .class selectors so the following won’t work:

$("#selector:checked")
$("#event:checked")

So how do we work around this? Its pretty simple, by specifying the id, class, or even as an attribute, we can now separate the checkboxes according to its grouping. In this example, we are going to be using the #id to separate our checkboxes.

var selector_checked = $("input[@id=selector]:checked").length;
var event_checked = $("input[@id=event]:checked").length;
if (selector_checked == 0)
{
	return false;
}
else if (selector_checked == 0)
{
	return false;
}
else
{
	return true;
}

Its much simpler than iterating through each checkbox, since jQuery automatically does this for us. For two different checkbox groups, this is acceptable. However, when we would need to deal with more checkbox groupings, this can become a problem since the code will become more cluttered by then.

To simplify things, we’ll just make our own function passing the #id as a parameter to check for each checkbox group’s status. This is how the script would finally look like.

$(document).ready(function()
{
	$("form").submit(function()
	{
		if (!isCheckedById("selector"))
		{
			alert ("Please select at least one selector");
			return false;
		}
		else if (!isCheckedById("event"))
		{
			alert ("Please select at least one event");
			return false;
		}
		else
		{
			return true; //submit the form
		}
	});

	function isCheckedById(id)
	{
		var checked = $("input[@id="+id+"]:checked").length;
		if (checked == 0)
		{
			return false;
		}
		else
		{
			return true;
		}
	}
});

• View Demo
• Download Source

Bookmark to:

First of all, in order to use jqModal, the jQuery library is a prerequisite. And since we will add the drag functionality for our dialog, we will also need to include jqModal’s Drag and Resize plugin. Aside from jqModal’s script library, it also comes with a default CSS which will take care of the default styles. To customize this default CSS, we can simply override it later on. But for now, let’s include the required scripts and styles:

<link href="jqModal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jqModal.js"></script>
<script type="text/javascript" src="jqDnR.js"></script>

Now the next step is creating the layer for the floating dialog itself. Before we go on any further, lets take a look at jqModal’s predefined special classes. By assigning these special classes to elements, they will automatically be configured depending on its class. You can either use the predefined classes, or you can create your own triggers. But for now, we’ll just use the predefined classes:

.jqmWindow – defines the styles for the dialog window (visibility, z-index)
.jqModal – defines a trigger for displaying the dialog window
.jqmClose – defines a trigger for closing the dialog window

For this demo we will only use the .jqmWindow and .jqmClose classes since we will add a custom event to our jqmWindow.

For this demo, we would also need some ids to identify our floating layer and its handle. We will use #previewLayer for the floating dialog and #handle for its handle. For the dialog’s content, we’ll use #previewContent. Here is how it would look like:

<div id="previewLayer" class="jqmWindow">
	<div id="handle">
		<a href="#" class="jqmClose">close window</a>
	</div>
	<div id="previewContent"></div>
</div>

Now that we have our dialog and our trigger, let’s set them up at out $.(document).ready() function:

$(document).ready(function()
{
	$('#previewLayer').jqm().jqDrag('#handle');
}

The following line of code simple means to make #previewLayer a modal window with #handle as its handle.

Now that we have created our own floating dialog, now its time to add some back-end logic for our window. For demonstration purposes, we’ll use it as a preview for a sample form:

First Name: <input type="text" id="fname" name="fname" /><br />
Last Name: <input type="text" id="lname" name="lname" /><br /><br />
Gender:<br/>
<input type="radio" name="gender" id="gender" value="Male"/>
 Male
<input type="radio" name="gender" id="gender" value="Female"/>
 Female<br /><br />

<input type="button" id="previewButton" value="Preview" />

What we’ll simply do is replace the contents of #previewContent with the values inside the form when the #previewButton is triggered:

function generatePreview()
{
	var fname = $('#fname').val();
	var lname = $('#lname').val();
	var gender = $('input[@id=gender][@checked]').val();

	if (!gender)
	{
		gender = '';
	}

	var preview = '<h2>Preview</h2><hr />';
	preview += '<b>First Name:</b> ' + fname + '<br />';
	preview += '<b>Last Name:</b> ' + lname + '<br />';
	preview += '<b>Gender:</b> ' + gender + '<br />';

	return preview;
}

$(document).ready(function()
{
	$('#previewLayer').jqm().jqDrag('#handle');

	$('#previewButton').click(function()
	{
		var content = generatePreview();

		$('#previewContent').empty().append(content);
		$('#previewLayer').jqmShow();
	});
});

If you want to see the demo in action, just click below
View Demo | Download Source

Bookmark to:

I’m in your divs, ruining your z-index

Fortunately, there is a fix for this bug. By using an iframe and expanding it over the select box area, the iframe will take precendence over the select box. However, implementing this iframe hack alone can be quite a bit of a hassle.

Thankfully, there is alread a jQuery plugin that will automatically create the iframe for you. The plugin is simply called bgiframe and using it is quick and easy. Just include the script and attach the bgiframe() method to all of your floating layers. Here is a short and quick example:

<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.bgiframe.js"></script>
	<script type="text/javascript">
		$(document).ready(function()
		{
			$('#floating_div').bgiframe();
		}
	</script>
</head>
<body>
	<select>
		<option>Test</option>
	</select>
	<div id="floating_div">I'm over this select box</div>
</body>

Now those nasty z-index bugs won’t ever trouble you ever again.

Download:
bgiframe Plugin Page

Bookmark to:

First of all, the concept of AJAX Tabs is very simple if you would look at it from the ground up. By concept, it is simply multiple AJAX triggers that have the same target container. For this example, we will use a link as the trigger and have a div with an id of tabcontents as the target container.

<a id="tab1" href="#">Tab 1</a><br>
<div id="tabcontent"></div>

First let’s do a sample of a simple AJAX trigger from a link with an id of tab1 loading an HTML page named tab1.html through AJAX. Then the page will be loaded to a div with an id of tabcontent:

$("#tab1").click(function()
{
	$.ajax(
	{
		url: "tab1.html",
		cache: false,
		success: function(message)
		{
			$("#tabcontent").empty().append(message);
		}
	});
});

Its quite simple if you would look at it. The important thing is we have to match the trigger to the page we have to load, and into the container in which we must load the page.

If for example, we want to create a tab with 4 tabs / triggers we can simply manage this through repeating the code above several times and just changing the trigger id’s and the page it loads. The target container will still remain the same. However, this will present a problem since the more tabs / triggers we have, the more the clutter, and the more it is harder to manage.

Fortunately, there is a solution to this. By turning the AJAX call into a function and passing the page required to load as a parameter, we can simplify the tab implementation:

function loadTab(pageUrl)
{
	$.ajax(
	{
		url: pageUrl,
		cache: false,
		success: function(message)
		{
			$("#tabcontent").empty().append(message);
		}
	});
}

$(document).ready(function()
{
	$("#tab1").click(function()
	{
		loadTab("tab1.html");
	});

	$("#tab2").click(function()
	{
		loadTab("tab2.html");
	});

	$("#tab3").click(function()
	{
		loadTab("tab3.html");
	});

	$("#tab4").click(function()
	{
		loadTab("tab4.html");
	});
});

Want to make it even more manageable? Why not use arrays to store the required pages, and pass the array keys instead? And while we’re at it, we can also add a preloader for when the page is still loading. Here is what the final code will look like:

var pageUrl = new Array();
pageUrl[1] = "tab1.html";
pageUrl[2] = "tab2.html";
pageUrl[3] = "tab3.html";
pageUrl[4] = "tab4.html";		

function loadTab(id)
{
	if (pageUrl[id].length > 0)
	{
		$("#preloader").show();
		$.ajax(
		{
			url: pageUrl[id],
			cache: false,
			success: function(message)
			{
			    $("#tabcontent").empty().append(message);
			    $("#preloader").hide();
			}
		});
	}
}

$(document).ready(function()
{
	$("#preloader").hide();

	$("#tab1").click(function()
	{
		loadTab(1);
	});

	$("#tab2").click(function()
	{
		loadTab(2);
	});

	$("#tab3").click(function()
	{
		loadTab(3);
	});

	$("#tab4").click(function()
	{
		loadTab(4);
	});
});

This is merely a bare bones implementation of the AJAX tabs. From here, you can add additional validations (for example AJAX error messages), and add styles to your links and content. You can also specify dynamic content (like PHP, Python, or ASP scripts) as the target for the script to load.

If you want to see a demo of this script in action, or you want to download the source code, just click on the links below:

jQuery AJAX Tabs Demo
Download jQuery AJAX Tabs Source Code

Bookmark to:

For the first demo, we will toggle an input’s disabled status through the use of another control. For this example, we will give our target input an id of target, while our control, in this case a link, we will give it an id of control:

Target text field: <input type="text" id="target" /><br />
<a href="#" id="control" />Disable target</a>

Now to toggle the target‘s disabled status, it is actually quite simple in jQuery. Using the .attr() attribute we can disable the target. Then using the .removeAttr(), we can remove the disabled status. Here is how the javascript code would look like:

$("#control").toggle(
function ()
{
	$('#target').attr("disabled", true);
},
function ()
{
	$('#target').removeAttr("disabled");
});

Here is a demo on how to toggle the disabled status of an input:

Target text field:
Disable target

Although the first method is handy, there are times when we really don’t need a control input. What if we want to enable an input textbox just by clicking on it? Unfortunately, when an input element is disabled, it would no longer register events such as focus or click. The good news is that there is an alternative. Instead of using the disabled attribute, we use the readonly attribute instead. Here is a sample javascript code on making a readonly input enabled using its click event:

$('#readonly').click(
function()
{
	if ($('#readonly').attr("readonly") == true)
	{
		$('#readonly').val('');
		$('#readonly').removeAttr("readonly");
	}
});

Here is the demo of how to change the readonly attribute

This text field will no longer be read-only upon clicking:

If you want to download the source code for this tutorial,
just click on the link below:

Download Source Code

Bookmark to:

Here is another alternative to the usual onsubmit validations for forms. Instead of validating a form only at the end, why not validate it as the user is typing their input. This is where keypress validations come in. We can capture it through the onkeypress event.

Here are some examples of keypress validations:

Only integers are allowed:


Only alphanumeric characters are allowed:


No spaces are allowed:

Here is an example keypress validation function:

function alphaOnly(evt)
{
	var charCode = (evt.which) ? evt.which : window.event.keyCode;

	if (charCode <= 13)
    {
    	return true;
    }
    else
    {
		var keyChar = String.fromCharCode(charCode);
		var re = /[a-zA-Z]/
		return re.test(keyChar);
	}
}

What this function does is

1. capture the keypress character entered
2. determine if the browser is navigator based or not by checking for the which or keyCode attribute
3. most of the special character codes will be skipped
4. validate the character entered with a regex pattern

To use a keypress validation for an input element, we must add its onkeypress attribute with the validation function we want:

<input type='text' onkeypress='return alphaOnly(event)' />

You can also download the Javascript source below:
Download javascript keypress validation script

PS: As I have always said before, client-side validation is no substitute for server-side validation. Client-size validation is more for usability and reducing some load from your server (through reduced rendering of error pages). So don't be lazy!

UPDATE:
For those who are interested in the jQuery version, here is the sample code:

$("input").bind("keypress", function(evt)
{
    var charCode = (evt.which) ? evt.which : window.event.keyCode; 

    if (charCode <= 13)
    {
        return true;
    }
    else
    {
        var keyChar = String.fromCharCode(charCode);
        var re = /[a-zA-Z]/
        return re.test(keyChar);
    }
}

Bookmark to:

Ever wondered how auto-saving is done? Basically, it is just a simple AJAX script running in the background at set intervals to save the data you are currently working on. Here is a simple tutorial on how to implement auto-saving using jQuery

Before we start, the article assumed the following:

• Basic knowledge of jQuery
• Basic knowledge of PHP

For the articles database, we will only use 4 rows for our table named articles:

• id – this will serve as the primary index for the table; auto-increment
• title – this will contain the title of the article
• content – this will contain the body of the article itself
• timestamp – this will contain the timestamp when the row was last inserted or updated

Let us first start with the form and call it add_article.php for this tutorial. Before we render our form, we must first create a blank instance of a row. The purpose of this is two-fold. One, so that we can generate an article id, and secondly that we cannot really update a non-existent row. There is a more efficient way of implementing this logic without generating a blank row every time, however, for the sake of simplicity and explaining the point of concept for this tutorial, we will skip this part.

add_article.php

//create new article on database
mysql_query("INSERT INTO `articles`(title, content) VALUES('', '')");
$article_id = mysql_insert_id();

The next step is making the form. First, we would create a form element that would to save the article to a standard save page. Lets call it save.php.

Remember the article_id generated in making the blank row? Now we must output it as a hidden input for the article_id associated with the article. We would also need an input text field for the title and a text area for the content. Finally we would need a submit button, and a placeholder container for the “Last saved” timestamp.

add_article.php

<form id="article_form" method="post" action="save.php">

Title:<br />
<input type="text" name="title" id="txt_title" /><br />
Content:<br />
<textarea name="content" id="txt_content" ></textarea><br />
<input type="hidden" name="article_id"
value="<?php echo $article_id ?>" />

<input type="submit" value="Save"/><br />

</form>
<div id="timestamp"></div>

Now for our AJAX back end, we must create a script that will perform the update from the AJAX request that came from add_article.php. Let us call this script autosave.php. In return, the script must output the timestamp when the article was last updated

autosave.php

$title = mysql_real_escape_string($_POST['title']);
$content = mysql_real_escape_string($_POST['content']);
$id = (int)$_POST['article_id'];

//save contents to database
mysql_query("UPDATE `articles`
    SET title = '$title', content = '$content' WHERE id = '$id'");

//get timestamp
$result = mysql_query("SELECT timestamp FROM `articles`
    WHERE id = $id");
$timestamp = mysql_result($result, 0);

//output timestamp
echo 'Last Saved: ', $timestamp;

And finally to tie it all up, we must now create the autosave script in jQuery on add_article.php. First of all, in creating our autosave() function, we will need to create a setTimeout loop that will call itself recursively. For this tutorial, the interval between auto-saving is 20 seconds

add_article.php

function autosave()
{
	var t = setTimeout("autosave()", 20000);
}

And finally, to finish it all up, we must send an AJAX request to our back end autosave.php. Of course, we mustn’t forget to pass the $article_id we generated earlier. Also, auto-saving must only proceed when both title and contents are not empty.

And lastly, when the AJAX request has been successfully processed, we will pass its value to our timestamp container.

add_article.php

function autosave()
{
	var t = setTimeout("autosave()", 20000);

	var title = $("#txt_title").val();
	var content = $("#txt_content").val();

	if (title.length > 0 || content.length > 0)
	{
		$.ajax(
		{
			type: "POST",
			url: "autosave.php",
			data: "article_id=" + <?php echo $article_id ?>
+ "&title=" + title + "&content=" + content,
			cache: false,
			success: function(message)
			{
				$("#timestamp").empty().append(message);
			}
		});
	}
}

Finally, it is just a matter of starting the auto-saving feature when the DOM is ready:

add_article.php

$(document).ready(function(){
	autosave();
});

Working demo of the tutorial and the download links can be found below:

View jQuery Auto-save Demo
Download Source Codes

Bookmark to:

The basic logic of an auto-suggest script is that for every keystroke that a user enters on a textfield, the script must send an AJAX request and validate which words in a dictionary most closely resembles the current input.

First of all, we will need to have a textbox field for our search field. Then let’s give it an id called txt_search (#txt_search)

<input type="text" id="txt_search" name="search">

Next, we will need a <span> or a <div> where our auto-suggest results will show up. Let’s give this an id called suggest (#suggest)

<span id="suggest"></span>

Now, this is where the keyup() event comes in. For every keystroke that the user makes on the search input box, we must trigger an AJAX request. However, if we do not have any text on the search input box, no AJAX request should be triggered at all. Here is how it should look like:

$("#txt_search").keyup(function()
{
	var search;
	search = $("#txt_search").val();

	if (search.length > 0)
	{
		// Trigger AJAX request
	}
	else
	{
		// Empty suggestion list
		$("#suggest").empty();
	}
});

And finally, to trigger the AJAX request itself, we must call on jQuery’s $.ajax() function to send the request. In this case, we must make an AJAX request to the backend which will check for the matching suggestions. For this tutorial, we will name our backend dictionary.php And upon success, we must clear the current contents of the #suggest container and replace it with the AJAX response:

$.ajax(
{
	type: "POST",
	url: "dictionary.php",
	data: "search=" + search,
	success: function(message)
	{
		$("#suggest").empty();
		if (message.length > 0)
		{
			message = "Do you mean: " + message;
			$("#suggest").append(message);
		}
	}
});

Now the backend’s job is to search the dictionary for the matching search term. For this tutorial, the dictionary will be in the form of an array. However, the dictionary source can be substituted by a flat file or database results (caution in using DB resources, especially in high-traffic conditions. Use a DB result cache if possible). The output would be a comma-separated list of words that match the search term. Here is how the PHP script would look like:

<?php
$search = strtolower($_POST['search']);
$search_length = strlen($search);
$suggest = array();

$dictionary = array('C++', 'Smalltalk', ...);

foreach ($dictionary as $word)
{
	if($search == substr(strtolower($word), 0, $search_length))
	{
		$suggest[] = $word;
	}
}

echo implode(', ', $suggest);
?>

In the end, here is how the auto-suggest will look like:
jQuery Auto-suggest Tutorial Demo

You can download the full demo here:
Download the jQuery Auto-suggest Tutorial

Bookmark to:

Its a fact that client-side client validation is no alternative to server-side validation especially in web applications. However, that doesn’t mean that we should drop client-side validation altogether. The truth is that client-side validation enhances a web application. First, the client-side validations provide a more responsive interface for users. Secondly, for a very large enterprise-grade application, shifting some of the validations on the client as a first pass filter will reduce the load on the server and improve its performance.

Now let’s move on to the tutorial. First of all, I’m going to use a simple registration form as an example for validation. Here is the demo for this tutorial:

Username: Username must be at least 4 characters in length

Password: Password must be at least 6 characters in length

Here is how the form looks like in code view:

<b>Username:</b> <i>Username must be at least 4 characters in length</i>
<input type="text" id="txt_username" name="username">
<span id="username_warning" style="color:red"></span>
<b>Password:</b> <i>Password must be at least 6 characters in length</i>
<br><input type="password" id="txt_password" name="password">
<span id="password_warning" style="color:red"></span>

In the example above, we’ve created a span for where our error message will appear with a unique id so they can be selected later on. What is important in this form is that we assign an id for each of the fields we need to validate so we can bind it with its corresponding jQuery event. Since we want to validate the text boxes once a user has supplied an input, the events of choice here will be both the change() and blur() event. However, the change() event has problems when the user reloads the page. Even with an invalid input, the validation will not trigger unless the user has changed the value of the input itself.

Now to validate the length of the user input, we must find the length of the text fields using the jQuery selectors. Here is how to do it:

$(document).ready(function(){
	$("#txt_username").blur(function()
	{
		var username_length;

		username_length = $("#txt_username").val().length;
		$("#username_warning").empty();

		if (username_length < 4)
			$("#username_warning").append("Username is too short");
	});

	$("#txt_password").blur(function()
	{
		var password_length;

		password_length = $("#txt_password").val().length;
		$("#password_warning").empty();

		if (password_length < 6)
			$("#password_warning").append("Password is too short");
	});
});

If you want to view the tutorial, you can download it here below:
Textbox Validation and the blur() Event Demo Download

Bookmark to:

Here is a demo of this tutorial at work:

Quite handy isn’t it? Here is how to do it in a few simple steps:

First of all, we need to have our select box. Here is how the select box above looks like in code view

<select id="item_select" name="item">
	<option>Select an Item</option>
	<option value="1">Item 1</option>
	<option value="2">Item 2</option>
	<option value="3">Item 3</option>
</select>

For our demo, we will give the select box an id called “item_select” (#item_select) so we can access it later on via jQuery.The values for each option is going to be important as we move on.

The next step will now be creating an array of messages that will correspond to the values of each option. The easiest way to do this is by using the values of each option as the array’s index. Here is how to do it. Place this within the <script> tags:

var message = new Array();
message[1] = "You have selected first item";
message[2] = "You have selected the second item";
message[3] = "You have selected the last item";

Now, the only thing missing is the container in which message will appear. Let’s create a div with an id called “message_display” for this purpose:

<div id="message_display"></div>

Now for the final piece of the puzzle: To show our message when a user selects an option, we must assign the change() event of #item_select with the message display. Then we must assign the value of the option selected as the index of the message we want to display. Here is how to do it:

<script type="text/javascript">
var message = new Array();
message[1] = "You have selected first item";
message[2] = "You have selected the second item";
message[3] = "You have selected the last item";

$(document).ready(function(){
	$("#item_select").change(function()
	{
		var message_index

		message_index = $("#item_select").val();
		$("#message_display").empty();

		if (message_index > 0)
			$("#message_display").append(message[message_index]);
	});
});
</script>

The important thing to note here is that we must empty() the #message_display div or else the messages will keep on stacking due to the append() command.

That is all for the tutorial for today.

You can download the sample demo here:
Select Boxes and change() event demo

Bookmark to:

Here is a simple tutorial on how to implement the “select all” function for checkboxes in jQuery. All you need to know for this tutorial is the basic knowledge of using the jQuery library.

assuming we have included the jQuery library in our document:

<script type="text/javascript" src="jquery.js"></script>

The next step would be defining our form. For our example, we’ll just use a very simple checkbox list to select which paradigms are applicable to Javascript. We’ll name these checkboxes simply as “paradigm”:

<input type="checkbox" name="paradigm"
value="Imperative">Imperative<br>
<input type="checkbox" name="paradigm"
value="Object-Oriented">Object-Oriented<br>
<input type="checkbox" name="paradigm"
value="Functional">Functional<br>

and of course, we need the “select all” checkbox to perform the operation. We’ll give this checkbox an id name of paradigm_all:

<input type="checkbox" id="paradigm_all">Select All

Now lets go to the main part of jQuery code. What happens when we select the “select all” checkbox is that the checkbox’s status will be passed to all of the checkbox list. For example, if the “select all” checkbox is checked, all checkboxes should also be checked, and vice versa.

So how do we select all of the checkboxes to change their checked state? Fortuantely, jQuery has XPath style selectors which allows us to choose multiple elements in the DOM. the expression:

input[@name=paradigm]

will select ALL input elements that are named paradigm. Here is how the final jQuery script should look like:

$(document).ready(function()
		{
			$("#paradigm_all").click(function()
			{
				var checked_status = this.checked;
				$("input[@name=paradigm]").each(function()
				{
					this.checked = checked_status;
				});
			});
		});

If you want to view a demo of the following script or to download the demo source code, just follow the links below.

View Demo
Download Source Code

Bookmark to:

The requirements for this tutorial are:

and the required files for this tutorial are:

Before we start with this tutorial, let me make one thing clear:

Client-side input validation is no substitute for server-side validation.
Client-side validation can be easily bypassed, and should be treated more as an enhancement for the form.

now let us continue with the tutorial
For this tutorial, I’m going to use a very simple product information form. here is how it would look like:

	<b>Enter Product Information:</b><br><br>
	<form id="prod_form" method="POST" action="process_product.php">
		Product Name* :<br>
		<input type="text" name="prod_name" id="prod_name">
		<span class="error" id="prod_name_error"></span><br>
		Quantity* :<br>
		<input type="text" name="prod_quantity" id="prod_quantity">
		<span class="error" id="prod_quantity_error"></span><br>
		Optional Description:<br>
		<textarea name="prod_description" cols="30" rows="3"></textarea>
		<br><br>

		<input type="submit" value='Submit'>
	</form>

In our form, the product name and the product quantity would be the required fields. Also the quantity should be a valid numeric integer. For now, we’ll give our for the id name prod_form. Also notice that a blank <span> for the error messages has already been defined for each required field? We’ll get to that later on

So how do we implement this server side validation in jQuery? With the jQuery Form Plugin, it is much easier to process the validations.

First of all, we must define the jQuery base, and the jQuery form plugin at the head of the document.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

now for the most important part, we must set a pre-submit callback function in the ajaxForm options. Here is how to do it:

$('#prod_form').ajaxForm({
					target: 		'#content',
					beforeSubmit: 	validateForm
			});

The target option basically states where the AJAX output will display, while the beforeSubmit option shall contain the function that will be processed before the form is submitted to the server.

In our form, we’ve set a function named validateForm to handle the validations. Here is what the validateForm looks like:

function validateForm()
{
	$("#prod_name_error").empty().hide();
	$("#prod_quantity_error").empty().hide();

	var product_name 		= $("#prod_name").val();
	var product_quantity	= $("#prod_quantity").val();

	var errors 				= 0;

	if (product_name == null || product_name == '')
	{
		$("#prod_name_error").show()
.append("Product Name is required");
		errors++;
	}
	if (product_quantity == null || product_quantity == '')
	{
		$("#prod_quantity_error").show()
.append("Product Quantity is required");
		errors++;
	}
	else if (!isNumeric(product_quantity))
	{
		$("#prod_quantity_error").show()
.append("Product Quantity should be numeric");
		errors++;
	}

	if (errors > 0)
	{
		alert ("Errors were found on the form");
		return false;
	}

}		

function isNumeric(form_value)
{
	if (form_value.match(/^\d+$/) == null)
		return false;
	else
		return true;
}

Here is where all the validation happens. The first couple of if-then blocks basically checks if a value has been entered for for the required fields: product_name and product_quantity. And the last if-then block checks whether product_quantity is a valid numeric integer through a regex function.

Also regarding the beforeSubmit callback function, if it returns FALSE, the form shall not be submitted.

Also, this code shows how to display the error message for each individual required field. What the validateForm function does is that it appends the error warning on the <span> we have defined earlier.

If you want to see this tutorial in action, just check on the links below

View Input Validation Demo
Download Source Code

Bookmark to: