jqueryhtmlpostgresqlpharoseaside

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


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.

Solution

  • 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 &lt;br&gt;, etc.

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