Best jQuery Ajax Plugins & Tutorials with Demo

jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

May 17, 2012 | Ajax, HTML5, Other API

Today we will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast.

Yahoo provides a large collection of useful APIs that are free for developers to use. The requirement is that you register your application with through their developer dashboard. The registration is simple and straightforward, and as a result you obtain an application id (look for it under the title of your application). You are going to need this later in the tutorial, but first let’s see how everything would work together.

Read More Demo

jQuery Autofill City & State from Zip Code with Ziptastic

May 7, 2012 | Ajax, Forms, jSON, Other API

Most address fields on web forms ask for city, state, and zip code (or city and post code, outside of the US). But as us nerds often lament, city and state are redundant with zip code. Or at least they can be inferred from a correctly entered zip code. That’s the kind of thing computers are good at. What we need is a proper API to cough up that information for us on demand

We’re going to watch the zip input for keystrokes. Should the final value after a keystroke be a valid zipcode, we’ll attempt to get the city and state through Ziptastic and reveal the other fields.

Read More Demo

jQuery Validation Engine with Demo

April 28, 2012 | Ajax, Forms, Plugins

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.
Rules of thumb
* field.id are **unique** across the page
* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
* spaces or special chars should be avoided in field.id or field.name
* use lower cases for input.type ie. *text, password, textarea, checkbox, radio*
* use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]
* use only one Ajax validator per field!
* JSON services should live on the same server (or you will get into browser security issues)
* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.

Read More Demo

Ajax Upload : jQuery File uploader with progress-bar,drag-drop Feature

April 21, 2012 | Ajax, Forms

Ajax Upload; A file upload script with progress-bar, drag-and-drop.Use AJAX Upload to upload multiple files without refreshing the page and style upload button as you wish.This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Read More Demo

jQuery History : Simple History Handler/Remote for Hash with Demo

April 11, 2012 | Ajax, Plugins, Web

jQuery History allows you to easily track changes of the pages state by tracking URL Hashes. Supports changes triggered by bookmarks and back & forward buttons, as well as cross browser support.

Tracks state changed within your application. States can be changed by the user via modification of the Page URL’s Hash (everything after the # in the URL), or via you manually in your code.
Is able to detect all the possible ways a page’s state can change. These can be via links in your code, back-forward buttons in your browser, manual modification of the URL’s hash, using bookmarks that contain hashes, and finally refreshing a page with a hash.
Routinely tested in all major browsers before each release. Explicitly it has been tested in IE6 and above, Firefox 2 and above, Safari 2 and above, Chrome 1 and above, and Opera 8 and above.
Allows you to bind handlers to state changes within your web application. Eg. $.History.bind('myState',function(state){});
Allows you to trigger a state change manually within your code. Eg. $.History.go('myState');
Allows you to trigger a state handler manually within your code, such that the state is not recorded. Eg. $.History.trigger('myState')
Allows for easy integration with Ajax Applications via the use of jQuery Ajaxy.

Read More Demo

jQuery Dirty Forms : Save your users from losing their data

April 1, 2012 | Ajax, Forms, Plugins

Dirty Forms is a flexible jQuery plugin to help prevent users from losing data when editing forms.

Dirty Forms will alert a user when they attempt to leave a page without submitting a form they have entered data into. It alerts them in a modal popup box, and also falls back to the browser’s default onBeforeUnload handler for events outside the scope of the document such as, but not limited to, page refreshes and browser navigation buttons.

Read More Demo

jQuery.validity : A plugin for powerful client-side form validation

March 30, 2012 | Ajax, Forms, Plugins

jQuery.validity is a jQuery plugin for powerful, accurate client-side form validation. It is well-organized, versatile and can easily tackle any validation problem.You can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward.

jQuery.validity takes advantage of jQuery’s selector engine to perform validation on logical groupings of inputs, making it declarative and clean. This means that the inputs on a page can be added, removed, or changed and validation will still work without reconfiguration.

jQuery.validity is designed to give you total control over how validation messages appear, so you can easily adapt the way validation errors are displayed to the look and feel of your site.

Read More Demo

Best jQuery Ajax Plugins & Tutorials with Demo

jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

jQuery Autofill City & State from Zip Code with Ziptastic

jQuery Validation Engine with Demo

Ajax Upload : jQuery File uploader with progress-bar,drag-drop Feature

jQuery History : Simple History Handler/Remote for Hash with Demo

jQuery Dirty Forms : Save your users from losing their data

jQuery.validity : A plugin for powerful client-side form validation

3500+ Free CSS Code Snippets

jQuery Plugins Tags