This blog is moved to http://webonrails.com

This blog is moved to http://webonrails.com

JotSpot.com

JotSpot Live allows you, your colleagues or clients to take notes together on the same web page at the same time. Imagine everyone simultaneously typing and editing the same Microsoft Word document and you'll get the idea.
visit jotspot.com

Ajazz: Asynchronous Data Objects in Javascript

Ajazz is a Javascript library which implements client-side data types in JavaScript whose contents are transfered from the Web server asynchronously, using AJAX techniques. In addition to the data structures themselves (trees, arrays, etc.), it provides infrastructure for managing multiple AJAX requests in flight, parsing data structures from XML responses, and other utilities. Server-side tools and examples in Perl are also provided.

Ajazz is a very new project but you can already preview its version 0.1.0 which support currently the high-level data types trees and arrays of arbitrary objects (partly done), and come with eight support modules Utils, BitVector, TimedThing, MessageLog, FakeMessageLog, Listener, Request and Response. Ajazz is released under a BSD license, Samples and documentation are available, for more information http://cluefactory.com/oss/Ajazz/

DOMReady: New Extension to Prototype

DOMReady is a new extension to Prototype that allows you to attach one or more functions that will be executed as soon as the DOM is ready to work with. This will not wait for images or other assets to load like window.onload does.

Here’s the script: domready.js

To use it simply add a script tag after your prototype.js script tag or append the code to the bottom of prototype.js.

Then, to execute a function when the DOM is ready:

Event.onDOMReady(function() {
 // Stuff here!
});

You can call the function repeated times to add more functions to be triggered if you need to.

Easy AJAX inline text edit 2.0

As everybody knows, refreshing pages is now a history. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button(need not to refresh page).

That ain’t new at all!,but all of this has been made easy to use and implement.

Example page: inline edit (no JS knowledge needed) [source] | Inline example: Please edit me!

how you can make it work (5 easy steps for integration)

• Download this Javascript file: InstantEdit 2.0 JS


• Create a update file that handles the input. For example this PHP: Update File


• In your page add the javascript: <script type="text/javascript" src="instantedit.js"></script>


• Set fixed vars (like hidden elements in a field post). These will be
  posted with the editable field so you can identify a user/session.
  
  
  <script type="text/javascript">
  
  setVarsForm("pageID=profileEdit&userID=11");
  
  </script>
  
  
  


• Last step: in your HTML for any editable field add a SPAN arround it:
  
  

  <span id="userName" class="editText">John Doe</span>
  
  
  Note: id is the fieldname (?userName=John Doe&), and should be unique!
  

You’re done! Tell you friends

Google Web Toolkit - Build AJAX apps in the Java language

Using AJAX you can make you application more intractive, but Ajax development often complicated. Developers have to spent much time working with browser quirks.

That's why Google bringing you Google Web Toolkit. GWT is a new publicly available software development tool that makes creating AJAX applications much easier. With GWT, you can develop and debug your own AJAX applications in Java code using the Java development tools of your choice. When you deploy your application to production, the GWT compiler simply translates your Java application to browser-compliant JavaScript and HTML.

To know more about it check Google Code .

XAJAX: A open source PHP Class Library

XAJAX is a open source PHP class library to create AJAX enabled web applications. This is very simple toolkit, which works with any version of PHP and can run on Apache/IIS.

There are many PHP libraries available on the internet but I personally think XAJAX is the best. I have used this library in many of my projects. In my two projects http://vinsol.com/vcart and http://www.buzztopix.com this library is used very heavily.

This works fine with Internet Explorer and Mozilla Firefox( I have tested). Probably may works with other browsers.

Two features I like most are:

• You can dynamically send javascript and execute to update element attribute.


• You can use easily this library with Smarty PHP template engine.

To know more about and download latest version please visits http://www.xajaxproject.org/.

JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) is a data exchange format that’s becoming increasingly popular among the AJAX crowd. Many Ajax applications use JSON instead of XML to communicate with server, hence called AJAJ(Asynchronous javascript and JSON).

JSON has two advantages over XML when it comes to receiving data in JavaScript. First, with JSON, there’s no manual parsing necessary. JSON objects are typed: values are either strings, numbers, arrays, boolean, object, or null. Compare this to XML, which is typeless; all element values are strings. This loss of types means added complexity when trying to interpret the values within the XML; you have to adopt some sort of layer on top of XML (such as the W3C XML Schema typing system) to impose types on XML. And, chances are, unless you invent your own typing system to use with XML, you’ll have yet another layer of complexity as the type system is likely to be an imperfect fit with JavaScript’s own type system.

Second, JSON frees you from having to parse data. If you’ve spent too many days writing mind-numbing DOM code, you’ll appreciate this advantage. Your application data is readily accessible as objects, so retrieving values is as easy as reading from an object property or invoking
a function.

Example:
Data like this:

name: Steve

address:

street: 2323 Foobar Lane

city: Seattle

state: WA

zip: 98911

Data in JSON

{ name: “Steve”,
address: {
street: “2323 Foobar Lane”,
city: “Seattle”,
state: “WA”,
zip: 98911
}
}

This JSON data can be loaded in javascript object by eval() function

Var data = evel(xmlobject.responseText);

And the address is now accessible as data.address.city


It’s a simple, lightweight data format that’s extremely easy to produce and consume from the environments in which web developers work. The protocol overhead of JSON is significantly smaller than the corresponding XML

Let me start...

The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML,JSON and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of “Web 2.0.”

http://www.webpasties.com/xmlHttpRequest/ may help in learning Ajax.