This article is a continuation to the Filtering Lists Using jQuery. In the previous article, we’ve discussed how to filter a simple list using a single category. However, in real life this isn’t simply the case. What if we have a new column for our database table which adds a new category to our fruits list:

tbl_fruits

fruit	color	type
Apple	Red	Fruit
Grape	Blue	Fruit
Lemon	Yellow	Fruit
Cherry	Red	Fruit
Banana	Yellow	Fruit
Strawberry	Red	Berry
Blueberry	Blue	Berry
Raspberry	Red	Berry
Pineapple	Yellow	Fruit
Yellowberry	Yellow	Berry

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.
Read more »

List filtering is when we have a list of different items, belonging to different categories and we can choose a category to hide or display. This is very convenient for users if they only want to view items belonging only to a particular category. However, list filtering can become one of the most resource-intensive workloads on a server.

Imagine a database table with the following data:

tbl_fruits

fruit	color
Apple	Red
Grape	Blue
Lemon	Yellow
Cherry	Red
Banana	Yellow
Strawberry	Red
Blueberry	Blue
Raspberry	Red
Pineapple	Yellow

Read more »

Or the title can be put shortly as: Why doesn’t my jQuery events work after an AJAX callback?

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

Read more »

Having problems with checkbox validations? Then you’re not alone. Checkbox validation is usually more difficult due to its nature of having multiple values at the same time.

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)

#id

.class

element[@attribute]

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

click

focus

change

blur

submit

<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

Here is an alternate tutorial on how to create a floating dialog using the jQuery library with the jqModal plugin. Aside from providing an easy way to create you floating dialog, the jqModal extension also allows you to drag and resize your dialog. For this tutorial, I will demonstrate how to create a draggable floating dialog.

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