[Seaside] FormElement focus after an update

Sebastian Sastre ssastre at seaswork.com
Mon Oct 15 12:04:34 UTC 2007


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: seaside-bounces at lists.squeakfoundation.org 
> [mailto:seaside-bounces at lists.squeakfoundation.org] 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: seaside-bounces at lists.squeakfoundation.org
> > [mailto:seaside-bounces at lists.squeakfoundation.org] 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
> > Seaside at lists.squeakfoundation.org
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> 
> _______________________________________________
> Seaside mailing list
> Seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



More information about the seaside mailing list