ajax tables

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

'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!

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Milan Mimica wrote:
>     html table attributeAt: 'border' put: 1; with: [
>         html tableRow with: [ html tableHeading with: 'title' ].
>         (html div) id: renderId; with: [
>             self renderTableContentOn: html refresh: renderId.
>             ]
>         ]

Never mind. I didn't know you can't have a <div> between <table> and <tr>.

Couldn't seaside validate what I write and point out such obvious errors? :x


--
Milan Mimica
http://sparklet.sf.net
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

2011/2/13 Milan Mimica <[hidden email]>:
> Never mind. I didn't know you can't have a <div> between <table> and <tr>.
>
> Couldn't seaside validate what I write and point out such obvious errors? :x

http://validator.w3.org/

:)

We don't do that because (a) HTML validation is a nightmare and there
are other tools that do it for you and (b) sometimes people still want
to generate invalid HTML.

There's an XHTML link in the toolbar that will check the page with the
above validator, but only if it's on a public IP. Someone could
probably add a development tool (halo? toolbar command?) that passed
the content directly to the validator... would be a good exercise for
someone wanting to get their hands dirty with the framework.

Julian
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

2011/2/13 Julian Fitzell <[hidden email]>:
> 2011/2/13 Milan Mimica <[hidden email]>:
>> Never mind. I didn't know you can't have a <div> between <table> and <tr>.
>>
>> Couldn't seaside validate what I write and point out such obvious errors? :x
>
> http://validator.w3.org/

I can highly recommend:

https://addons.mozilla.org/de/firefox/addon/html-validator/

Be sure to pick the SGML validator, the same programm that's behind
http://validator.w3.org/.

Cheers
Philippe
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside