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 | 327 Comments
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
4. Ajax autosuggest/autocomplete from database
AJAX Instant Edit
7. AJAX & CSS Flickr-like Editing Fields
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
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
22. Ajax poller
AJAX Developer’s Suite
23. AJAX HistoryManager, Pagination
26. AJAX Tooltips: Nice Titles revised | Blog | 1976design.com
27. 40+ Tooltips Scripts With AJAX, JavaScript & CSS | Smashing Magazine
30. GMail Ajax Style Username Signup
31. Gmail Ajax Style Check Username
33. ModalBox — An easy way to create popups and wizards
34. AJAX File Uploads progress bar
36. Fly to basket
38. Disable form submit on enter keypress
Enhanced AJAX Solutions
39. AJAX Instant Completion: Rico Framework
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
49. Ajax.Form: mootools demo
51. Really easy field validation
52. AJAX fValidate: a high quality javascript form validation tool
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
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
Kai Müller (June 20th, 2007, 9:34 pm)
Thanks again.
Great, eh HUGE list!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).
Sergey (June 20th, 2007, 9:59 pm)
why promote ajaxrain who has stolen miniajax.com’s design?
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.
Tim (June 20th, 2007, 10:10 pm)
Why promote ajaxrain.com who has stolen miniajax.com’s design?
Peter (June 20th, 2007, 10:16 pm)
Sweet stuff! Way to go Smashing Magazine.
BlogHash.com (June 20th, 2007, 10:24 pm)
Excellent list! Thanks for putting it up together.
EA (June 20th, 2007, 10:32 pm)
Thanks, awesome list.
danny (June 20th, 2007, 11:58 pm)
Thanks! you are the best!!!!
alam (June 21st, 2007, 12:04 am)
great, I try to combine that with codeigniter for our new project.
thank you very much
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! :)
Ad (June 21st, 2007, 12:48 am)
Great resource here - you just saved me and my team abt a week’s worth of research!
Vivek (June 21st, 2007, 1:57 am)
Nice and outstanding list. I can use few goodies in upcoming project.
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 !
Moula (June 21st, 2007, 2:51 am)
Where are your best websites of May?
:*(
Cathy (June 21st, 2007, 3:03 am)
Ajax is my preferred choice when it comes to web designing.
Cathy
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]
psychic readings (June 21st, 2007, 3:51 am)
interesting thanks
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).
dreamfalcon (June 21st, 2007, 4:36 am)
great resource of tools
Thx ;)
Grin (June 21st, 2007, 5:43 am)
very useful, thanks a lot =)
Matty (June 21st, 2007, 6:06 am)
Bloody Ripper! These are excellent! Thank you so much!
Ash Haque (June 21st, 2007, 6:39 am)
As always, another great list!
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!
Le Tung Lam (June 21st, 2007, 7:07 am)
Nice and outstanding list. I can use few goodies in upcoming project.
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.
jhonny (June 21st, 2007, 8:36 am)
any suggestions for a quiz using AJAX?
Michael Krotchie (June 21st, 2007, 8:47 am)
Great list guys, will definitely have to roll some of these nifty tips into my site.
faizan (June 21st, 2007, 11:41 am)
thank you bro another great list as usual. :)
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.
Nick (June 21st, 2007, 1:52 pm)
Smashingmagazine is my bible. There lists are very exhaustive.
Keep up the good work.
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…)
Sweb.ws (June 21st, 2007, 4:47 pm)
Thanks!! ;)
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.
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.
shashi arya (June 21st, 2007, 6:03 pm)
what to say…. again a great list. thanks for your effort
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 :)
Adam (June 21st, 2007, 7:58 pm)
Fantastic post - very helpful as always ..
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]
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.
sandeep (June 22nd, 2007, 1:56 am)
Fantastic post very helpful……
Andre (June 22nd, 2007, 4:04 am)
Really amazing list. Thank you for the awesome tipps!
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.
firnx (June 22nd, 2007, 5:24 pm)
It’s really cool, thanks
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.
Copes Flavio (June 23rd, 2007, 6:44 pm)
Great list, folks! Keep on moving!
Titi (June 23rd, 2007, 8:39 pm)
Thank you so much for gathering this.
Mahdi (June 24th, 2007, 4:33 am)
thanks a lot.grate list.
Ikeris Sp. z o.o. (June 25th, 2007, 2:53 am)
Wow! Brillant list of ajax solutions. Good work.
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!
yaramazadam (June 27th, 2007, 9:03 am)
great jobs I like it thanks
Swede action (June 27th, 2007, 9:58 pm)
another gallery could be ajaxcompilation.com
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
Chandrakant (June 28th, 2007, 3:54 pm)
Ajax is a fast method
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.
Amir Asjodi (July 5th, 2007, 7:13 pm)
WOW ! these are the best ! tnx
Jayaprakash (July 5th, 2007, 9:18 pm)
Great one.. I just started with AJAX.. Found it much useful!!.. Thanks
شبکه کالاي ايران (July 10th, 2007, 2:28 am)
Ajax is my LOVE
do u know? ;-)
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).”
AntonLyapunov (July 13th, 2007, 1:34 pm)
This is awesome! Dude, it’s great!
XLMedya (July 14th, 2007, 11:32 pm)
Thanks guys, very good tools..
Shams karamat (July 17th, 2007, 2:58 am)
Its simply unbelivable. Its the best help.
Thanks A Lot
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! …
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.
Victor Kuriashkin (August 8th, 2007, 8:28 pm)
Thank U very much. Cool!
shankar aswal (August 12th, 2007, 2:21 pm)
Absolutely a great list!
this a very very useful scripts ………
thanx a lot buddy…..
Lorna (August 24th, 2007, 9:25 am)
Wow, this is a gem! Thanks for putting this list up.
Naveed Ahmad (August 27th, 2007, 2:45 pm)
Very cool stuff!! I liked it.. Keep up the good work!!
Have fun
Cheers.
Jose Daniel (September 5th, 2007, 7:19 am)
Excellent!!!!
irfan (September 13th, 2007, 5:06 pm)
Wow, so much list. I refer your post in my blog.
ahmad (September 16th, 2007, 7:10 am)
Is’s perfect.
Thanx a lot.
Starfeeder (September 18th, 2007, 1:31 pm)
whoa thats a lot of trackbacks, nice ajax scripts :)
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
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.
zhiqiang (October 16th, 2007, 9:32 pm)
Sometimes, too many choice makes making dicision harder.
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.
Gautam (October 18th, 2007, 9:29 pm)
The list looks good. Will let you know when I use it
amr tam (October 19th, 2007, 10:31 pm)
nice list .. keeep on
Webber (October 22nd, 2007, 8:49 pm)
Quiet nice. Could use some of these.
Webee (October 24th, 2007, 11:44 pm)
Thanks for the wonderful AJAX list
Walleq (October 26th, 2007, 4:49 pm)
Very Thanx. Nice Ajax collection.
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
Robert (November 11th, 2007, 4:55 am)
Thx for this useful Ajax resourse. Good content.
Matty (November 12th, 2007, 10:49 am)
Great list, another good one is Link [www.miniajax.com]
haass (November 12th, 2007, 9:07 pm)
very usefull.thanks..
d7oom (November 25th, 2007, 2:01 am)
thanx for this examples
Kasun Kaushalya (December 4th, 2007, 3:16 pm)
Thank You Again and Again , Knowledge cant measure using Money
aldee (December 4th, 2007, 7:49 pm)
thank for the site. Very usefull though example of organizing flicr like image streams would be appreciated
Jeetlo (December 6th, 2007, 2:12 pm)
Thanx for such good examples
geciktirici (December 8th, 2007, 6:22 am)
Really some wonderful tips which helps me a lot.
kotesh (December 14th, 2007, 1:55 am)
very useful information thanks a lot
Eric (December 30th, 2007, 7:06 am)
Great archive of ajax scripts. I’m going to bookmark this page!! thank you!
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
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
xsir (January 23rd, 2008, 3:55 am)
I will use these scripts thank you
Afanasyev Design (January 25th, 2008, 1:18 am)
Nice scripts, thanks!
Landaone (February 12th, 2008, 12:22 pm)
the best List excellent …………
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]
moh. imansyah (February 25th, 2008, 11:29 pm)
very nice list, hip hip hura … ajax top buanget
–ajax new comer
Junni (February 26th, 2008, 12:42 am)
I’m using autocomplete in a movie-application, but it’s nice to see good alternatives
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]
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:)
Alex Eman (March 4th, 2008, 4:22 pm)
Man I owe you one!
x
okan (March 7th, 2008, 2:49 pm)
good list. thanks all.
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
Stoian Adrian (March 14th, 2008, 5:20 pm)
Great article about using ajax scripts. This page is allready bookmarked, Thanks !
reduction (March 17th, 2008, 12:29 pm)
Whouaaaouh thanks for this 80 ajax code links :)
ANDRY (March 19th, 2008, 12:49 am)
AJAX create JsHttpRequest Link [www.autoshipment.ru] demo
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.
ardomanish (April 3rd, 2008, 6:37 am)
aowwwwwwwwwwwwwwwwwwwwwwwwww thanks boy , very goooooood
Oscar (April 7th, 2008, 10:50 pm)
WOOW ) Beauty Ajax collections. U R KINK my friend:D [ from hungary ] bye…
krishna (April 10th, 2008, 3:57 am)
wat a site………i have no words to thank u……..really ver very help ful
Nyingchi (April 18th, 2008, 12:49 am)
Amazing techs! I found it so useful. I have to go back to my site and do some work now!
DuguXuexiao (April 19th, 2008, 7:16 pm)
Thanks, collection!
fahad_se (May 1st, 2008, 11:26 pm)
not bad
in fact helping links like this make me surprised because we wish to use everything in out project but again use one or two …
no doubt when we combine our efforts so produce such a marvelous thing
bagus (May 11th, 2008, 11:17 pm)
very nice!