Page History

...

I'd like to see improved Ajax support in Click 2.2.0, especially around the area of reusable Ajax controls. Currently it It is not currently possible to create Ajax aware such controls.

There are a number of ways we can approaches to improve Ajax support, so I'd like to capture some proposals for further discussion. It might be worth integrating more than one proposal in the final solutionve come up with a list of proposals to stimulate further discussion. A final solution could combine some of the proposals.

I'll use jQuery where client-side JavaScript is required to convey a concept.

Client Side Support

There are two sides to Ajax support, the client side HTML markup and JavaScript code to initiate the Ajax request, and the server side support, to handle the request and return a partial response.

In this document I won't go into great detail of the client-side support necessary. Instead I'll and will instead focus on the server side support.

Client Side

But lets quickly look at the JavaScript code necessary to initiate an Ajax request. Below is a simple client-side example I'll use to convey the proposals for server-side supportto initiate an Ajax request when a link is clicked.

<a id="mylink" href="my-page.htm">Click Me</a>

<div id="target">Update Me</div>

...

This example is fairly simple and self-explanatory, but lets quickly highlight the main parts.

$('#mylink').bind('click', function(event)

jQuery provides a bind function which allows us to add an event handler to an HTML element. The bind function consists of three parts. First you specify a CSS selector which selects the HTML elements to perform the bind operation on. In this example the CSS selector is the ID of the link we want to bind. Then you specify which event to bind to. In the example above this is the 'click' event. Lastly you specify the function to invoke when the event is triggered. (jQuery's bind is synonymous to JavaScript's addEventListener (attachEvent in IE). Another way to bind is to specify the event handler as an HTML element attribute (<a onclick="success" href="...">Click me!</a>))

The jQuery bind function allows one to bind multiple HTML elements and events to the same function:

$('#mylink').bind('click', clickFunction(event)
$('#mylink').bind('hover', hoverFunction(event)
$('#mybutton').bind('click', clickFunction(event)

So from Click's perspective, it needs to render this bind statement along with the JavaScript function that will be invoked when the event is performed.

For client side support, I suggest we keep JavaScript / Ajax functions in Velocity templates instead of wrapping it in a Java API. By hosting the JavaScript it in a template we can immediately see changes to the template, no compilation or redeploy step is required. This also allows Click's Ajax support to be fairly transparent and enables users to easily customize the templates for their own needs.

Next I'll cover the proposals to handle the Ajax request and response on the server-side.

...