jQuery video series: The making of Address book

Hello friends,

I really enjoyed making these screen-casts for the first time and it was an awesome experience. I personally believed that to learn any new technology or library, one has to get acquainted with the basics and write a small generic application to get the hang of it. Below are the things that I’ve covered in this video series:

The Addressbook in jQuery

• Basic Instinct 
  • Why to use jQuery and Where to get it from?
  • $ and beyond (overriding $)
  • Difference between document.ready and window.load
  • Selectors, dom traversing and events
  • Ajax and writing custom jquery function
    
• Welcome to the jungle of jQuery
  • Selectors to fetch the values of form elements
  • Ajax calls to save the data (using php and mysql)
    
• A list apart
  • List all the contacts in a tabular format
  • Delete contact functionality
    
• Searching through
  • Search contacts by name or email
    

You can download the code from github.com.

References: 

• http://jquery.com/
• http://docs.jquery.com/Downloading_jQuery
• http://docs.jquery.com/Main_Page

P.S. There are many ways to improve the code. You can add edit-contact functionality or you can avoid unnecessary ajax calls to load forms/grids by simply keeping them in index.html and show/hide on demand instead of calling `$.load()` every time. Plus, its not always a valid choice to use only jQuery to write a Single Page app as there are lots of good MVC or MVVM frameworks available that can save your substantial amount of time and effort.

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.