Pharo Seaside - How to update a Database entry after editing a tag in html

Question

I am a begginner in Seaside.

I have a table (like a spreadsheet) made using html in Pharo 4.0 Seaside, that takes data from a PostgreSQL DB using the Garage driver for Seaside.

I put contenteditable=true to the tableData and I can modify it, but it does not update the entry in the database.

I do not want to use a form that gets the data and then runs a query once I click submit, I just want to modify the spreadsheet cell (the html tabledata tag) and then when I press enter (or I just take the mouse off the cell) I want to run a Query that updates the database.

I tried using jQuery and Ajax but I can't make it work. I am not able to get the data that I entered and the data that describes the cell so I can run a Query.

html tableData 
attributeAt: 'contenteditable' put: 'true'; 
onClick: (html jQuery this addClass:'clicked'); 
onBlur:(self insertOrUpdateEntryWithCode: ((html jQuery this)html) withName: name forDay: day month:month year:year); 
with: value.

Answer 1

Then try this:

renderContentOn: html
  html
    table: [ 1 to: 10 do: [ :rowIndex | 
       html tableRow: [ 1 to: 5 do:
         [ :colIndex | self renderCellAtRow: rowIndex column: colIndex on: html ] ] ] ]

renderCellAtRow: rowIndex column: colIndex on: html
    ^ html tableData
        attributeAt: 'contenteditable' put: 'true';
        id: (self cellIdRow: rowIndex col: colIndex);
        onBlur:
            (html jQuery ajax
                callback: [ :v | self atRow: rowIndex column: colIndex put: v ]
                    value: html jQuery this html;
                onComplete:
                    ((html jQuery id: (self cellIdRow: rowIndex col: colIndex)) load
                        html: [ :h | h render: (self atRow: rowIndex column: colIndex) ]));
        with: (self atRow: rowIndex column: colIndex)

cellIdRow: rowIndex col: colIndex
    ^ 'r<1p>c<2p>' expandMacrosWith: rowIndex with: colIndex

You'll have to sanitize the content of html submitted, since a newline is going to be converted to <br>, which if submitted again will be converted to <br>, etc.

atRow:column returns the value and atRow:column:put: sets it. I used an array of arrays to hold the results.