Smalltalk › Frameworks & Tools › Seaside › Seaside General

FormElement focus after an update

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

7 messages Options

Sebastian Sastre-2

FormElement focus after an update

Hey there!

it's me searching wrongly or there is no javascript to query which element has focus in a form?

We want some input text #change to update some component but after the update the focus remains on it. Well in fact even better will be that the focus remains in the different input text that had caused the #change to trigger.

I've tried to emulate this by making the updater like this:

    [:html|
        html updater
            id: self id;
            evalScripts: true;
            callback:[:focusId| lastFocusId := focusId]
            value: (html formElement
                id: (self at: aSymbol) inputElementId; id);
            callback:[:v | (self at: aSymbol) model setValue: v]
            value: (html formElement
                        id: (self at: aSymbol) inputElementId;
                        value);
            callback:[:h| self renderInnerContentOn: h.
            h script: (h formElement id: lastFocusId; focus)];
            yourself
    ]

but this does not work for some reason I dont get yet

Did anyone managed to recover focus state in a similar scenario? any idea on how to do it?

Sebastian Sastre

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

Lukas Renggli

Re: FormElement focus after an update

> it's me searching wrongly or there is no javascript to query which
> element has focus in a form?

I don't think that's easily possible. Maybe CSS3 will help in a couple of years.

> We want some input text #change to update some component but after the
> update the focus remains on it. Well in fact even better will be that the
> focus remains in the different input text that had caused the #change to
> trigger.
>
> I've tried to emulate this by making the updater like this:
> [:html|
> html updater
> id: self id;
> evalScripts: true;

That's not necessary anymore. This is the default nowadays ;-)

> callback:[:focusId| lastFocusId := focusId]
> value: (html formElement
> id: (self at: aSymbol) inputElementId; id);
> callback:[:v | (self at: aSymbol) model setValue: v]
> value: (html formElement
> id: (self at: aSymbol) inputElementId;
> value);

I don't get this lines. What are they supposed to do?

> callback:[:h| self renderInnerContentOn: h.
> h script: (h formElement id: lastFocusId; focus)];
> yourself
> ]
>
> but this does not work for some reason I dont get yet
>
> Did anyone managed to recover focus state in a similar scenario? any
> idea on how to do it?

You can track the focus using JavaScript and onFocus/onBlur events on
all the required elements.

Lukas

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

Sebastian Sastre-2

RE: FormElement focus after an update

Sorry, thanks for ask, I comment code now:

[:html|
html updater
"Set the id of the div wrapping the component"
id: self id;

"Developer being unupdated"
evalScripts: true;

"A callback to store in the lastFocusId instVar of the
receiver
the id of the input text tag in the DOM that is trigering
the #change event that calls this updater as reaction"
callback:[:focusId| lastFocusId := focusId]
value: (html formElement
id: (self at: aSymbol) inputElementId; id);

"A callback to set a fresh value of the model of the
(sub)component that renders the input text tag with."
callback:[:v | (self at: aSymbol) model setValue: v]
value: (html formElement
id: (self at: aSymbol) inputElementId;
value);
"The updater callback for rendering the internal html of
the receiver (all but wrapping stuff)"
callback:[:h| self renderInnerContentOn: h.

"A script that tries to set at update time the focus in
the element (the last #change *neighter*) that was the one
that has caused the #change that has caused this updater to
be executed"
h script: (h formElement id: lastFocusId; focus)];
yourself
]

I hope making myself to be understable :P

Sebastian Sastre

> -----Mensaje original-----
> De: [hidden email]
> [mailto:[hidden email]] En nombre
> de Lukas Renggli
> Enviado el: Miércoles, 03 de Octubre de 2007 11:44
> Para: Seaside - general discussion
> Asunto: Re: [Seaside] FormElement focus after an update
>
> > it's me searching wrongly or there is no javascript to
> query which
> > element has focus in a form?
>
> I don't think that's easily possible. Maybe CSS3 will help in
> a couple of years.
>
> > We want some input text #change to update some
> component but after
> > the update the focus remains on it. Well in fact even
> better will be
> > that the focus remains in the different input text that had
> caused the
> > #change to trigger.
> >
> > I've tried to emulate this by making the updater like this:
> > [:html|
> > html updater
> > id: self id;
> > evalScripts: true;
>
> That's not necessary anymore. This is the default nowadays ;-)
>
> > callback:[:focusId| lastFocusId := focusId]
> > value: (html formElement
> > id: (self at: aSymbol) inputElementId; id);
> > callback:[:v | (self at: aSymbol) model setValue: v]
> > value: (html formElement
> > id: (self at: aSymbol) inputElementId;
> > value);
>
> I don't get this lines. What are they supposed to do?
>
> > callback:[:h| self renderInnerContentOn: h.
> > h script: (h formElement id: lastFocusId; focus)];
> > yourself
> > ]
> >
> > but this does not work for some reason I dont get yet
> >
> > Did anyone managed to recover focus state in a similar
> scenario?
> > any idea on how to do it?
>
> You can track the focus using JavaScript and onFocus/onBlur
> events on all the required elements.
>
> Lukas
>
> --
> Lukas Renggli
> http://www.lukas-renggli.ch
> _______________________________________________
> 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

Sebastian Sastre-2

RE: FormElement focus after an update

In reply to this post by Lukas Renggli

> > any idea on how to do it?
>
> You can track the focus using JavaScript and onFocus/onBlur
> events on all the required elements.
>
> Lukas
>

Ah, are you suggesting to make it all in the user agent side rigth?
If is not an easier way I imagine that a little of js should do it :/

Sebastian

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

Bany, Michel

RE: FormElement focus after an update

In reply to this post by Lukas Renggli

> > Did anyone managed to recover focus state in a similar
> scenario?
> > any idea on how to do it?
>
> You can track the focus using JavaScript and onFocus/onBlur
> events on all the required elements.

The SeasideAsync package has some Javascript support for tracking
events.

html textInput ...;
forEvent: 'onblur' callback: [:event | ... ];

html textInput ...;
onFocusCallback: [:event | ... ];
...

where the event object has some interesting accessors.

This may help.

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

Lukas Renggli

Re: FormElement focus after an update

> The SeasideAsync package has some Javascript support for tracking
> events.
>
> html textInput ...;
> forEvent: 'onblur' callback: [:event | ... ];
>
> html textInput ...;
> onFocusCallback: [:event | ... ];
> ...
>
> where the event object has some interesting accessors.

Of course you can do the same with Scriptaculous:

html textInput
onFocus: (html request
callback: [ :value | current := value ]
value: (SUEvent new element; access: 'id'));
...

Or more efficiently assign the same event to all input fields on the page:

html selector
add: 'input';
do: [ :each |
each element
on: 'blur' do: (html request
callback: [ :value | current := value ]
value: (SUEvent new element; access: 'id') ]

Cheers,
Lukas

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

Sebastian Sastre-2

RE: FormElement focus after an update

In reply to this post by Sebastian Sastre-2

I've reading about the AJAX cycle and reach a partial solution to this by
taking advantage of requests triggers.

Probably you may know this but I write for reference anyway. The thing is
that Prototype makes the ajax requests (and all subspecilized objects like
updaters) to trigger events while it's life cycle it's going on. You can
take a look to #onSuccess: method in SURequest class to see an example.

So I changed the previous code to use instead of:

html updater
...
script: (html formElement id: lastFocusId; focus);
yourself

to this:

html updater
...
onSuccess: (html formElement id: inputTextId; focus);
yourself

This way that script is executed in the last stage of a succesful update

cheers,

Sebastian Sastre
PS: I still don't know why but there is leaving the focus not in the input
text (that has inputTextId) but in one of the parent divs so this solution
is partial.

> -----Mensaje original-----
> De: [hidden email]
> [mailto:[hidden email]] En nombre
> de Sebastian Sastre
> Enviado el: Miércoles, 03 de Octubre de 2007 11:58
> Para: 'Seaside - general discussion'
> Asunto: RE: [Seaside] FormElement focus after an update
>
> Sorry, thanks for ask, I comment code now:
>
> [:html|
> html updater
> "Set the id of the div wrapping the component"
> id: self id;
>
> "Developer being unupdated"
> evalScripts: true;
>
> "A callback to store in the lastFocusId instVar
> of the receiver
> the id of the input text tag in the DOM that is
> trigering
> the #change event that calls this updater as reaction"
> callback:[:focusId| lastFocusId := focusId]
> value: (html formElement
> id: (self at: aSymbol) inputElementId; id);
>
> "A callback to set a fresh value of the model of the
> (sub)component that renders the input text tag with."
> callback:[:v | (self at: aSymbol) model setValue: v]
> value: (html formElement
> id: (self at: aSymbol) inputElementId;
> value);
> "The updater callback for rendering the internal html of
> the receiver (all but wrapping stuff)"
> callback:[:h| self renderInnerContentOn: h.
>
> "A script that tries to set at update time the focus in
> the element (the last #change *neighter*) that
> was the one
> that has caused the #change that has caused
> this updater to be executed"
> h script: (h formElement id: lastFocusId; focus)];
> yourself
> ]
>
> I hope making myself to be understable :P
>
> Sebastian Sastre
>
> > -----Mensaje original-----
> > De: [hidden email]
> > [mailto:[hidden email]] En
> nombre de Lukas
> > Renggli Enviado el: Miércoles, 03 de Octubre de 2007 11:44
> > Para: Seaside - general discussion
> > Asunto: Re: [Seaside] FormElement focus after an update
> >
> > > it's me searching wrongly or there is no javascript to
> > query which
> > > element has focus in a form?
> >
> > I don't think that's easily possible. Maybe CSS3 will help
> in a couple
> > of years.
> >
> > > We want some input text #change to update some
> > component but after
> > > the update the focus remains on it. Well in fact even
> > better will be
> > > that the focus remains in the different input text that had
> > caused the
> > > #change to trigger.
> > >
> > > I've tried to emulate this by making the updater like this:
> > > [:html|
> > > html updater
> > > id: self id;
> > > evalScripts: true;
> >
> > That's not necessary anymore. This is the default nowadays ;-)
> >
> > > callback:[:focusId| lastFocusId := focusId]
> > > value: (html formElement
> > > id: (self at: aSymbol) inputElementId; id);
> > > callback:[:v | (self at: aSymbol) model setValue: v]
> > > value: (html formElement
> > > id: (self at: aSymbol) inputElementId;
> > > value);
> >
> > I don't get this lines. What are they supposed to do?
> >
> > > callback:[:h| self renderInnerContentOn: h.
> > > h script: (h formElement id: lastFocusId; focus)];
> > > yourself
> > > ]
> > >
> > > but this does not work for some reason I dont get yet
> > >
> > > Did anyone managed to recover focus state in a similar
> > scenario?
> > > any idea on how to do it?
> >
> > You can track the focus using JavaScript and onFocus/onBlur
> events on
> > all the required elements.
> >
> > Lukas
> >
> > --
> > Lukas Renggli
> > http://www.lukas-renggli.ch
> > _______________________________________________
> > 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

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