Smalltalk › Frameworks & Tools › Seaside › Seaside General

How to change callback for html select on the fly

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

squeakman

How to change callback for html select on the fly

Greetings List,

I have a form with a text field and an html select with a list of choices.

When the user exits the text field (onChange) I want to change the list
of choices for the dropdown list.

I can get the contents of the dropdown list to change but I cannot
determine how to change the associated callback.

Is there a way to replace not only the contents of the dropdown list but
also its callback?

Below is an extract of the code to show what I am trying to do.

Thanks for any help you can provide,

Frank

----- start of code -----

(html textInput)
callback: [:v | self textValue: v];
onChange: ((html scriptaculous updater)
id: #prices;
triggerForm: fid;
"Attempt to replace callback"
callback:
[:r |
(r select)
callback: [:v | self amount: v];
list: #(15 25)].

" The dropdown list"
html text: 'Choose Amount'.
(html select)
id: #prices;
callback: [:v | self amount: v];
list: #(30 50 60).

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

Bob Arning-2

Re: How to change callback for html select on the fly

Why not just make the original callback sufficiently generic that it can cope with the change?

html text: 'Choose Amount'.
        (html select)
        id: #prices;
        callback: [:v | self doWhateverIsImportantNowWith: v];
        list: #(30 50 60).

Cheers,
Bob

On 8/19/12 10:06 AM, squeakman wrote:

Greetings List,

I have a form with a text field and an html select with a list of choices.

When the user exits the text field (onChange) I want to change the list of choices for the dropdown list.

I can get the contents of the dropdown list to change but I cannot determine how to change the associated callback.

Is there a way to replace not only the contents of the dropdown list but also its callback?

Below is an extract of the code to show what I am trying to do.

Thanks for any help you can provide,

Frank

----- start of code -----

(html textInput)
    callback: [:v | self textValue: v];
    onChange: ((html scriptaculous updater)
            id: #prices;
            triggerForm: fid;
            "Attempt to replace callback"
            callback:
                [:r |
                    (r select)
                    callback: [:v | self amount: v];
                    list: #(15 25)].

" The dropdown list"
html text: 'Choose Amount'.
        (html select)
        id: #prices;
        callback: [:v | self amount: v];
        list: #(30 50 60).

_______________________________________________
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

squeakman

Re: How to change callback for html select on the fly

On 19/08/2012 10:24 AM, Bob Arning wrote:

> Why not just make the original callback sufficiently generic that it can
> cope with the change?
>
> html text: 'Choose Amount'.
> (html select)
> id: #prices;
> callback: [:v | self doWhateverIsImportantNowWith: v];
> list: #(30 50 60).
>
> Cheers,
> Bob
>

The problem with this proposed solution is that the list of choices #(30
50 60) does not change on the fly. What I want is to change the list of
choices, the dropdown list, on the fly.

When the user exits the text field, depending on the contents of the
text field, the choices are modified. In my code example, it switches
from #(30 50 60) to #(15 25).

I hope this further clarifies what I am trying to do.

I appreciate your feedback.

Thanks,

Frank

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

Bob Arning-2

Re: How to change callback for html select on the fly

In reply to this post by squeakman

I think this does what you were looking for. I got stymied for a while hitting return after changing the value in the text field. This caused a complete redraw and did not activate the updater callback. If I hit tab instead of return, things started working. FYI.

Cheers,
Bob

renderContentOnSqueakman1: html

    | fid mid saveText |

    fid _ html nextId.
    mid _ html nextId.
    html form
        id: fid;
        with: [
            (html textInput)
                value: 'initial';
                callback: [:v | saveText _ v];
                onChange: ((html scriptaculous updater)
                        id: mid;
                        triggerForm: fid;
                        callback: [:r |
                                self renderTheListWith: saveText asArray on: r
                    ]
                ).
            html div
                id: mid;
                with: [
                    self renderTheListWith: #(30 50 60) on: html
                ]
        ].

renderTheListWith: data on: html

    html text: 'Choose Amount'.
    html select
            callback: [:v | self amount: v];
            list: data.

On 8/19/12 10:06 AM, squeakman wrote:

Greetings List,

I have a form with a text field and an html select with a list of choices.

When the user exits the text field (onChange) I want to change the list of choices for the dropdown list.

I can get the contents of the dropdown list to change but I cannot determine how to change the associated callback.

Is there a way to replace not only the contents of the dropdown list but also its callback?

Below is an extract of the code to show what I am trying to do.

Thanks for any help you can provide,

Frank

----- start of code -----

(html textInput)
    callback: [:v | self textValue: v];
    onChange: ((html scriptaculous updater)
            id: #prices;
            triggerForm: fid;
            "Attempt to replace callback"
            callback:
                [:r |
                    (r select)
                    callback: [:v | self amount: v];
                    list: #(15 25)].

" The dropdown list"
html text: 'Choose Amount'.
        (html select)
        id: #prices;
        callback: [:v | self amount: v];
        list: #(30 50 60).

_______________________________________________
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

Robert Sirois

Re: How to change callback for html select on the fly

In reply to this post by squeakman

I think more fundamentally speaking, you're not actually wanting to modify the callback, you're trying to modify the list, right? The callback doesn't care what it's sending (or shouldn't).

If you're trying to update the select element options from server data, you can easily handle that in the ajax success callback. If you're changing the options based on some client-side JavaScript, you could insert that function or use Seaside's JavaScript utilities to accomplish the same thing.

ie. (using jQuery)

var figureOutNewListOptions = function() {

// some function

// OR

$.get('http://www.mydata.com/getdata', function( data ) {

// clear current options

$('selectField').html('');

( var i = 0; i < data.records.length; i++ ) {
$('selectField').append('<option name='+data.records[i]+'value='+data.records[i]+'>'+data.records[i]+'</option>');

}

});

}

var updateList = function() {

var userInput = $('#userInputTextField').val();

// validate

figureOutNewListOptions();

}

Wow, that's a painful example but I hope it helps. Sorry for not writing it in Smalltalk lol.

Hope that helps... I haven't had a change to touch Seaside lately :( JavaScript has taken over my life. Suck.

> To: [hidden email]

> From: [hidden email]
> Date: Sun, 19 Aug 2012 12:53:16 -0400
> Subject: [Seaside] Re: How to change callback for html select on the fly
>
> On 19/08/2012 10:24 AM, Bob Arning wrote:
> > Why not just make the original callback sufficiently generic that it can
> > cope with the change?
> >
> > html text: 'Choose Amount'.
> > (html select)
> > id: #prices;
> > callback: [:v | self doWhateverIsImportantNowWith: v];
> > list: #(30 50 60).
> >
> > Cheers,
> > Bob
> >
>
> The problem with this proposed solution is that the list of choices #(30
> 50 60) does not change on the fly. What I want is to change the list of
> choices, the dropdown list, on the fly.
>
> When the user exits the text field, depending on the contents of the
> text field, the choices are modified. In my code example, it switches
> from #(30 50 60) to #(15 25).
>
> I hope this further clarifies what I am trying to do.
>
> I appreciate your feedback.
>
> Thanks,
>
> Frank
>
>
> _______________________________________________
> 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

squeakman

Re: How to change callback for html select on the fly

In reply to this post by Bob Arning-2

On 19/08/2012 1:13 PM, Bob Arning wrote:

> I think this does what you were looking for. I got stymied for a while
> hitting return after changing the value in the text field. This caused a
> complete redraw and did not activate the updater callback. If I hit tab
> instead of return, things started working. FYI.
>
> Cheers,
> Bob
>
> renderContentOnSqueakman1: html
>
> | fid mid saveText |
>
> fid _ html nextId.
> mid _ html nextId.
> html form
> id: fid;
> with: [
> (html textInput)
> value: 'initial';
> callback: [:v | saveText _ v];
> onChange: ((html scriptaculous updater)
> id: mid;
> triggerForm: fid;
> callback: [:r |
> self renderTheListWith: saveText
> asArray on: r
> ]
> ).
> html div
> id: mid;
> with: [
> self renderTheListWith: #(30 50 60) on: html
> ]
> ].
>
> renderTheListWith: data on: html
>
> html text: 'Choose Amount'.
> html select
> callback: [:v | self amount: v];
> list: data.
>
>

That worked perfectly. It took me a while to realise it because I was
down a rabbit hole fiddling with Javascript.

Thanks Bob and Robert for the help. Much appreciated.

Frank

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