Javascript API

Japano offers two features which normally require client-side javascript to work:

Take a look at the sample webapplication for an example of both features. Note that if you can ignore the javascript API if you don't use javascript views or partial updates.


Using the Javascrip API

To use the japano javascript API you must include the "japano.js" file included in the japano distribution. The japano js file contains AJAX related methods and style and event related functions that enable compatibility with Internet Explorer.

japano

japano.get(URL, fn, params, waitCursor)
Calls the given URL with the given associative parameter array params and feeds the evaluated JSON response to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
japano.getText(URL, fn, params, waitCursor)
Calls the given URL with the given associative parameter array params and feeds the text response to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
japano.getHTML(URL, fn, params, waitCursor)
Calls the given URL with the given associative parameter array params and feeds the received HTML element to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
japano.getXML(URL, fn, params, waitCursor)
Calls the given URL with the given associative parameter array params and feeds the XML response to the function fn. If waitCursor is set to true, a wait cursor is set until a response is received.
japano.readParameter(formElement)
Reads the content of the given form element into an associative array.
japano.commit(id, fn)
Commits the form with the given id and reloads it via partial Update.
japano.isError(o)
Returns true if the given object is a japano Error object.
japano.dump(o, fn)
Dumps the given Object as HTML.
japano.forElement( type, className, fn)

Calls the given function for every DOM element of the given type which has the given class.

The function fn has the following signature:
function fn(element, data)

element
the DOM element.
data
data object embedded in the onclick handler. forElement() supports hiding data in the onclick handler like this:
<span class="marked" onclick="return { foo: 1; bar: 2 };" ></span>
This allows you to annotate your DOM nodes with javascript meta-data.

This is best illustrated with an example:

The japano framework uses forElement to create the buttons of <jpn:button> tags. The button tag inserts something like this into the page.

  <span class="jpn_button" onclick="return {button:'Push me!',fn:'doStuff'};"></span>

Japano calls forElement() like this:

  japano.forElement("SPAN", "jpn_button", 
    function(span, data)
    {      
      span.onclick=null;
      // if we really have a data object
      if (data)
      {
        // get the function object from its name
        eval("var fn="+data.fn+";");

        // create a new button
        var button=document.createElement("BUTTON");      
        // append the button text to the button
        button.appendChild(document.createTextNode(data.button));
        // add our method as click event
        japano.addEvent(button, "click", fn);

        // remove all children of the span
        while (span.hasChildNodes())
        {
          span.removeChild(span.firstChild);
        }
        // add button to the span
        span.appendChild(button);
      }
    });

forElement() searches the DOM for spans containing "jpn_button" in their class attributes. Then it calls the function with the span element and the evaluated data object. The function creates the button with the given text that calls the given function when pushed. Without javascript only an empty span is there. fallback code can be added in <noscript></noscript> after that.


japano.Error(code, response)
This Object is thrown by japano to indicate an error.

japano.style

japano.style.setClass(elem,class)
Sets the class of the given element to the given class.
japano.style.getClass(elem)
Returns the class of the given Element.
japano.style.addClass(elem,class)
Adds the class to the classes of the given element.
japano.style.removeClass(elem,class)
Removes the class from the classes of the given element.

japano.event

japano.event.onload(fn)
Registers the given function to be executed when the page is loaded. Multiple functions can be registered.
japano.event.add(elem, type, fn)
Cross-Browser addEvent method. Registers a given function to be executed on an event of the given type for the given DOM element. (code taken from quirksmode.org.)
japano.event.remove(elem, type, fn)
Cross-Browser removeEvent method