Ajax

Ajax Statements

WebDSL provides some basic operations to Ajaxify your application. Those operations can be used as statements inside actions.

Ajax Operations

    replace(target, templatecall);
    append (target, templatecall);
    clear  (target);

    restyle (target, String);
    relocate(pagecall);
    refresh();

    visibility(target, visibilitymodifier);

    runscript(String);

Where visibilitymodifier is an identifier from the set show, hide, toggle.

The refresh action is the default action; when no other interface changing operations are executed the browser will just refresh the current page. For example an input form which submits to a completely empty action results in the data being saved (default behavior) and the page being refreshed (default behavior).

Example of an Ajax replace operation:

    action someaction() {
      replace(body, showUser(user)); 
    }

runscript provides a way to interface with arbitrary Javascript code. Put .js files in a javascript directory in the root of your project and include it using includeJS in a template, e.g. includeJS("sdmenu.js").

Example: Moving a div around using JQuery animate:

runscript("$('"+id+"').animate({left:'"+x+"', top:'"+y+"'},1000);");

Ajax Targets

There are three ways to target an ajax operation. target can either be

• the name of an existing template
• the name of a placeholder
• or the id attribute of an object.
• a String expression that creates the id, e.g. using a related entity object's id property.

Placeholder example:

    placeholder leftbar { /* elems go in here */ }

Id attribute example:

    table[id := myfirsttable] { /* ... */ }

When a template is used as target in an ajax operation, it must be declared with the ajax modifier.

Example:

define testtemplate(p:Person){
  placeholder testph{ "no details shown" }
  submit("show details",show())[ajax]
  action show(){
    replace(testph,showDetails(p));
  }
}
define ajax showDetails(person:Person){
  " name: " output(person.name)
}

Since an ajaxtemplate results in an extra entry point at the server, it must be explicitly opened when access control is enabled:

rule ajaxtemplate showDetails(p:Person){true}

Event Handling

To invoke actions when a HTML event is fired, for example when pressing a key, event attributes can be defined on elements. The syntax of such an attribute is:

    <event name> := <action call>

W3schools.com provides an overview of all available events.

Example:

    "quicksearch: " 
    input(search)[onkeyup := updatesearch(search)]