[Scriptaculous] - Combining #onClick: on a tag

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

[Scriptaculous] - Combining #onClick: on a tag

cbeler
Hi

What are the limits in combining several javascript event on a tag
(onClick...onChange...).

Sometime, I need to have 2 or 3 #onClick: for one tag and the result is
not always what I expect.

If two #onClick: are defined, are they fired simultanously, one after
the other... ?


Thanks

Cédrick
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Scriptaculous] - Combining #onClick: on a tag

Lukas Renggli
> Sometime, I need to have 2 or 3 #onClick: for one tag and the result is
> not always what I expect.
>
> If two #onClick: are defined, are they fired simultanously, one after
> the other... ?

Basically JavaScript executes one statement after the other, so if you have

   ... onClick: 'alert("1");alert("2")'

you get one message box after the other, not all at once ;-)

Now, it might depend what you actually do within your statements. In
the context of [Scriptaculous] you probably mean something like ...

   ... onClick: (html update id: 'id1'; callback: [ ... ]) , (html
update id: 'id2'; callback: [ ... ])

The updaters for id1 and id2 immediately return as the updater itself
is run asynchronously (the first A in AJAX). If you want you can
change that with some setting in SUAjax. The same is true for
SUEffect.

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Scriptaculous] - Combining #onClick: on a tag

cbeler

>
> Basically JavaScript executes one statement after the other, so if you
> have
>
>   ... onClick: 'alert("1");alert("2")'
>
> you get one message box after the other, not all at once ;-)
>
> Now, it might depend what you actually do within your statements. In
> the context of [Scriptaculous] you probably mean something like ...
>
>   ... onClick: (html update id: 'id1'; callback: [ ... ]) , (html
> update id: 'id2'; callback: [ ... ])
yes !

actually, I was doing:
onClick: (html update id: 'id1'; callback: [ ... ]);
onClick: (html update id: 'id2'; callback: [ ... ]);

I like better to concatenate the SUStreams...

What I'm triing to do is (in this case):
- I have a tree that allows to select categories.
- I have a list of instances, and this list is updated according to the
selected categories.

When I click on the label of the tree node, both the node is updated and
the list. What is strange is that it is working sometimes and sometimes
not (I have to click a second time on the label so as to update the
list)....

**actually I just solved the problem...**  I had to specify    self
selected: aNode   in the 2nd callbacks...

SUTree>>renderNodeLabel: aNode on: html

    html span
        class: 'label' ;
        with: [(self canSelect: aNode)
                ifTrue: [ html span
                            class: ((self selected == aNode) ifTrue:
['active']);
                            with: [html anchor
                                onClick:
                                     ((html updater)
                                        id: treeDiv;
                                        evalScripts: true;  "not sure
important here..."
                                        callback: [:rend | self
selected: aNode . self renderTreeOn: rend ]),
                                    ((html updater)
                                        id: answerDiv;
                                        evalScripts: true;
                                        callback: [:rend | ****self
selected: aNode*****.    "I added self selected: aNode here   whereas I
first thought it will be done because of the first callback"
                                                selectBlock value: aNode.
                                                parent
renderTreeAnswerOn: rend]);
                                                text: self labelOf: aNode]]
                ifFalse: [html render: self labelOf: aNode]]

>
> The updaters for id1 and id2 immediately return as the updater itself
> is run asynchronously (the first A in AJAX). If you want you can
> change that with some setting in SUAjax. The same is true for
> SUEffect.
>
After some more experiments, I have another solution... with  
#asynchronous:   (SUAjax)

        ...onClick:
             (html updater
                  id: treeDiv;
                  asynchronous: false;   "so it's synchronous (?), and
then the callback is evaluated in first place. Am I right ?"
                  evalScripts: true;
                   .....

then I can remove the duplicated *self selected: aNode*

Cédrick
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Re: [Scriptaculous] - Combining #onClick: on a tag

Lukas Renggli
> actually, I was doing:
> onClick: (html update id: 'id1'; callback: [ ... ]);
> onClick: (html update id: 'id2'; callback: [ ... ]);
>
> I like better to concatenate the SUStreams...

Both techniques should result in exactly the same code.

> After some more experiments, I have another solution... with
> #asynchronous:   (SUAjax)
>
>         ...onClick:
>              (html updater
>                   id: treeDiv;
>                   asynchronous: false;   "so it's synchronous (?), and
> then the callback is evaluated in first place. Am I right ?"
>                   evalScripts: true;
>                    .....

Like this the updater blocks until the request finished.

Cheers,
Lukas

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