web2py_ajax.html

The scaffolding web2py application “welcome” includes a file called

views/web2py_ajax.html

which looks like this:

{{
response.files.insert(0, URL('static', 'js/jquery.js'))
response.files.insert(1, URL('static', 'css/calenadar.css'))
response.files.insert(2, URL('static', 'js/calendar.js'))
response.include_meta()
response.include_files()
}}
<script type="text/javascript"><!--
    // These variables are used by the web2py_ajax_init
        // function in web2py.js (which is loaded below).
    var w2p_ajax_confirm_message =
        "{{=T('Are you sure you want to delete this object?')}}";
    var w2p_ajax_date_format = "{{=T('%Y-%m-%d')}}";
    var w2p_ajax_datetime_format = "{{=T('%Y-%m-%d %H:%M:%S')}}";
//--></script>
<script src="{{=URL('static', 'js/web2py.js')}}"
        type="text/javascript"></script>

This file is included in the HEAD of the default “layout.html” and it provides the following services:

• Includes “static/jquery.js”.
• Includes “static/calendar.js” and “static/calendar.css”, which are used for the popup calendar.
• Includes all response.meta headers
• Includes all response.files (requires CSS and JS, as declared in the code)
• Sets form variables and includes “static/js/web2y.js”

“web2py.js” does the following:

• Defines an ajax function (based on jQuery $.ajax).
• Makes any DIV of class “error” or any tag object of class “flash” slide down.
• Prevents typing invalid integers in INPUT fields of class “integer”.
• Prevents typing invalid floats in INPUT fields of class “double”.
• Connects INPUT fields of type “date” with a popup date picker.
• Connects INPUT fields of type “datetime” with a popup datetime picker.
• Connects INPUT fields of type “time” with a popup time picker.
• Defines web2py_ajax_component, a very important tool that will be described in Chapter 12.
• Defines web2py_websocket, a function that can be used for HTML5 websockets (not described in this book but read the examples in the source of “gluon/contrib/websocket__messaging.py”).
• Defines functions to the entropy calculation and input validation of the password field.

It also includes popup, collapse, and fade functions for backward compatibility.

Here is an example of how the other effects play well together.

Consider a test app with the following model:

db = DAL("sqlite://storage.sqlite")
db.define_table('child',
     Field('name'),
     Field('weight', 'double'),
     Field('birth_date', 'date'),
     Field('time_of_birth', 'time'))
db.child.name.requires=IS_NOT_EMPTY()
db.child.weight.requires=IS_FLOAT_IN_RANGE(0, 100)
db.child.birth_date.requires=IS_DATE()
db.child.time_of_birth.requires=IS_TIME()

with this “default.py” controller:

def index():
    form = SQLFORM(db.child)
    if form.process().accepted:
        response.flash = 'record inserted'
    return dict(form=form)

and the following “default/index.html” view:

{{extend 'layout.html'}}
{{=form}}

The “index” action generates the following form:

If an invalid form is submitted, the server returns the page with a modified form containing error messages. The error messages are DIVs of class “error”, and because of the above web2py.js code, the errors appears with a slide-down effect:

The color of the errors is given in the CSS code in “layout.html”.

The web2py.js code prevents you from typing an invalid value in the input field. This is done before and in addition to, not as a substitute for, the server-side validation.

The web2py.js code displays a date picker when you enter an INPUT field of class “date”, and it displays a datetime picker when you enter an INPUT field of class “datetime”. Here is an example:

The web2py.js code also displays the following time picker when you try to edit an INPUT field of class “time”:

Upon submission, the controller action sets the response flash to the message “record inserted”. The default layout renders this message in a DIV with id=”flash”. The web2py.js code is responsible for making this DIV appear and making it disappear when you click on it:

These and other effects are accessible programmatically in the views and via helpers in controllers.