The first of a series of coding vignettes in Seaside.
Context: a web app with a form containing multiple input fields. Instead of waiting to submit the form, I want the page to update another element every time an input is changed. In this example, a total field. Solution was used for a simple MoneyCounter application:
MoneyCounter>>renderContentOn: html html form id: 'f'; with: [ html table: [ html tableRow: [html tableData: [html text: 'pennies']; tableData: [html textInput id: 'pennies'; "on: #pennies of: self;" callback: [:value | self pennies: value]; onChange: (html updater id: 'total'; triggerFormElement: 'pennies'; callback: [ :r | self renderTotalOn: r]) ] ] etc. html tableRow: [html tableData: [html text: 'TOTAL'; space]; tableData: [html span id: 'total' ; with: self total]]]]
MoneyCounter>>renderTotalOn: html html render: self total
pennies := value MoneyCounter>>total ^((pennies asInteger * 0.01) + etc. )
In simple English, whenever the input field is changed, update the value that is bound to the field, then update the Total field.
For this to work appropriately, it’s also important to set element ids correctly. The updater also seems to require an id – and seemingly that id must be the same as the element that it is updating, but I’m not exactly clear on this yet.