Smashing Magazine we smash you with the information that will make your life easier. really.

80+ AJAX-Solutions For Professional Coding

June 20th, 2007 in Developer's Toolbox | 360 Comments

Advertisement

Web-developers can create amazing web-applications with AJAX. Stikkit, Netvibes, GMail and dozens of further web-projects offer a new level of interactivity we’ve used to give up the idea of. Modern web-applications can be designed with enhanced user interfaces and functionalities, which used to be the privelege of professional desktop-applications. AJAX makes it possible to create more interactive, more responsive and more flexible web-solutions. And it’s the first step towards rich internet applications of the future.

Asynchronous JavaScript and XML isn’t a new programming language, as it is often mistakingly called. Basically, AJAX is a set of XHTML, CSS, DOM, XMLHttpRequest and XML, put together and used together for the same purpose - to improve the user-server-interaction.

To understand the idea behind AJAX, you should read Jesse James Garrett’s article “Ajax: A New Approach to Web Applications” and Wikipedia: Ajax;
to learn the basics of AJAX, you should go through some AJAX tutorials we’ve presented previously;
to learn more about professional CSS coding, you should visit 70 Expert Ideas For Better CSS Coding;
and to get a powerful and handy CSS-Toolbox for your future projects, you can use 53 CSS-Techniques You Couldn’t Live Without.

In this article we’d like to present a list of over 90 useful AJAX-based techniques you should always have ready to hand developing AJAX-based web-applications. Auto-completion, instant field editing, menus, calendars, interactive elements, visual effects, animation, basic javascripts, as well as an extensive developer’s suite should give you a useful and powerful toolbox you can use every day, without a need to go through hundreds of AJAX-related bookmarks.

You may also want to take a look at the article 60 More Ajax and Javascript Solutions For Professional Coding.

AJAX Auto Completer

1. AJAX AutoSuggest: An AJAX auto-complete text field

2. AJAX Autocompleter / script.aculo.us library

3. AJAX AutoCompleter

4. Ajax autosuggest/autocomplete from database

5. Ajax dynamic list

AJAX Instant Edit

6. AJAX inline text edit 2.0

7. AJAX & CSS Flickr-like Editing Fields

8. AJAX Instant Edit

AJAX Menus, Tabs

9. 14 Tab-Based Interface Techniques

10. AJAX Menu Widget

11. AJAX Accordion Navigation: mootools demos

12. AJAX Dialogs, Menus, Grids, Trees and Views

13. AJAX Tab Module - Closeable Implementation

14. Ajax Tabs Content

15. AJAX Tabbed Content

16. MooTabs - Tiny tab class for MooTools

17. Dynamically loaded articles

AJAX Date, Time, Calendars

18. AJAX Datetime Toolbocks - Intuitive Date Input Selection

19. AJAX Calendars

AJAX Interactive Elements

20. AJAX Floating Windows

21. AJAX Star Rating Bar

22. Ajax poller

AJAX Developer’s Suite

23. AJAX HistoryManager, Pagination

24. AJAX Login System Demo

25. AJAX image preloader

26. AJAX Tooltips: Nice Titles revised | Blog | 1976design.com

27. 40+ Tooltips Scripts With AJAX, JavaScript & CSS | Smashing Magazine

28. AJAX Web Controls

29. AJAX syntaxhighlighter

30. GMail Ajax Style Username Signup

31. Gmail Ajax Style Check Username

32. Transparent Message

33. ModalBox — An easy way to create popups and wizards

34. AJAX File Uploads progress bar

35. Chained select boxes

36. Fly to basket

37. AJAX Key Events Signal

38. Disable form submit on enter keypress

Enhanced AJAX Solutions

39. AJAX Instant Completion: Rico Framework

40. Novemberborn: Event Cache

41. Altering CSS Class Attributes with JavaScript

42. Select Some Checkboxes JavaScript Function

43. AJAX Emprise Charts: 100% Pure JavaScript Charts

44. amCharts: customizable flash Pie & Donut chart

45. PJ Hyett : The Lightbox Effect without Lightbox

Ajax Forms

46. AJAX Upload Form

47. An AJAX contact form

48. AJAX contact form

49. Ajax.Form: mootools demo

50. Ajax form validation

51. Really easy field validation

52. AJAX fValidate: a high quality javascript form validation tool

53. Ajax newsletter form

54. wForms: A Javascript Extension to Web Forms - The Form Assembly

AJAX Grids, Tables

55. Data Grids with AJAX, DHTML and JavaScript | Smashing Magazine

56. Grid3 Example

57. AJAX Table Sort Script (revisited)

58. AJAX Sortable Tables: from Scratch with MochiKit

59. AJAX TableKit

AJAX Lightboxes, Galleries, Showcases

60. 30 Scripts For Galleries, Slideshows and Lightboxes | Smashing Magazine

61. AJAX LightBox, Sexy Box, Thick Box

62. AJAX Lightbox JS

63. AJAX Unobtrusive Popup - GreyBox

64. SmoothGallery: Mootools Mojo for Images | Full gallery

65. AJAX Libraries and Frameworks

Visual Effects, Animation

66. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS

67. How to Create a Collapsible DIV with Javascript and CSS

68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS

69. AJAX Shopcart

70. Draggable content

71. Dragable RSS boxes

72. AJAX Pull Down Effect: Rico Framework

73. AJAX Animation Effects: Rico Framework

74. Combination Effects in scriptaculous wiki

75. AJAX Motion Transition: Fx.Morph

Useful Basic JavaScripts

76. 9 Javascript(s) you better not miss !!

77. Top 10 custom JavaScript functions of all time

78. Hyperdisc Materials: JavaScript: Top 10: Automatic Breadcrumb Trail

79. JavaScript: Top 10 Most Useful JavaScripts

80. My Favorite Javascripts for Designers: Blakems.com ?

Galleries, Resources

81. MiniAjax.com: a showroom of nice looking simple downloadable DHTML and AJAX scripts.

82. Ajax Rain: growing showcase of AJAX-examples.

83. Max Kiesler - mHub : Ajax and rails examples & how-to’s

84. Ajax Resources

85. DZone Snippets: Store, sort and share source code, with tag goodness

Published in Developer's Toolbox, June 20th, 2007
Tags: ajax, animations, calendars, coding, editing, grids, javascript, menus, techniques, tools

Advertisement

1.

Kai Müller (June 20th, 2007, 9:34 pm)

Thanks again. ~~Great~~, eh HUGE list!
2.

Brendon Kozlowski (June 20th, 2007, 9:51 pm)

Since SyntaxHighlighter is linked, I figured I’d also comment on Link [codepress.org], a great way to give a syntax-color coded textarea for programming code (yes, you can type within the textarea). Immerse CMS uses it for its HTML template editing textareas (I can’t remember what the original purpose of the project was).
3.

Sergey (June 20th, 2007, 9:59 pm)

why promote ajaxrain who has stolen miniajax.com’s design?
4.

Ryan Scherf (June 20th, 2007, 10:01 pm)

This is a great list. How about some self promotion with my Search Suggest script: Link [www.ryanscherf.net]. I also have another version which loads from a XML flatfile as well as JS Arrays.
5.

Tim (June 20th, 2007, 10:10 pm)

Why promote ajaxrain.com who has stolen miniajax.com’s design?
6.

Peter (June 20th, 2007, 10:16 pm)

Sweet stuff! Way to go Smashing Magazine.
7.

BlogHash.com (June 20th, 2007, 10:24 pm)

Excellent list! Thanks for putting it up together.
8.

EA (June 20th, 2007, 10:32 pm)

Thanks, awesome list.
9.

danny (June 20th, 2007, 11:58 pm)

Thanks! you are the best!!!!
10.

alam (June 21st, 2007, 12:04 am)

great, I try to combine that with codeigniter for our new project.

thank you very much
11.

Luke (June 21st, 2007, 12:14 am)

great list once again guys. I have been looking for a smart edit in place thingy for yonks! :)
12.

Ad (June 21st, 2007, 12:48 am)

Great resource here - you just saved me and my team abt a week’s worth of research!
13.

Vivek (June 21st, 2007, 1:57 am)

Nice and outstanding list. I can use few goodies in upcoming project.
14.

Jonathan Schemoul (June 21st, 2007, 2:04 am)

I know my own solution is listed here (and thanks), but why do people need full tools for very simple stuff like tabs ?
I mean, with mootools you can do a full featured tab systems in what… 5 lines of code !

I think people would waste less time learning javascript and frameworks than finding cool tools on the web to do what they want (for simple stuff of course, like drag and drop, tabs, flyto…).

However very nice finds for complex toolkits for charts, galleries and stuff like that, thanks !
15.

Moula (June 21st, 2007, 2:51 am)

Where are your best websites of May?

:*(
16.

Cathy (June 21st, 2007, 3:03 am)

Ajax is my preferred choice when it comes to web designing.

Cathy
17.

WraithX (June 21st, 2007, 3:45 am)

Wow - this is a great list! Thanks for that - they will certainly all come in very handy as I am trying to build a new startup based on AJAX. I have added your feed to my RSS viewer - every post is a gem!

Link [blog.frater.com]
18.

psychic readings (June 21st, 2007, 3:51 am)

interesting thanks
19.

Anatoly (June 21st, 2007, 4:30 am)

Pretty useful, thanks.

BTW, just saw another fancy script — Link [www.anyexample.com]. Uses transparent background (like Lightbox) and works in IE7 (which dropped support for standard prompt() function).
20.

dreamfalcon (June 21st, 2007, 4:36 am)

great resource of tools
Thx ;)
21.

Grin (June 21st, 2007, 5:43 am)

very useful, thanks a lot =)
22.

Matty (June 21st, 2007, 6:06 am)

Bloody Ripper! These are excellent! Thank you so much!
23.

Ash Haque (June 21st, 2007, 6:39 am)

As always, another great list!
24.

Jarand (June 21st, 2007, 6:40 am)

So many great resources! Once again you guys have brought us the best resources, and the topic this time is in the wind like never before!
25.

Le Tung Lam (June 21st, 2007, 7:07 am)

Nice and outstanding list. I can use few goodies in upcoming project.
26.

Darren (June 21st, 2007, 7:43 am)

Wow fellas, again you have come through with the goods.

This is my one stop shop for coding goodies on the web.

Fantastic work.
27.

jhonny (June 21st, 2007, 8:36 am)

any suggestions for a quiz using AJAX?
28.

Michael Krotchie (June 21st, 2007, 8:47 am)

Great list guys, will definitely have to roll some of these nifty tips into my site.
29.

faizan (June 21st, 2007, 11:41 am)

thank you bro another great list as usual. :)
30.

philldo (June 21st, 2007, 12:18 pm)

Great List. Smashing Magazine always posts some awesome resources,. Keep it up. I can’t wait to try some of these AJAX scripts out. Fun Stuff.
31.

Nick (June 21st, 2007, 1:52 pm)

Smashingmagazine is my bible. There lists are very exhaustive.

Keep up the good work.
32.

Mrg (June 21st, 2007, 2:43 pm)

Hi, thanks for this great list, one suggestion: could you add also the library in which the effect is based? (when it applies, for example, Link [prototype-window.xilinus.com] obviusly is based in prototype…)
33.

Sweb.ws (June 21st, 2007, 4:47 pm)

Thanks!! ;)
34.

Iwan Tri W (June 21st, 2007, 4:58 pm)

Very great resources. It’s very useful for me (beginner). I must be others user feel it too.
35.

Florentin (June 21st, 2007, 6:03 pm)

You might want to include Link [www.ajaxdaddy.com] in this list.
Lots of web 2.0 demos are installed there and you can play with the code on the site and check the changes immediately.
36.

shashi arya (June 21st, 2007, 6:03 pm)

what to say…. again a great list. thanks for your effort
37.

prego (June 21st, 2007, 7:17 pm)

Uh, did i missed it?
Where is jQuery and the excelent Interface Library for jQuery? As powerfull as scriptaculous/prototype (probably more) and only 15kb (jQuery)…

Link [jquery.com]
Link [interface.eyecon.ro]

Besides that - great list, thnx :)
38.

Adam (June 21st, 2007, 7:58 pm)

Fantastic post - very helpful as always ..
39.

Stian Solberg (June 21st, 2007, 8:36 pm)

Absolutely a great list! But a list is never complete until Gaia have been added… Gaia Ajax Widgets is a complete framework for ASP.NET 2.0 which is Open Source and Mono compatible.

Nada need to write JavaScript; everything is manipulated in the server side code, just like you are used to!

Link [ajaxwidgets.com]
40.

SEO Expert Blog (June 21st, 2007, 10:45 pm)

Nice collection but not all of the tools listed here actually rely on Ajax for asynchronous data exchange.
41.

sandeep (June 22nd, 2007, 1:56 am)

Fantastic post very helpful……
42.

Andre (June 22nd, 2007, 4:04 am)

Really amazing list. Thank you for the awesome tipps!
43.

Motorcycle Guy (June 22nd, 2007, 5:55 am)

The Ajax scripts that impress me most are those that start out and would display correctly even with js disabled.
44.

firnx (June 22nd, 2007, 5:24 pm)

It’s really cool, thanks
45.

Jason Bartholme (June 23rd, 2007, 11:53 am)

Great collection of resources! Since I go the new version of Dreamweaver, I have been playing around with Spry and got it to do some amazing things. I want to use some of these techniques on my existing sites to improve the user experience.
46.

Copes Flavio (June 23rd, 2007, 6:44 pm)

Great list, folks! Keep on moving!
47.

Titi (June 23rd, 2007, 8:39 pm)

Thank you so much for gathering this.
48.

Mahdi (June 24th, 2007, 4:33 am)

thanks a lot.grate list.
49.

Ikeris Sp. z o.o. (June 25th, 2007, 2:53 am)

Wow! Brillant list of ajax solutions. Good work.
50.

David G. Paul (June 26th, 2007, 5:43 pm)

i do quite like the styling of the first autocomplete - very cool

not a bad list either!
51.

yaramazadam (June 27th, 2007, 9:03 am)

great jobs I like it thanks
52.

Swede action (June 27th, 2007, 9:58 pm)

another gallery could be ajaxcompilation.com
53.

bododo (June 28th, 2007, 12:51 am)

well, good list here :) but you’re mixing visual effects with ajax. it’s not because that shows, flips or dances that it’s ajax
54.

Chandrakant (June 28th, 2007, 3:54 pm)

Ajax is a fast method
55.

Preetul (June 28th, 2007, 5:01 pm)

Ajax is my preferred choice when it comes to web designing.

Besides, thanx for the same

Grt listing.
56.

Amir Asjodi (July 5th, 2007, 7:13 pm)

WOW ! these are the best ! tnx
57.

Jayaprakash (July 5th, 2007, 9:18 pm)

Great one.. I just started with AJAX.. Found it much useful!!.. Thanks
58.

شبکه کالاي ايران (July 10th, 2007, 2:28 am)

Ajax is my LOVE
do u know? ;-)
59.

tapin13 (July 10th, 2007, 8:38 pm)

yea, nice article, but this form THIS add comment form not on ajax, and if you don’t feel nothing, make error:
“WordPress

Error: please fill the required fields (name, email).”
60.

AntonLyapunov (July 13th, 2007, 1:34 pm)

This is awesome! Dude, it’s great!
61.

XLMedya (July 14th, 2007, 11:32 pm)

Thanks guys, very good tools..
62.

Shams karamat (July 17th, 2007, 2:58 am)

Its simply unbelivable. Its the best help.

Thanks A Lot
63.

nicolas (July 27th, 2007, 3:36 pm)

Link [www.ajaxlookup.com], Free and instantly checks domain name availability and see whois detail. Pretty cool stuff! …
64.

Mojo (July 28th, 2007, 2:07 am)

Nice list, as much as love preparing my own code and hate eating precooked code, it doesnt hurt to learn from others. How many times have you tried writing something only to find out after 2 days of coding the exact same code is written already. That’s the biggest problem with JavaScript, the fact that it is not centrally packaged and lacks a development facade. Prototype tried to fix that, but now there are tons of farmeworks out there all trying to compete with each other, which basically defeats the whole purpose of using a framework. Just my 2 cents.
65.

Victor Kuriashkin (August 8th, 2007, 8:28 pm)

Thank U very much. Cool!
66.

shankar aswal (August 12th, 2007, 2:21 pm)

Absolutely a great list!

this a very very useful scripts ………

thanx a lot buddy…..
67.

Lorna (August 24th, 2007, 9:25 am)

Wow, this is a gem! Thanks for putting this list up.
68.

Naveed Ahmad (August 27th, 2007, 2:45 pm)

Very cool stuff!! I liked it.. Keep up the good work!!

Have fun
Cheers.
69.

Jose Daniel (September 5th, 2007, 7:19 am)

Excellent!!!!
70.

irfan (September 13th, 2007, 5:06 pm)

Wow, so much list. I refer your post in my blog.
71.

ahmad (September 16th, 2007, 7:10 am)

Is’s perfect.
Thanx a lot.
72.

Starfeeder (September 18th, 2007, 1:31 pm)

whoa thats a lot of trackbacks, nice ajax scripts :)
73.

Jason (September 22nd, 2007, 4:41 am)

Thanks, iv used a few of the forms listed here in my site and they make it look so much better
74.

Sulman Bhatti (October 9th, 2007, 8:23 am)

This is an amazing resource! Thanks for compiling this; I can definitely see some potential uses for my website.
75.

zhiqiang (October 16th, 2007, 9:32 pm)

Sometimes, too many choice makes making dicision harder.
76.

Reza (October 17th, 2007, 8:48 pm)

Really some wonderful tips which helps me a lot. I love them much.
Hope we can get more coding like these in future.
77.

Gautam (October 18th, 2007, 9:29 pm)

The list looks good. Will let you know when I use it
78.

amr tam (October 19th, 2007, 10:31 pm)

nice list .. keeep on
79.

Webber (October 22nd, 2007, 8:49 pm)

Quiet nice. Could use some of these.
80.

Webee (October 24th, 2007, 11:44 pm)

Thanks for the wonderful AJAX list
81.

Walleq (October 26th, 2007, 4:49 pm)

Very Thanx. Nice Ajax collection.
82.

mark (November 8th, 2007, 12:26 am)

Wow, what a fantastic array of apps, have already deployed the flash charts/js on a client site and boy are they happy.

Thanks for sharing

M
83.

Robert (November 11th, 2007, 4:55 am)

Thx for this useful Ajax resourse. Good content.
84.

Matty (November 12th, 2007, 10:49 am)

Great list, another good one is Link [www.miniajax.com]
85.

haass (November 12th, 2007, 9:07 pm)

very usefull.thanks..
86.

d7oom (November 25th, 2007, 2:01 am)

thanx for this examples
87.

Kasun Kaushalya (December 4th, 2007, 3:16 pm)

Thank You Again and Again , Knowledge cant measure using Money
88.

aldee (December 4th, 2007, 7:49 pm)

thank for the site. Very usefull though example of organizing flicr like image streams would be appreciated
89.

Jeetlo (December 6th, 2007, 2:12 pm)

Thanx for such good examples
90.

geciktirici (December 8th, 2007, 6:22 am)

Really some wonderful tips which helps me a lot.
91.

kotesh (December 14th, 2007, 1:55 am)

very useful information thanks a lot
92.

Eric (December 30th, 2007, 7:06 am)

Great archive of ajax scripts. I’m going to bookmark this page!! thank you!
93.

daxianjin (January 7th, 2008, 7:15 pm)

If you’re an AJAX novice and are defied by AJAX, then you may want to try AJAX Webshop because it features IDE and visualization and allows beginners to develop Rich Web applications quickly. Let’s look at some of its features:

Based on standard component library it allows Ajax IDE in the pattern of rapid application development (RAD)

Integrated development and management tools are available. Easy-to-use visual Unified Modeling Language and visual IDE; complete component and object-oriented development pattern

Rich Web component library

Troubleshooting IntelliSense support, code editing support, project release and deployment support.

Java, PHP, C#, VB support

Compatible with IE, Firefox
94.

Reddy Prasad (January 9th, 2008, 6:35 am)

Yaa man,
you got it all right.
This is the way to give the tutos.

Thank you so much,
Keep it up,

Thanks & Regards,
Reddy Prasad
95.

xsir (January 23rd, 2008, 3:55 am)

I will use these scripts thank you
96.

Afanasyev Design (January 25th, 2008, 1:18 am)

Nice scripts, thanks!
97.

Landaone (February 12th, 2008, 12:22 pm)

the best List excellent …………
98.

http://www.live-tutorials.com (February 20th, 2008, 6:08 pm)

This is an amazing listing and one I can learn from.
This website also has some good ajax tutorials Link [www.live-tutorials.com]
99.

moh. imansyah (February 25th, 2008, 11:29 pm)

very nice list, hip hip hura … ajax top buanget
–ajax new comer
100.

Junni (February 26th, 2008, 12:42 am)

I’m using autocomplete in a movie-application, but it’s nice to see good alternatives
101.

Aneesh Vincent (February 26th, 2008, 6:54 am)

Very useful contents. We now hiring nearly 40 programmers who has experience in ajax. Send your resume or vist our site Link [www.netlifecareer.com]
102.

Web Pixy (February 27th, 2008, 3:11 am)

What an amazing list of AJAX solutions! Thank you so much! I will definitely use great number of these for my projects:)
103.

Alex Eman (March 4th, 2008, 4:22 pm)

Man I owe you one!

x
104.

okan (March 7th, 2008, 2:49 pm)

good list. thanks all.
105.

Peter (March 12th, 2008, 9:13 am)

I just wanted to give a shout to Smashing for always providing amazing resources for developers. I have used this site to help “teach” some of the print designers I work with how to design for web. Great stuff, and because of it we just launched a new site focused on entrepreneurship and startups in New Orleans, check it out Startup New Orleans
106.

Stoian Adrian (March 14th, 2008, 5:20 pm)

Great article about using ajax scripts. This page is allready bookmarked, Thanks !
107.

reduction (March 17th, 2008, 12:29 pm)

Whouaaaouh thanks for this 80 ajax code links :)
108.

Jordan (April 1st, 2008, 8:15 am)

This post has guided me with so many projects! Its a great reference and allowance to build upon the tutorials and examples! Thanks for a great post.
109.

ardomanish (April 3rd, 2008, 6:37 am)

aowwwwwwwwwwwwwwwwwwwwwwwwww thanks boy , very goooooood
110.

Oscar (April 7th, 2008, 10:50 pm)

WOOW ) Beauty Ajax collections. U R KINK my friend:D [ from hungary ] bye…
111.

krishna (April 10th, 2008, 3:57 am)

wat a site………i have no words to thank u……..really ver very help