[Seaside] ajax tables
Milan Mimica
milan.mimica at gmail.com
Sun Feb 13 10:29:30 UTC 2011
Hello!
I'm trying to make HTML tables which display server-side data and also allow
editing of the data, in AJAX manner.
Now I must say that these are my first steps in any web programming and
smalltalk in general, though I have wast experience on other fields.
I wrote a minimal example that shows how I was going to do it. It's a table with
one column. When you click on any table cell, that row should be removed on the
server-side and the web presentation should be updated accordingly. There is a
problem updating the table though. It doesn't seem to update the HTML properly,
it inserts data at a wrong place or something...
Attached is a flie-out of the class. I'll paste a few important pieces here.
TRBTableAJAXTest >> initialize
super initialize.
model := OrderedCollection new. "represents server-side data"
model addAll: #('first' 'second' 'third' 'forth' 'fifth').
TRBTableAJAXTest >> renderContentOn: html
|renderId|
renderId := html nextId.
html table attributeAt: 'border' put: 1; with: [
html tableRow with: [ html tableHeading with: 'title' ].
(html div) id: renderId; with: [
self renderTableContentOn: html refresh: renderId.
]
]
TRBTableAJAXTest >>renderTableContentOn: html refresh: divId
1 to: model size do: [ :row |
html tableRow with: [
html tableData
onClick: ((html scriptaculous updater)
id: divId;
callback: [ :h |
model removeAt: row.
self renderTableContentOn: h refresh: divId]);
with: (model at: row)
].
]
--
Milan Mimica
http://sparklet.sf.net
-------------- next part --------------
'From Pharo1.1.1 of 12 September 2010 [Latest update: #11414] on 13 February 2011 at 11:08:29 am'!
WAComponent subclass: #TRBTableAJAXTest
instanceVariableNames: 'model'
classVariableNames: ''
poolDictionaries: ''
category: 'TravelBoat-WebTests'!
!TRBTableAJAXTest methodsFor: 'as yet unclassified' stamp: 'MilanMimica 2/13/2011 10:30'!
initialize
super initialize.
model := OrderedCollection new.
model addAll: #('first' 'second' 'third' 'forth' 'fifth').! !
!TRBTableAJAXTest methodsFor: 'as yet unclassified' stamp: 'MilanMimica 2/13/2011 10:43'!
renderContentOn: html
|renderId|
renderId := html nextId.
html table attributeAt: 'border' put: 1; with: [
self renderTableHeadingOn: html.
(html div) id: renderId; with: [
self renderTableContentOn: html refresh: renderId.
]
]! !
!TRBTableAJAXTest methodsFor: 'as yet unclassified' stamp: 'MilanMimica 2/13/2011 10:49'!
renderTableContentOn: html refresh: divId
1 to: model size do: [ :row |
html tableRow with: [
html tableData
onClick: ((html scriptaculous updater)
id: divId;
callback: [ :h | model removeAt: row. self renderTableContentOn: h refresh: divId]);
with: (model at: row)
].
]! !
!TRBTableAJAXTest methodsFor: 'as yet unclassified' stamp: 'MilanMimica 2/13/2011 10:26'!
renderTableHeadingOn: html
html tableRow with: [ html tableHeading with: 'title' ].! !
"-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "!
TRBTableAJAXTest class
instanceVariableNames: ''!
!TRBTableAJAXTest class methodsFor: 'as yet unclassified' stamp: 'MilanMimica 2/13/2011 10:18'!
canBeRoot
^ true.! !
!TRBTableAJAXTest class methodsFor: 'as yet unclassified' stamp: 'MilanMimica 2/13/2011 10:18'!
initialize
WAAdmin register: self asApplicationAt: 'travelboat/table_ajax_test'! !
TRBTableAJAXTest initialize!
More information about the seaside
mailing list