20 jQuery and Ajax Plugins

Sam Deering
Tweet

The jQuery library has a full suite of AJAX (Asynchronous JavaScript and XML) capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh. Given below are some tutorials that would let you know how to perform it, Enjoy!

Update 28/02/2013: Removed broken links and added new images.

1. Create a Shoutbox using PHP and AJAX

A stunning and dynamic shoutbox based in PHP and AJAX (using jQuery).
Shoutbox-using-PHP-and-Ajax.jpg
SourceDemo

2. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

You can have some information changed at a set time interval.
Refreshing-element-at-a-set-time-interval-using-jquery.jpg
SourceDemo

3. CakePHP Ajax “Quick Save” with jQuery

When you are in an administration panel, sometimes you want a “quick save” feature that allows you to save without leaving the page. Here is how to accomplish this with CakePHP and jQuery
CakePHP-Quick-Save.jpg
Source + Demo

4. Ajax Login Form Using Jquery and PHP

This will show you on how to create an ajax-powered login form. Using Jquery and PHP.
Ajax-Login-Form-with-jQuery-and-PHP.jpg
Source + Demo

5. Twitter Like More Button with jQuery and Ajax

An interesting tutorial on how to create Twitter Like More button using Jquery and AJAX.
Twitter-Like-More-Button.jpg
SourceDemo

6. Exactly Twitter like Follow and Remove buttons with jQuery and Ajax

Twitter like follow and remove buttons with fadeOut and fadeIn effect.
Exactly-Twitter-Like-Follow-and-Remove-Buttons.jpg
SourceDemo

7. Submit a Form without Refreshing page with jQuery and Ajax

A very simple tutorial submitting HTML form values without refreshing page using jQuery and Ajax.
Submit-a-Form-without-Refreshing-Page.jpg
SourceDemo

8. Delete a Record with animation fade-out effect using jQuery and Ajax

jQuery tutorial delete action with out refreshing page.
Delete-a-Record-with-Fade-out-Effect.jpg
SourceDemo

9. Ajax Add a Record with Button Status Change using jQuery

Learn on how to add a record with button status change, like Facebook and Twitter..
Ajax-Add-a-Record-with-Button-Status-Change.jpg
SourceDemo

10. Insert and Load Record using jQuery and Ajax

This tutorials explains how to insert and display record without refreshing web page.
Insert-and-Load-Record-using-jquery-and-ajax.jpg
Source + Demo

11. Auto-populating Select Boxes using jQuery & Ajax

If you are familiar with using select boxes for categorisation and sub-categories, such as ebay does when selling an item, usually this can require a lot of JavaScript to maintain the select boxes, but jQuery can hugely simplify this task by adding a dash of AJAX.
Auto-populating-Select-Boxes.jpg
SourceDemo

12. Ajax Multiple File Upload Form using jQuery

Learn how to create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface.
Ajax-Multiple-File-Upload.jpg
Source + Demo

13. AjaxFileUpload

This plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing.
Ajax-File-Upload.jpg
SourceDemo

14. Combining jQuery Form Validation and Ajax Submission with ASP.NET

In this tutorial will show you how to combine jQuery form validation and AJAX submission with ASP.NET.
Combining-jQuery-Form-Validation.jpg
Source + Demo

15. Dynamic Loading of ComboBox using jQuery and Ajax in PHP

Learn to create a dynamic loading of dropdown. Simple solution which is created by jQuery.
Dynamic-loading-of-ComboBox-using-jquery.jpg
SourceDemo

16. AJAX-ZOOM

It uses image tiles to quickly generate a portion of the zoomed image (similar to Google Maps).
Ajax-Zoom.jpg
Source + Demom

17. AjaxPager

is a JQuery + Bootstrap plugin that creates a pagination control bar, according to configuration, that will make remote requests for data.
AjaxPager.jpg
SourceDemo

18. AjaxPanel

A jQuery plugin that provides a uniform way to update HTML elements, updating is based on jQuery’s low-level AJAX implementation.
AjaxPanel.jpg
SourceDemo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: 20 jQuery and Ajax Plugins « « Big Engine Media Big Engine Media

  • http://www.7lifedesign.com Yordan

    Very nice tutorials. Thank you.

  • Aneeq

    This is the simplest code to select and display records from MySQL database table and display in PHP.

    $cn=mysql_connect($db_host,$db_user,$db_password) or die(mysql_error());
    mysql_select_db($db_name,$cn) or die(mysql_error());

    $sql = “SELECT field_name FROM table_name”;
    $rs = mysql_query($sql) or die(mysql_error());

    while($row = mysql_fetch_array($rs)){

    echo $field_name = $row["field_name"];
    echo “”;

    }
    mysql_free_result($rs);

    Source:
    http://phphelp.co/2012/04/26/how-to-select-and-display-

    mysql-records-data-in-php/

    OR

    http://addr.pk/acfd

  • Nikel

    Puffs

  • john

    Thanks

  • http://www.facebook.com/justinismyfriend Rinzzler Justin

    i tried 4 links and all were dead please update !! take as an example the top plugin

    • http://jquery4u.com/ jQuery4u

      Thanks for the heads up Rinzzler, will update links.
      Sam