Help in ajaxifying Seaside-App (need template or minimal example)

Question

I am having trouble ajaxifying our new Seaside-App. The objective of the App is to show contract-data in a cascading view (in concept like a tree but visually just components inside components): on the top level the names of contracts, a click on them reveals the so-called "sets" these contracts contain, a click on those reveals the so-called "parts" they contain and so on.

In the draft-version we made we just load all the information onto the client and then use:

renderContentOn: html
....
html div 
    onClick: (html scriptaculous effect id: tmpid; toggleAppear);
    onClick: (html scriptaculous request callback: [visible:=self visible not]);
with: ...

to successfully blend-in and blend-out the sub-components of the various levels.

Loading all the information onto the client was for the draft-version only; for the next version we want to dynamically load only those branches the user wants to expand. We know how to do this according to the Seaside-Book, and doing the following we get the client to update correctly:

onClick: (html jQuery ajax script: [:s| 
    s << (s jQuery: tmpid) append: ...

However: we are having trouble keeping the client-state and server-state correct: We want to keep state of parts of the tree (not-loaded/expanded/collapsed for every node in the tree) even when the user uses the html-form-inputs (see graphic) to change contents of the tree. We also want to keep the state if the connection is briefly not available (otherwise the whole state and field-editing of the user is lost and a 404 is shown, back-button will result in inconsistent session, worst case scenario). The situation is further complicated because we want to allow this behavior for multiple users; of course with the semantic that every user has different tree-state (not-loaded/expanded/collapsed for every node in the tree) but consistent entries in the data-fields.

Do you have a template or minimal example with which one can have this kind of updating of the server-session?

Answer 1

Did you read the blog post about Seaside Ajaxification and the follow up FAQ? This is certainly the easiest way to get AJAX into your existing Seaside application (check the last question in the FAQ to see how to get started). Since this uses the normal Seaside callback mechanism state is automatically kept in sync.

If you want to see a complex example of how server state and the client DOM can be managed have a look at the tree report widget that comes with the package Scriptaculous-Components and is implemented in the class SUTreeReport.

Alternatively you might want to look at Reef. Reef provides an abstraction over the low-level AJAX protocol and automates the updating of components in Seaside.