Postbacks
=========
There are 2 main use cases of web applications:
* To serve machines: you need to create RESTful APIs for smartphones, web services
for other web sites.
* To serve human users: you need to create interactive web pages.
As a web framework, Xitrum aims to support you to solve these use cases easily.
To solve the 1st use case, you use :doc:`RESTful actions `.
To solve the 2nd use case, you can use the Ajax form postback feature in Xitrum.
Please see the following links for the idea about postback:
* http://en.wikipedia.org/wiki/Postback
* http://nitrogenproject.com/doc/tutorial.html
Xitrum's postback feature is inspired by `Nitrogen `_.
Layout
------
AppAction.scala
::
import xitrum.Action
import xitrum.view.DocType
trait AppAction extends Action {
override def layout = DocType.html5(
{antiCsrfMeta}
{xitrumCss}
{jsDefaults}
Welcome to Xitrum
{renderedView}
{jsForView}
)
}
Form
----
Articles.scala
::
import xitrum.annotation.{GET, POST, First}
import xitrum.validator._
@GET("articles/:id")
class ArticlesShow extends AppAction {
def execute() {
val id = param("id")
val article = Article.find(id)
respondInlineView(
{article.title}
{article.body}
)
}
}
@First // Force this route to be matched before "show"
@GET("articles/new")
class ArticlesNew extends AppAction {
def execute() {
respondInlineView(
)
}
}
@POST("articles")
class ArticlesCreate extends AppAction {
def execute() {
val title = param("title")
val body = param("body")
val article = Article.save(title, body)
flash("Article has been saved.")
jsRedirectTo(show, "id" -> article.id)
}
}
When ``submit`` JavaScript event of the form is triggered, the form will be posted back
to ``ArticlesCreate``.
``action`` attribute of ``
``#myform`` is the jQuery selector to select the form that contains extra params.
Customize animation image while Ajax is loading
-----------------------------------------------
By default, this animated GIF image is displayed while Ajax is loading:
.. Use ../img/ajax_loading.png for PDF (make latexpdf) because it can't include animation GIF
.. image:: ../img/ajax_loading.gif
To customize, please call this JS snippet after including ``jsDefaults`` (which includes
`xitrum.js `_)
in your view template:
::
// target: The element that triggered the postback
xitrum.ajaxLoading = function(target) {
// Called when the animation should be displayed when the Ajax postback is being sent.
var show = function() {
...
};
// Called when the animation should be stopped after the Ajax postback completes.
var hide = function() {
...
};
return {show: show, hide: hide};
};