The thing that was missing from the resources category on the site was this article, a collection of Ajax techniques, tips and tutorials. I hope this article will help the developers to learn or find some of the interesting features found here.
Ajax Fancy Captcha
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.
Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize (take a look at file structure for more information).
dhtmlxGrid allows easy implementation of nice looking (managed through css or predefined skins) DHTML tables with rich in-cell editing, fixed multiline headers/footers, resizable, sortable, and draggable columns, built-in filtering, searching, grouping and data validation capabilities. Numerous event handlers let you add necessary interactivity to grid-based interfaces. Smart Rendering technology and built-in paging support allow this datagrid component to work effectively with huge datasets. Even better performance is reached due to non-liner buffering used in paging functionality (since v1.6).
A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I’ll guide you through the process of building your own Buzz widget.
The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.
When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX.
This tutorial shows you how to use Ajax and a PHP proxy script to access del.icio.us Web APIs, all from a single “super page” that can be simulated as the home page to your Harry Potter book club. You’ll make this page publicly available on the Internet so that your book club can gain traction and attract new members (as an aside, you may want to make it registration-based so that you have control over who adds links to your club). The del.icio.us APIs make this possible by allowing developers to create custom applications that allow users (such as yourself and the members of your book club) to manage tags and bookmarks directly in the club’s del.icio.us account from the main club’s page, without having to stray off to del.icio.us first, or click on a button in the browser.
For security reasons, we cannot make cross-domain AJAX requests with jQuery. For example, I can’t call the load() method, and pass in ‘cnn.com’. As we’d be loading in scripts and such, as well as our desired content, this would present a significant security risk. Nonetheless, there may be times when this is specifically what you require. Thanks to YQL, we can allow for this functionality rather easily!
applications, here’s a really simple example how you can use Flash and AJAX together seamlessly within your applications. Yes, i said Flash, not Flex. In this example I created an ultra-lightweight ActionScript-only charting project that can be used within AJAX applications.
Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using WordPress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work
You’ve been to websites that use them, a nice little AJAX contact form. AJAX is a great way to submit data without a page refresh and is a great tool for certain elements of a website, such as a contact form. So how do we go about doing so? Today, we will take it step by step and build your first AJAX and PHP contact form. We’ll be using jQuery and the popular email validation code found on google code (originally by AddedBytes) to help us out.
One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website. For example a community that use the service to manage their events, or to display your future trips in your blog ?
Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed fancy-pants technology. In an effort to help you take it up a notch, we’d like to share a method for helping your site anticipate a user’s next move.
On most sites, there are usually only a handful of options that can be done at any given moment and often some of these options are more likely than others. By determining what is important on each page, we can preload the data of the user’s next action and store it on the client with JSON. When the user decides to perform their next action, they’ll see their results almost instantly because the info was loaded in the background.
Ajax IM (“Ajax Instant Messenger”) is a browser-centric instant messaging framework. It uses AJAX to create a real-time (or near real-time) IM environment that can be used in conjunction with existing community and commercial software, or simply as a stand-alone product.
I originally saw a version of this concept on Quirksmode and then a more Web 2.0-ish version on the 24 Ways site. I’m going to show you two ways that you could use jQuery to accomplish the same effect, or better.
In this tutorial, you’ll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we’ll also leverage the power of PHP so that you don’t even need a database!
This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested (speeding up delivery and saving on bandwidth.
This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an “IFRAME” mode, a “slideshow” mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. We got our inspiration for this script from Yahoo’s homepage, which employs such a concept to show news in an organized fashion.
In this week’s video tutorial, I’ll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.
In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.
ConvincingMail AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup list to display items that returend by the webservice for the prefix typed into the textbox.
Recently, Twitter rolled out a great new feature on their site – lists. You can now create and compile a list of twitter users and make it easier for others to follow all at once.
Also, at the same time, they expanded their API to include list management functionality. This allows us to use these new tools to create a widget that flips lists the other way around – a fan page you can put in your sidebar, that allows your visitors to fill in their twitter name and join a specially crafted fan list in your twitter account.
Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.
When it comes to spam, hardly anything’s worse than an insecure contact form. Imagine getting a nasty note from your web hosting company that your site has been used to send out massive amounts of email about black market erection medication and, oh by the way, your site is offline until you get it fixed – thank you very much.
So what I’m going to show you today is a simple method for adding an extra layer of security to ANY contact form on your site – even if you don’t use my super secure and wonderfully flexible Ultimate Form Mail.
After working on a YUI TabView theme for the AjaxControlToolkit’s TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web. I was especially curious in seeing what it would take to include images in each of the tab panel header’s.
This article shows one way to use AJAX along with a series of images to create a secure CAPTCHA system. CAPTCHA is a way to tell humans and computers apart and is used all over the web, especially if you’re signing up for new email accounts.
Who doesn’t hate these long forms ? You fill each field in them and when you submit, it will return something like : ‘ SORRY BUT YOUR USERNAME IS ALREADY TAKEN ‘.
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more
This is a tutorial on how to make an Ajax powered shoutbox. As because it is an Ajax powered, there are no iframe involve and the update of the shoutbox content is almost instant.
The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options.
The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.
Where possible, creating Web applications — including Ajax-based applications — in a RESTful way avoids a large class of bugs. However, a pitfall of REST (REpresentational State Transfer) is sending duplicate data across similar XMLHttpRequests. This tip shows how the moderate use of session cookies can maintain just enough server-side state to significantly reduce client-server traffic, while still allowing fallback to cookie-free operation.
If you’ve spent any time coding an Ajax application you know that the one of the problems with Ajax is that it breaks the back button. You have probably seen solutions that use an iframe and a hash (#) in the url to fix this issue. While this works there is a much simpler way that I’ve been using in my applications for the last year or so.
The key is the A tag (also known as the anchor tag) and the name parameter with a hash in the url. The trick is to either dynamically create the element or to just change the value of the name parameter to the matching value of the hash.
Implementing AJAX technology can be a hit or miss thing. Do it well and you’ll have users raving over the slickness it provides to the general user experience while if you mess it up, you’ll be at the receiving end of their wrath. Here are 24 tips to guide you with implementing AJAX technology within your web application.
You may have noticed I’m using Stuart Langridge’s Nice Title script on this site. With the help of Ethan I’ve made a couple of modifications to the original version, so I thought I’d highlight them here and let you grab a copy if you wanted.
It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.
A pop-up window that doesn’t suck.
Max’s AJAX file uploader is a simple and easy to use script, which allows you to upload files to your webserver without reloading the current page. During the upload an animated progress bar is shown. The server side is written in PHP.
I believe you’ll find interesting and useful these articles too: