Walkthrough

Refresh a DIV

Refresh 'portal-news' every 30 seconds using the contents found at 'news':

<tal:bling replace="structure python:bling.refreshArea('news',
                                                       'portal-news',
                                                       js=dict(frequency='30'))" />

The file /<site>/test_bling_timer will show an example of this in action.

Refresh on form field change

Observe a form refreshing a target on any change of a given field. This might be used to implement 'live-validation':

<tal:bling replace="structure python:bling.checkedField('validate',
                                                        'my_title',
                                                        js=dict(error='error_div')) />

Archetypes validation has been modified to support this, you can see examples of this in any of the edit widgets.

In Place Editing

This is tiny bit more complex, but basically all you need is an object url and an HTML id to get started. The Bling editor firsts goes to the sever for the HTML of the editing widget it will display, called the editor. Then it will connect that widget to the second url, which is called the handler. Both of these may be overridden with js keyword args.

Archetypes objects support the default bindings for providing an editor and processing the output.

By default the handler is "ajax_set" and the editor is "ajax_widget":

<tal:bling tal:replace="structure python:
       ajax.BlingEditor(here.absolute_url(), id,
                    dict(js=dict(form=dict(field_name = field.getName(),
                                           mode = 'ajax_edit', ))))"

Many Things at Once

The proverbial back do to all of this is that you can in your response to any user action sent javascript back to the client for evaluation. For example if I wanted to update many elements of the page with a new value I might have a responding script or method be the target of some observed field change:

<label for="text">Inject Text</label>
<input type="text" id="text" name="value"/>
<tal:bling tal:replace="structure python:ajax.javascript_tag(ajax.observeField 'test_bling_update_many', 'text'))" />

When this field is changed we then call the test_bling_update_many action on the server. If for example we wanted to change the text of all the portlets and the 'results' div on the page we might return the following JS fragment as the result of this:

cssQuery('.portlet, #result').each(function (element) {
                  Element.update($(element), new_value);
                  });

If you don't want to write Javascript, you can get it generated for you by the following Python instead:

page.select('.portlet, #result').each(page.update(new_value))

This produces the cssQuery() statement shown above. For more info on this syntax, see the PJS documentation.

Feedback welcome.

Benjamin Saller <bcsaller@objectrealms.net> ObjectRealms, LLC