[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