Smalltalk › Frameworks & Tools › Seaside › Seaside General

onClick notifications for check box or multiSelect

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

James T. Savidge-2

onClick notifications for check box or multiSelect

Greetings,

Despite trying to follow the suggestions I have seen in the discussions and in
the documentation, I cant seem to get onClick notifications to work on
checkbox(s) or multiSelect.

My goal is to present the user with a list of selections, and when they click
on one of the items in the list, I want to refresh a secondary list with data
that is related to selection they made in the first list.

Attached is a file out for my attempt to get onClick to work on a checkbox by
modifying the WACounter example.

My testing have been in VisualWorks 7.7.1 + Seaside 3.0 - 7, and also in
WebVelocity 1.1. Ive tried this in Firefox 3.x, 4.x, and Internet Explorer 8.

Here is the method that is included in the attached file-out:

----------------------------------------------------------
WACounter>>renderContentOn: html
html form: [
html heading: count.
html anchor
callback: [ self increase ];
with: '++'.
html space.
html anchor
callback: [ self decrease ];
with: '--'.
html checkbox
with: 'Checkbox test';
onChange: ( html jQuery ajax serializeThisWithHidden );
onClick: ( html jQuery ajax callback: [ :selection | Transcript
show: 'checkbox onClick hit.'. ] );
callback: [ :selection | Transcript show: 'checkbox callback hit.'. ].
].
----------------------------------------------------------

Am I missing something?

James T. Savidge, [[hidden email]], Monday, May 9, 2011
--

Dont worry Bob. Heres what to do. ... Raise the Exception, walkback, and
nobody gets hurt.

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

Lukas Renggli

Re: onClick notifications for check box or multiSelect

#with: has to be last in the cascade. Always. Slime can detect this problem.

Also there seems to be something wrong with the callbacks. You have
two independent AJAX requests. I don't think you need the #onClick:
one. There is a functional form test/example that demonstrates all the
form elements.

HTH,
Lukas

On Tuesday, 10 May 2011, <[hidden email]> wrote:

> Greetings,
>
> Despite trying to follow the suggestions I have seen in the discussions and in
> the documentation, I can’t seem to get onClick notifications to work on
> checkbox(s) or multiSelect.
>
> My goal is to present the user with a list of selections, and when they click
> on one of the items in the list, I want to refresh a secondary list with data
> that is related to selection they made in the first list.
>
> Attached is a file out for my attempt to get onClick to work on a checkbox by
> modifying the WACounter example.
>
> My testing have been in VisualWorks 7.7.1 + Seaside 3.0 - 7, and also in
> WebVelocity 1.1. I’ve tried this in Firefox 3.x, 4.x, and Internet Explorer 8.
>
> Here is the method that is included in the attached file-out:
>
> ----------------------------------------------------------
> WACounter>>renderContentOn: html
>    html form: [
>    html heading: count.
>    html anchor
>    callback: [ self increase ];
>    with: '++'.
>    html space.
>    html anchor
>    callback: [ self decrease ];
>    with: '--'.
>    html checkbox
>    with: 'Checkbox test';
>    onChange: ( html jQuery ajax serializeThisWithHidden );
>    onClick: ( html jQuery ajax callback: [ :selection | Transcript
> show: 'checkbox onClick hit.'. ] );
>    callback: [ :selection | Transcript show: 'checkbox callback hit.'. ].
>    ].
> ----------------------------------------------------------
>
> Am I missing something?
>
> James T. Savidge, [[hidden email]], Monday, May 9, 2011
> --
>
> “Don’t worry Bob. Here’s what to do. ... Raise the Exception, walkback, and
> nobody gets hurt.”
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

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

James T. Savidge-2

Re: onClick notifications for check box or multiSelect

In reply to this post by James T. Savidge-2

Greetings Lukas,

On 5/10/11 11:47 AM, Lukas Renggli wrote:
> #with: has to be last in the cascade. Always. Slime can detect this problem.
>
> Also there seems to be something wrong with the callbacks. You have
> two independent AJAX requests. I don't think you need the #onClick:
> one.

I moved the >>with: to the end of the cascade, and I removed the >>onClick:,
but that didnt seem to make a difference. The Transcript printing in my
callback: was never executed.

> There is a functional form test/example that demonstrates all the
> form elements.

I had been looking at examples before I got to this point, but I must not be
looking at the correct ones. Are you referring to any of the following, or are
there other examples that you would suggest?

JQFormFunctionalTest>>renderCheckBoxOn:
JQFormFunctionalTest>>renderMultiSelectListOn:

JQButtonFunctionalTest>>renderCheckBoxOn:

Scriptaculous.SUFormTest>>renderCheckBoxOn:
Scriptaculous.SUFormTest>>renderMultiSelectListOn

James T. Savidge, [[hidden email]], Tuesday, May 10, 2011
--

Dont worry Bob. Heres what to do. ... Raise the Exception, walkback, and
nobody gets hurt.

> HTH,
> Lukas
>
>
>
>
> On Tuesday, 10 May 2011, <[hidden email]> wrote:
>> Greetings,
>>
>> Despite trying to follow the suggestions I have seen in the discussions and in
>> the documentation, I cant seem to get onClick notifications to work on
>> checkbox(s) or multiSelect.
>>
>> My goal is to present the user with a list of selections, and when they click
>> on one of the items in the list, I want to refresh a secondary list with data
>> that is related to selection they made in the first list.
>>
>> Attached is a file out for my attempt to get onClick to work on a checkbox by
>> modifying the WACounter example.
>>
>> My testing have been in VisualWorks 7.7.1 + Seaside 3.0 - 7, and also in
>> WebVelocity 1.1. Ive tried this in Firefox 3.x, 4.x, and Internet Explorer 8.
>>
>> Here is the method that is included in the attached file-out:
>>
>> ----------------------------------------------------------
>> WACounter>>renderContentOn: html
>> html form: [
>> html heading: count.
>> html anchor
>> callback: [ self increase ];
>> with: '++'.
>> html space.
>> html anchor
>> callback: [ self decrease ];
>> with: '--'.
>> html checkbox
>> with: 'Checkbox test';
>> onChange: ( html jQuery ajax serializeThisWithHidden );
>> onClick: ( html jQuery ajax callback: [ :selection | Transcript
>> show: 'checkbox onClick hit.'. ] );
>> callback: [ :selection | Transcript show: 'checkbox callback

hit.'. ].

>> ].
>> ----------------------------------------------------------
>>
>> Am I missing something?
>>
>> James T. Savidge, [[hidden email]], Monday, May 9, 2011
>> --
>>
>> Dont worry Bob. Heres what to do. ... Raise the Exception, walkback, and
>> nobody gets hurt.
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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

Lukas Renggli

Re: onClick notifications for check box or multiSelect

>> There is a functional form test/example that demonstrates all the
>> form elements.
>
> I had been looking at examples before I got to this point, but I must not be
> looking at the correct ones. Are you referring to any of the following, or are
> there other examples that you would suggest?
>
> JQFormFunctionalTest>>renderCheckBoxOn:
> JQFormFunctionalTest>>renderMultiSelectListOn:

Yes, these ones. Did you check with FireBug if you get any Javascript errors?

Lukas

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

Nick

Re: onClick notifications for check box or multiSelect

In reply to this post by James T. Savidge-2

Hi James,

Am I missing something?

Have you added the JQuery library? For basic JQuery interaction you need to ensure you've added either JQDevelopmentLibrary, JQDeploymentLibrary or JQGoogleLibrary, see: http://book.seaside.st/book/web-20/jquery/getting-ready, http://book.seaside.st/book/web-20/comet/counter-explained

Nick

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

Paul DeBruicker

Re: onClick notifications for check box or multiSelect

In reply to this post by James T. Savidge-2

On 05/10/2011 09:24 PM, [hidden email] wrote:

> On Tuesday, 10 May 2011, <[hidden email]> wrote:
>> > Greetings,
>> >
>> > Despite trying to follow the suggestions I have seen in the discussions and in
>> > the documentation, I can’t seem to get onClick notifications to work on
>> > checkbox(s) or multiSelect.
>> >
>> > My goal is to present the user with a list of selections, and when they click
>> > on one of the items in the list, I want to refresh a secondary list with data
>> > that is related to selection they made in the first list.

Something similar to what I wrote below is what has worked for me in the
past using Pharo/Gemstone & Seaside 3. When using checkboxes you
probably want onClick rather than onChange because IE does not register
the change until the checkbox loses focus. I haven't tried a
multiselect. And there is likely a better/cleaner way to do this.

renderUpdatingCheckbox:html
|id |

html checkbox
id: (id := html nextId);
value: cbox;
onClick:
((html jQuery ajax)
serializeThisWithHidden;
script: [ :s | s << (s jQuery id: 'target-div') load: [ :h | self
renderTarget: h ] ]);
callback: [ :value | cbox:=value ].

html label
for: id;
with: 'checkbox test'.
html div
id:'target-div';
with:[self renderTarget: html].

renderTarget: html
cbox ifTrue:[html render:'Box is checked'] ifFalse:[html render:'Box
is not checked']

If you want to test the above you'd need an ivar in your component named
#cbox. Also I'm not sure about this but I thought that if you use
labels rather than the trailing #with: your user can click the entire
label to trigger the change in the check box.

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