jQuery questions

I am trying to understand the latest CTReport example.  Lukas recently made
changes to allow a new item to be added.  I am confused by what exactly the
jQuery pieces are doing.

1) In CTReport>>renderContentOn: there is some code that binds 'refresh' to
jQuery:

        html table
                script: (html jQuery this
                        bind: 'refresh' do: (html jQuery this load
                                html: [ :h | self renderTableOn: h ]));

what does the message #this do?   What about 'html jQuery this load'.
Obviously the html: portion is the action taken, which re-renders the table.

2) In CTReport>>renderRowView:on: there is an anchor created with an
onClick: script:

        html tableData: [
                html anchor
                        url: '#';
                        " replace the owning row with an editable row "
                        onClick: ((html jQuery this closest: 'tr') load
                                html: [ :r | self renderRowEdit: anItem on: r ]);
                        with: 'edit' ]

What does '((html jQuery this closest: 'tr') load' do?

Now some AJAX stuff...

3) In CTReport>>renderAddOn: there is jQuery...

                onClick: (html jQuery ajax script: [ :script |
                        script add: ((script jQuery: 'table') append: [ :renderer |
                                renderer tableRow: [
                                        self
                                                renderRowEdit: CTReportItem new
                                                action: [ :item | self items add: item ]
                                                on: renderer ] ]) ]);

What does 'html jQuery ajax script:' do?  In the script it looks like it
grabs the 'table' (although I don't see where the table was named) and
appends a tableRow.

4) In CTReport>>renderRowEdit:action:on: there is more jQuery ajax....

                        onClick: (html jQuery ajax
                                " serialize all form elements in the table "
                                serialize: ((html jQuery this closest: 'table') find: ':input');
                                " trigger a refresh on all connected tables "
                                html: [ :r |
                                        aBlock value: anItem.
                                        self pusher javascript: [ :s |
                                                s add: ((s jQuery: 'table')
                                                        trigger: 'refresh') ] ]);

Ditto on 'jQuery ajax'?  What does 'serialize: ((html jQuery this closest:
'table') find: ':input');' do?  Clearly the trigger: 'refresh' is sent to
all pages the pusher knows about, right?

If there is anything else you can tell me or point me to the appropriate
literature, it would be most appreciated!

Thanks,
Rob
 

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

> 1) In CTReport>>renderContentOn: there is some code that binds 'refresh' to
> jQuery:
>
>        html table
>                script: (html jQuery this
>                        bind: 'refresh' do: (html jQuery this load
>                                html: [ :h | self renderTableOn: h ]));
>
> what does the message #this do?

This returns a JQueryInstance that refers to the current DOM element
(see the method comment), i.e. the table.

> Obviously the html: portion is the action taken, which re-renders the table.

Exactly, the inner part of the table.

#this refers to the current DOM element (see the method comment), i.e.
the anchor.

#closest: walks outwards in the DOM tree to find the closes matching
element (see the method comment), i.e. the current row.

#load performs an AJAX action (see the method comment), i.e. it
replaces the contents of the matched elements with

> What does 'html jQuery ajax script:' do?  In the script it looks like it
> grabs the 'table' (although I don't see where the table was named) and
> appends a tableRow.

'table' is a CSS selector, it just appends the list to all tables on
the current page. Cleaner would be to give it a name or navigate to it
through this DOM node, but in this simple example I assume that there
is only one table.

> Ditto on 'jQuery ajax'?

This is an AJAX request (see the method comment and look for senders
to see other examples).

> What does 'serialize: ((html jQuery this closest:
> 'table') find: ':input');' do?

It serializes and triggers the callbacks of all the input-fields in
this table. Again, see the method comments of the respective messages.

> Clearly the trigger: 'refresh' is sent to
> all pages the pusher knows about, right?

This triggers the refresh event that was bound in your first question.

Lukas

--
Lukas Renggli
www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside