MiniAjax.com

This whole course is pretty much an AJAX course, so when I was browsing the Web the other day and came across an AJAX website, I couldn't help but stop and look at it. Although I've been exposed to AJAX prior to this class, the huge emphasis this class places on AJAX draws my attention to it even more now whenever I read about it or hear it mentioned. The site I found is called MiniAjax.com and it is essentially a compilation of a bunch of really neat and powerful AJAX applications or websites.



MiniAjax.com covers things ranging from iPhone-styled checkboxes, page peels (like the ones normally only done using flash), a slide down login interface (like the one Twitter uses), timelines, galleries, an upload progress bar, and many more cool AJAX things. The two things I found most interesting that you guys may enjoy as well is one called "f4a" and another one called "edit-in-place." These two stuck out to me the most because I've never seen anything like them before (at least I hadn't before our class last week).

Last week, we talked about pass-throughs/proxies in order call things from other servers. The "f4a" accesses other servers with flash. We aren't using flash in our class, but when flash is being used and you want to grab a file from a different server via AJAX, this application does exactly what you need.



As you can see on the demo page, entering a GET request to flickr (using http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&api_key=7daa991fe49c16ebe7f637fb2ebc57b2) brings back the xml response similar to what we saw from Professor Drake's call to blogger in his application. The different uses for this seem pretty neat, and the main pages of the site talk about it in greater detail if you're interested.

The "edit-in-place" application posted on MiniAjax.com intrigued me even more. As you can see from the demo, once this code is implemented, any of the content on the page can be edited by simply clicking it. Once the content is clicked that section becomes editable and upon further integration, a save button could be implemented to save the changes on the page. The portions of the page which can be edited are declared by simply assigning the class "editText" to them. Any section that doesn't have this class, is not editable, so it has no onclick event to change the content. I suggested adding a save button on the page to submit the changes, but another option that is suggested by the original developer is to simply make the XMLHttpRequest once the section in focus becomes blurred (onblur). The best part about this application, is that it can be implemented onto your site in 5 easy steps.

-Download the Javascript file hosted here
-Create an update file that handles the input
-Add the following javascript into your page:
-Set fixed vars:
-And finally, in your HTML add the class "editText" to any field you want to be editable