The Complete Reference for Any jQuery Developer

To make optimal use of jQuery, it's good to keep in mind the breadth of capabilities it provides. You can add dynamic, interactive elements to your sites with reduced development time using jQuery. If you are looking for a comprehensive reference guide to this popular JavaScript library, this book is for you.

Revised and updated for version 1.4 of jQuery, this book offers an organized menu of every jQuery method, function, and selector. Each method and function is introduced with a summary of its syntax and a list of its parameters and return value, followed by a discussion, with examples where applicable, to assist in getting the most out of jQuery and avoiding the pitfalls commonly associated with JavaScript and other client-side languages.

In this book you will be provided information about the latest features of jQuery that include Sizzle Selector, Native event delegation, Event triggering, DOM manipulation, and many more. You won't be confined to built-in functionality, you'll be able to examine jQuery's plug-in architecture and we discuss both how to use plug-ins and how to write your own. If you're already familiar with JavaScript programming, this book will help you dive right into advanced jQuery concepts. You'll be able to experiment on your own, trusting the pages of this book to provide information on the intricacies of the library, where and when you need it.

Download :
- jQuery and jQuery UI Reference 1.2.chm
- jquery-1.4.chm
- jquery-api-20090115.chm

jQuery Resources :
- Jquery.com
- Downloading jQuery
- jQuery Documentation
- jQuery Code Repository on GitHub
- The jQuery Project
- Learningjquery.com

Read More...

Check username availability in ajax and php using jquery’s

Now let’s check it how to do check the username avaiability in ajax and php using jQuery.

Html Code :

<div>
User Name : <input name="username" id="username" value="" maxlength="15" type="text">
<span id="msgbox" style="display: none;"></span>
</div>

As you can see the above the “span” with id “msgbox” will show you the username availability message from ajax.

Css code :

.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.

As you know you can change the attriubutes of the css of the above code but keep in mind that “position” property should be “absolute”.

Javascript code :

First of all, the jQuery library is used,

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

As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.

$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
});
}
});
});

After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.

Php Code:

//this varible contains the array of existing users
$existing_users=array('roshan','mike','jason');
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
//user name is not available
echo "no";
}
else
{
//username available i.e. user name doesn't exists in array
echo "yes";
}

In the above PHP code, I’ve added three usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.


View Live Demo
Download full source

Source : http://roshanbh.com.np/2008/04/check-username-available-ajax-php-jquery.html

Read More...