Scooter Framework

Ajax

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">
...
</form>

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">
...
</form>

<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.

Name	Description	Example	Required	Default	Form/Link
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.