Pharo Seaside - 如何在 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

The question is ambiguous, because it is not strictly Seaside related but more related with the architecture of your application, in particular persistence.

A few questions...

• What #insertOrUpdateEntryWithCode:withName:forDay:month:year: does and return?
• How do you get access to a database connection? (global pool or your Seaside session?)

Also, you're using an old version of Pharo probably with an old version of Seaside, and if PostgreSQL connection is required, I'd avise you to use the P3 driver .

Answer 2

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.