Using Ajax is super easy with Scooter. There is no jar file or plugins to download. Developers can either generate an Ajax app to start with or convert non-Ajax links and forms as described below.

Generate an Ajax-backed TODO list application

Assuming there is a model named entry in the ajaxtodo application, a complete Ajax application can be generated with the scaffold-ajax option as below:

> java -jar tools/generate.jar ajaxtodo scaffold-ajax entry

Then you can perform CRUD including Pagination on TODO entries (http://localhost:8080/ajaxtodo/entries) through AJAX.

See scooter/examples/ajaxtodo/readme.txt on github for an example.


Convert a non-Ajax link to an Ajax-backed link

Scooter supports Ajax through HTML5 style data-XXX elements. See example below:

Here is an example regular controller class.

package ajaxtodo.controllers;

import static com.scooterframework.web.controller.ActionControl.*;

public class TimeController extends ApplicationController {
    public String current() {
        String message = "The current time is: " + (new java.util.Date());
        return text(message);

Here is a regular non-Ajax link on a web page. We can put it on views/index.jsp. See scooter/examples/ajaxtodo/readme.txt for an example.

<a href="http://localhost:8080/ajaxtodo/time/current">Show Time</a>

Here is an ajax link on the same web page.

<a href="http://localhost:8080/ajaxtodo/time/current" data-ajax="true" data-target="#time">Show Time</a>

<div id="time">show time here</div>

As you can see, converting a regular non-Ajax link to Ajax-backed link is really simple: just add a few data-XXX properties.

Convert a non-Ajax form to an Ajax-backed form

Again we can add the same data-XXX properties to form tag. See example below:

Here is a regular non-Ajax form on a web page.

<form action="http://localhost:8080/ajaxtodo/time/current" method="GET">

Here is an Ajax-backed form on the same web page.

<form action="http://localhost:8080/ajaxtodo/time/current" method="GET" data-ajax="true" data-target="#time">

<div id="time">show time here</div>

Again, converting a regular non-Ajax form to Ajax-backed form is really simple: just add a few data-XXX properties.

Scooter's data-XXX properties

Scooter supports the following data-XXX properties.

data-ajax declare AJAX data-ajax="true" Y true both
data-confirm confirm message data-confirm="Are you sure?" N Link
data-method HTTP action type data-method="DELETE" N GET Link
data-target declare place where the response is displayed data-target="#time" N both
data-handler declare how the response should be handled. Valid values are after, append, before, prepend, html, text data-handler="html" N html both
data-type The type of data that you're expecting back from the server. See jQuery document. data-type="json" N Intelligent Guess (xml, json, script, or html) both

Extending Scooter's Ajax capability

Scooter comes with two javascript files scooter.js and app.js under the {app_name}/static/javascripts directory.

If you need to customize the behavior of Ajax, you should modify the app.js file.