80+ AJAX-Solutions For Professional Coding
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
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
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 pmThanks again.
Great, eh HUGE list!Sergey
June 20th, 2007 9:59 pmwhy promote ajaxrain who has stolen miniajax.com’s design?
Ryan Scherf
June 20th, 2007 10:01 pmThis is a great list. How about some self promotion with my Search Suggest script: http://www.ryanscherf.net/demos/suggest/. I also have another version which loads from a XML flatfile as well as JS Arrays.
Tim
June 20th, 2007 10:10 pmWhy promote ajaxrain.com who has stolen miniajax.com’s design?
Peter
June 20th, 2007 10:16 pmSweet stuff! Way to go Smashing Magazine.
EA
June 20th, 2007 10:32 pmThanks, awesome list.
danny
June 20th, 2007 11:58 pmThanks! you are the best!!!!
alam
June 21st, 2007 12:04 amgreat, I try to combine that with codeigniter for our new project.
thank you very much
Luke
June 21st, 2007 12:14 amgreat list once again guys. I have been looking for a smart edit in place thingy for yonks! :)
Ad
June 21st, 2007 12:48 amGreat resource here – you just saved me and my team abt a week’s worth of research!
Vivek
June 21st, 2007 1:57 amNice and outstanding list. I can use few goodies in upcoming project.
Jonathan Schemoul
June 21st, 2007 2:04 amI 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 amWhere are your best websites of May?
:*(
Cathy
June 21st, 2007 3:03 amAjax is my preferred choice when it comes to web designing.
Cathy
psychic readings
June 21st, 2007 3:51 aminteresting thanks
Anatoly
June 21st, 2007 4:30 amPretty useful, thanks.
BTW, just saw another fancy script — prompt() alternative. Uses transparent background (like Lightbox) and works in IE7 (which dropped support for standard prompt() function).
dreamfalcon
June 21st, 2007 4:36 amgreat resource of tools
Thx ;)
Grin
June 21st, 2007 5:43 amvery useful, thanks a lot =)
Matty
June 21st, 2007 6:06 amBloody Ripper! These are excellent! Thank you so much!
Ash Haque
June 21st, 2007 6:39 amAs always, another great list!
Jarand
June 21st, 2007 6:40 amSo 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 amNice and outstanding list. I can use few goodies in upcoming project.
Darren
June 21st, 2007 7:43 amWow 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 amany suggestions for a quiz using AJAX?
Michael Krotchie
June 21st, 2007 8:47 amGreat list guys, will definitely have to roll some of these nifty tips into my site.
faizan
June 21st, 2007 11:41 amthank you bro another great list as usual. :)
philldo
June 21st, 2007 12:18 pmGreat 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.
Brendon Kozlowski
June 20th, 2007 9:51 pmSince SyntaxHighlighter is linked, 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).
Nick
June 21st, 2007 1:52 pmSmashingmagazine is my bible. There lists are very exhaustive.
Keep up the good work.
Mrg
June 21st, 2007 2:43 pmHi, thanks for this great list, one suggestion: could you add also the library in which the effect is based? (when it applies, for example, http://prototype-window.xilinus.com/ obviusly is based in prototype…)
Iwan Tri W
June 21st, 2007 4:58 pmVery great resources. It’s very useful for me (beginner). I must be others user feel it too.
Florentin
June 21st, 2007 6:03 pmYou might want to include 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 pmwhat to say…. again a great list. thanks for your effort
prego
June 21st, 2007 7:17 pmUh, 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)…
http://jquery.com/
http://interface.eyecon.ro/
Besides that – great list, thnx :)
Adam
June 21st, 2007 7:58 pmFantastic post – very helpful as always ..
Stian Solberg
June 21st, 2007 8:36 pmAbsolutely 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!
Ajax Controls for ASP.NET here
sandeep
June 22nd, 2007 1:56 amFantastic post very helpful……
Andre
June 22nd, 2007 4:04 amReally amazing list. Thank you for the awesome tipps!
Motorcycle Guy
June 22nd, 2007 5:55 amThe 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 pmIt’s really cool, thanks
Jason Bartholme
June 23rd, 2007 11:53 amGreat 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 pmGreat list, folks! Keep on moving!
Titi
June 23rd, 2007 8:39 pmThank you so much for gathering this.
Mahdi
June 24th, 2007 4:33 amthanks a lot.grate list.
Ikeris Sp. z o.o.
June 25th, 2007 2:53 amWow! Brillant list of ajax solutions. Good work.
David G. Paul
June 26th, 2007 5:43 pmi do quite like the styling of the first autocomplete – very cool
not a bad list either!
yaramazadam
June 27th, 2007 9:03 amgreat jobs I like it thanks
Swede action
June 27th, 2007 9:58 pmanother gallery could be ajaxcompilation.com
bododo
June 28th, 2007 12:51 amwell, 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 pmAjax is a fast method
Preetul
June 28th, 2007 5:01 pmAjax is my preferred choice when it comes to web designing.
Besides, thanx for the same
Grt listing.
Amir Asjodi
July 5th, 2007 7:13 pmWOW ! these are the best ! tnx
Jayaprakash
July 5th, 2007 9:18 pmGreat one.. I just started with AJAX.. Found it much useful!!.. Thanks
شبکه کالاي ايران
July 10th, 2007 2:28 amAjax is my LOVE
do u know? ;-)
tapin13
July 10th, 2007 8:38 pmyea, 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 pmThis is awesome! Dude, it’s great!
XLMedya
July 14th, 2007 11:32 pmThanks guys, very good tools..
Shams karamat
July 17th, 2007 2:58 amIts simply unbelivable. Its the best help.
Thanks A Lot
Mojo
July 28th, 2007 2:07 amNice 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 pmThank U very much. Cool!
shankar aswal
August 12th, 2007 2:21 pmAbsolutely a great list!
this a very very useful scripts ………
thanx a lot buddy…..
Lorna
August 24th, 2007 9:25 amWow, this is a gem! Thanks for putting this list up.
Naveed Ahmad
August 27th, 2007 2:45 pmVery cool stuff!! I liked it.. Keep up the good work!!
Have fun
Cheers.
Jose Daniel
September 5th, 2007 7:19 amExcellent!!!!
irfan
September 13th, 2007 5:06 pmWow, so much list. I refer your post in my blog.
ahmad
September 16th, 2007 7:10 amIs’s perfect.
Thanx a lot.
Starfeeder
September 18th, 2007 1:31 pmwhoa thats a lot of trackbacks, nice ajax scripts :)
Jason
September 22nd, 2007 4:41 amThanks, 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 amThis is an amazing resource! Thanks for compiling this; I can definitely see some potential uses for my website.
zhiqiang
October 16th, 2007 9:32 pmSometimes, too many choice makes making dicision harder.
Reza
October 17th, 2007 8:48 pmReally 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 pmThe list looks good. Will let you know when I use it
amr tam
October 19th, 2007 10:31 pmnice list .. keeep on
Webber
October 22nd, 2007 8:49 pmQuiet nice. Could use some of these.
Webee
October 24th, 2007 11:44 pmThanks for the wonderful AJAX list
Walleq
October 26th, 2007 4:49 pmVery Thanx. Nice Ajax collection.
mark
November 8th, 2007 12:26 amWow, 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 amThx for this useful Ajax resourse. Good content.
Matty
November 12th, 2007 10:49 amGreat list, another good one is http://www.miniajax.com
haass
November 12th, 2007 9:07 pmvery usefull.thanks..
d7oom
November 25th, 2007 2:01 amthanx for this examples
Kasun Kaushalya
December 4th, 2007 3:16 pmThank You Again and Again , Knowledge cant measure using Money
aldee
December 4th, 2007 7:49 pmthank for the site. Very usefull though example of organizing flicr like image streams would be appreciated
Jeetlo
December 6th, 2007 2:12 pmThanx for such good examples
geciktirici
December 8th, 2007 6:22 amReally some wonderful tips which helps me a lot.
kotesh
December 14th, 2007 1:55 amvery useful information thanks a lot
Eric
December 30th, 2007 7:06 amGreat archive of ajax scripts. I’m going to bookmark this page!! thank you!
daxianjin
January 7th, 2008 7:15 pmIf 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 amYaa 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 amI will use these scripts thank you
Afanasyev Design
January 25th, 2008 1:18 amNice scripts, thanks!
Landaone
February 12th, 2008 12:22 pmthe best List excellent …………
moh. imansyah
February 25th, 2008 11:29 pmvery nice list, hip hip hura … ajax top buanget
–ajax new comer
Junni
February 26th, 2008 12:42 amI’m using autocomplete in a movie-application, but it’s nice to see good alternatives
Web Pixy
February 27th, 2008 3:11 amWhat 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 pmMan I owe you one!
x
okan
March 7th, 2008 2:49 pmgood list. thanks all.
Peter
March 12th, 2008 9:13 amI 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 pmGreat article about using ajax scripts. This page is allready bookmarked, Thanks !
reduction
March 17th, 2008 12:29 pmWhouaaaouh thanks for this 80 ajax code links :)
Jordan
April 1st, 2008 8:15 amThis 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 amaowwwwwwwwwwwwwwwwwwwwwwwwww thanks boy , very goooooood
Oscar
April 7th, 2008 10:50 pmWOOW ) Beauty Ajax collections. U R KINK my friend:D [ from hungary ] bye…
krishna
April 10th, 2008 3:57 amwat a site………i have no words to thank u……..really ver very help ful
Nyingchi
April 18th, 2008 12:49 amAmazing 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 pmThanks, collection!
fahad_se
May 1st, 2008 11:26 pmnot 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 pmvery nice!
Justin Meyer
June 10th, 2008 10:04 pmWhat about JavaScriptMVC. It’s the best way to organize all your Ajax functionality.
bharathi
June 10th, 2008 10:49 pmExcellent Article.. amazing..
John
July 16th, 2008 4:55 pmuse your list very oftern, really nice and useful.
Cosmi
August 11th, 2008 5:09 amThanks for this list !
anil kumar
August 17th, 2008 10:49 pmtoo good scripts
welldone
Ashiq Mustafa
September 7th, 2008 10:43 pmvery exellent functions
Julius Pewu
September 27th, 2008 2:28 pmNice stuffs. Keep it up
amit sidhpura
September 28th, 2008 5:06 amThanks for this excellent resource……very helpful…….
Aperta
October 19th, 2008 10:12 amKeep Up!
Nemesis
November 9th, 2008 10:24 amnice resources available here keep up the good work
abuzed
November 12th, 2008 4:26 amthanks to all !!! really nice
Ivan
November 18th, 2008 9:20 amOne more addition to your great list:
DHTMLX Toolkit – a JavaScript library of more than UI 15 components, among which full-featured datagrid, tree menu, and layout control that allows developers to combine all the components into a common user interface. DHTMLX is available under both GNU GPL and commercial licenses.
Tihuta
December 13th, 2008 4:22 pmVery great resources :*
anbu
December 15th, 2008 1:45 amfor me this is first time seeing ajax in net .its nice experience 4 me
JohnF
December 16th, 2008 12:55 amCool collection. I think JustAjax Table justajax.com would be a great addition to your “AJAX Grids, Tables” section. Look at demo here http://justajax.com/table/demo.html
inder jeet sigh
December 23rd, 2008 12:05 amGood stuff man but i think its better to put them all in one Rapidshare link and share for All.
:)
Morth Zilwer
December 29th, 2008 4:13 pmGreat list of Ajax examples at: http://www.ajaxbasics.com
Yuvraaj
January 3rd, 2009 2:27 amGood stuff. The folder creation could have been much better.
pelaoec
January 24th, 2009 5:51 pmburtal la lista, creo que voy usar uno que otro código de esta página :D
Karl
January 27th, 2009 12:50 amYou guys are great! :D
nice
January 30th, 2009 12:47 pmThanks! Good work…
Burçlar
February 6th, 2009 7:18 amhow i can say its really great job. thank you smash magazine you are number 1
Ashwini
February 11th, 2009 3:26 amReally very exiciting ….
Adams
March 3rd, 2009 6:16 pmReally great works,they are very interesting.I like those things,and I will study the jquery.thanks for your sharing.
Manish Jaiswal
March 20th, 2009 4:56 amGreat great work…nice collection..!!!
Thanx a lot..
Solexy
March 21st, 2009 11:21 pmnice list, thx
George Serradinho
April 22nd, 2009 9:40 amI’m no pro, but thanks for sharing this info.
It’s nice to see how the pro’s do it.
Sarosh K Durrani
May 19th, 2009 10:18 pmVery awesome
dendy b sulistyo
May 28th, 2009 5:37 amawweesoome!
but..
toooo much information on my brain :D
Faisal Ahmed Qureshi
June 16th, 2009 8:03 pmVery Nice
NotAlame
July 18th, 2009 1:07 amhelpful… thanks a lot!!!
Adams
July 21st, 2009 6:53 pmoh,very cool,it is really a good collection of Ajax code.I like it.I will add it to my favorite,and study them all.Thank a lot.
malcom
September 15th, 2009 11:11 amamazing list! :D
Aros
September 22nd, 2009 2:43 amSuper stuff thx
zmoerf
October 3rd, 2009 4:09 ami like fusionchart for build ajax chart u can see this tutorial : http://www.ajax-tutorial.net/
FXY
October 15th, 2009 1:40 amMantap,,,,
Epsylon
October 15th, 2009 2:16 pmthanks muchly,
a lot of them were really useful for me
r4
October 27th, 2009 1:55 amr4:: the list is awesome…. but the point is…. how to implement it? I mean it seems interesting to find out how it works as a fresher….. keep posting. Will be visiting back soon.
вава
December 7th, 2009 8:01 amsdsd
Dinesh Babariya
January 25th, 2010 5:59 amthis site is very cool help me a lot i love dinesh give 100 star…:)
Asd
February 19th, 2010 11:53 pmWebmaster Sitesi ClassTurk.NeT
sekar
June 7th, 2010 12:49 amMuch thanks
Daniel
August 12th, 2010 6:35 amSuper Zusammenstellung danke
von ur-werbung-bremen.de
yasamphani
August 16th, 2010 8:56 amthis site is very cool….!!!!
jarix
September 10th, 2010 7:03 amcooooooooooooooooool
Lucas
September 28th, 2010 5:24 pmhere you have a great site with a lot of scripts
http://www.ajaxshake.com