Refload page on typing without losing focus?
Locked
 
|
Hello,
I managed to show a validation message beneath an input field of type text on every keypress using jQuery. In this case I knew exactly which DOM element to change. Now I would like to refresh the whole page on every keypress without having to know which DOM elements need changing. In the keypress callback I change some state and then I would like to rerender the page like it would when using renderContentOn:. I know how to trigger a page reload. However, the challenge is to keep editing the input field, i.e. the keyboard focus, the cursor position and the text selection. Is this possible somehow? Any help would be appreciated. - Bernhard _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Refload page on typing without losing focus?
|
|
That’s not really possible.
If you want to keep cursor position and keyboard focus etc… you can only do that by _not_ refreshing the input field itself. i.e. use Ajax updates for the other elements you want to update… cheers Johan > On 25 Mar 2019, at 20:27, Bernhard Pieber <[hidden email]> wrote: > > Hello, > > I managed to show a validation message beneath an input field of type text on every keypress using jQuery. In this case I knew exactly which DOM element to change. > > Now I would like to refresh the whole page on every keypress without having to know which DOM elements need changing. In the keypress callback I change some state and then I would like to rerender the page like it would when using renderContentOn:. > > I know how to trigger a page reload. However, the challenge is to keep editing the input field, i.e. the keyboard focus, the cursor position and the text selection. > > Is this possible somehow? Any help would be appreciated. > > - Bernhard > _______________________________________________ > 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 |
|
|
We do refresh onBlur, so having the user's focus on the widget they selected after the onBlur + refresh was needed. When a widget gets focus we set a global value onFocusWidgetId to the widget id. The on the refresh we include a load script that checks for a non-null onFocusWidgetId value which is not equal to document.activeElement.id and sets it using document.getElementById(onFocusWidgetId).focus(); ... similar logic is used to set the cursor position within an input field, otherwise the cursor is set to the start of the field, even if a user clicked elsewhere. Bob
On Monday, March 25, 2019, 4:42:34 p.m. EDT, Johan Brichau <[hidden email]> wrote:
That’s not really possible. If you want to keep cursor position and keyboard focus etc… you can only do that by _not_ refreshing the input field itself. i.e. use Ajax updates for the other elements you want to update… cheers Johan > On 25 Mar 2019, at 20:27, Bernhard Pieber <[hidden email]> wrote: > > Hello, > > I managed to show a validation message beneath an input field of type text on every keypress using jQuery. In this case I knew exactly which DOM element to change. > > Now I would like to refresh the whole page on every keypress without having to know which DOM elements need changing. In the keypress callback I change some state and then I would like to rerender the page like it would when using renderContentOn:. > > I know how to trigger a page reload. However, the challenge is to keep editing the input field, i.e. the keyboard focus, the cursor position and the text selection. > > Is this possible somehow? Any help would be appreciated. > > - Bernhard > _______________________________________________ > 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
Bob Nemec
|
Re: Refload page on typing without losing focus?
|
|
Bob,
Who is "we" in your statement? :) In any case, the overall interaction would be somewhat clumsy, because you have to wait for the full page reload (AJAX or not) and then focus the proper widget, it is not the same to lose the focus (blur) by pressing tab, than by pressing a random element in the DOM. I had to do the opposite, be able to update the content of a grid of inputs without reloading them to preserve the expected keyboard navigation, and I resorted to a set of helper JS functions that get called in my event handlers (change, blur, etc). The result interaction is very flluid. In any case I don't see why you need to reload the whole page and not parts of it. Regards, Esteban A. Maringolo El mar., 26 mar. 2019 a las 9:09, Bob Nemec (<[hidden email]>) escribió: > > We do refresh onBlur, so having the user's focus on the widget they selected after the onBlur + refresh was needed. When a widget gets focus we set a global value onFocusWidgetId to the widget id. The on the refresh we include a load script that checks for a non-null onFocusWidgetId value which is not equal to document.activeElement.id and sets it using document.getElementById(onFocusWidgetId).focus(); ... similar logic is used to set the cursor position within an input field, otherwise the cursor is set to the start of the field, even if a user clicked elsewhere. > > Bob > > > On Monday, March 25, 2019, 4:42:34 p.m. EDT, Johan Brichau <[hidden email]> wrote: > > > That’s not really possible. > > If you want to keep cursor position and keyboard focus etc… you can only do that by _not_ refreshing the input field itself. > i.e. use Ajax updates for the other elements you want to update… > > cheers > Johan > > > On 25 Mar 2019, at 20:27, Bernhard Pieber <[hidden email]> wrote: > > > > Hello, > > > > I managed to show a validation message beneath an input field of type text on every keypress using jQuery. In this case I knew exactly which DOM element to change. > > > > Now I would like to refresh the whole page on every keypress without having to know which DOM elements need changing. In the keypress callback I change some state and then I would like to rerender the page like it would when using renderContentOn:. > > > > I know how to trigger a page reload. However, the challenge is to keep editing the input field, i.e. the keyboard focus, the cursor position and the text selection. > > > > Is this possible somehow? Any help would be appreciated. > > > > - Bernhard > > _______________________________________________ > > 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 seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Refload page on typing without losing focus?
|
|
Yeah, we (*) also had to resort to using scripts to set the keyboard focus when we had to refresh a component that has nested fields.
However, as I can remember the issues we had to make it work right (and keep it working right): it will be very hard to make it seem as if the entire page refreshes but the input field does not. Just think what happens in the milliseconds time between the moment the user triggers the update (with onBlur or onInput) and the time the page actually refreshes and the script will manipulate the cursor focus and position: did the user type more characters already? Did he move the focus to another field? Depending on the conditions and cases you may end up with, it might or might not work to achieve this using scripts injected on the page. cheers Johan (*) Yesplan ;) > On 26 Mar 2019, at 13:14, Esteban Maringolo <[hidden email]> wrote: > > Bob, > > Who is "we" in your statement? :) > > In any case, the overall interaction would be somewhat clumsy, because > you have to wait for the full page reload (AJAX or not) and then focus > the proper widget, it is not the same to lose the focus (blur) by > pressing tab, than by pressing a random element in the DOM. > > I had to do the opposite, be able to update the content of a grid of > inputs without reloading them to preserve the expected keyboard > navigation, and I resorted to a set of helper JS functions that get > called in my event handlers (change, blur, etc). The result > interaction is very flluid. > > In any case I don't see why you need to reload the whole page and not > parts of it. > > Regards, > > Esteban A. Maringolo > > El mar., 26 mar. 2019 a las 9:09, Bob Nemec (<[hidden email]>) escribió: >> >> We do refresh onBlur, so having the user's focus on the widget they selected after the onBlur + refresh was needed. When a widget gets focus we set a global value onFocusWidgetId to the widget id. The on the refresh we include a load script that checks for a non-null onFocusWidgetId value which is not equal to document.activeElement.id and sets it using document.getElementById(onFocusWidgetId).focus(); ... similar logic is used to set the cursor position within an input field, otherwise the cursor is set to the start of the field, even if a user clicked elsewhere. >> >> Bob >> >> >> On Monday, March 25, 2019, 4:42:34 p.m. EDT, Johan Brichau <[hidden email]> wrote: >> >> >> That’s not really possible. >> >> If you want to keep cursor position and keyboard focus etc… you can only do that by _not_ refreshing the input field itself. >> i.e. use Ajax updates for the other elements you want to update… >> >> cheers >> Johan >> >>> On 25 Mar 2019, at 20:27, Bernhard Pieber <[hidden email]> wrote: >>> >>> Hello, >>> >>> I managed to show a validation message beneath an input field of type text on every keypress using jQuery. In this case I knew exactly which DOM element to change. >>> >>> Now I would like to refresh the whole page on every keypress without having to know which DOM elements need changing. In the keypress callback I change some state and then I would like to rerender the page like it would when using renderContentOn:. >>> >>> I know how to trigger a page reload. However, the challenge is to keep editing the input field, i.e. the keyboard focus, the cursor position and the text selection. >>> >>> Is this possible somehow? Any help would be appreciated. >>> >>> - Bernhard >>> _______________________________________________ >>> 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 > _______________________________________________ > 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 |
|
|
Hi Johan, Bob, Esteban,
Thanks for taking the time to answer my question. I had experimented with the approach of saving the focus widget and the selection and reapplying it after reload. I didn't really succeed to make it work reliably. And I had a lot of flickering and bad performance. Hence my question. It is good to know that someone else succeeded with this approach. So I will continue trying. As for the reason why I would want this functionality: I want to build a very dynamic, user-configurable UI where I don't even know which components will be shown on the page in advance, when I write the callback code. Besides I am a big fan of functional, declarative UIs, where you just write a rendering method and callbacks and the framework calls it when necessary. This architecture is one of the reasons why working in Seaside is so productive. Since React.js this approach is all the rage, declarative and component-based are React's main selling points. Just like Seaside. I would love to keep using that approach also for async client updates. Right now with JQuery one has to work imperatively and that's a pity. See my other thread. - Bernhard > Am 26.03.2019 um 15:11 schrieb Johan Brichau <[hidden email]>: > > Yeah, we (*) also had to resort to using scripts to set the keyboard focus when we had to refresh a component that has nested fields. > However, as I can remember the issues we had to make it work right (and keep it working right): it will be very hard to make it seem as if the entire page refreshes but the input field does not. > > Just think what happens in the milliseconds time between the moment the user triggers the update (with onBlur or onInput) and the time the page actually refreshes and the script will manipulate the cursor focus and position: did the user type more characters already? Did he move the focus to another field? > > Depending on the conditions and cases you may end up with, it might or might not work to achieve this using scripts injected on the page. > > cheers > Johan > > (*) Yesplan ;) > >> On 26 Mar 2019, at 13:14, Esteban Maringolo <[hidden email]> wrote: >> >> Bob, >> >> Who is "we" in your statement? :) >> >> In any case, the overall interaction would be somewhat clumsy, because >> you have to wait for the full page reload (AJAX or not) and then focus >> the proper widget, it is not the same to lose the focus (blur) by >> pressing tab, than by pressing a random element in the DOM. >> >> I had to do the opposite, be able to update the content of a grid of >> inputs without reloading them to preserve the expected keyboard >> navigation, and I resorted to a set of helper JS functions that get >> called in my event handlers (change, blur, etc). The result >> interaction is very flluid. >> >> In any case I don't see why you need to reload the whole page and not >> parts of it. >> >> Regards, >> >> Esteban A. Maringolo >> >> El mar., 26 mar. 2019 a las 9:09, Bob Nemec (<[hidden email]>) escribió: >>> >>> We do refresh onBlur, so having the user's focus on the widget they selected after the onBlur + refresh was needed. When a widget gets focus we set a global value onFocusWidgetId to the widget id. The on the refresh we include a load script that checks for a non-null onFocusWidgetId value which is not equal to document.activeElement.id and sets it using document.getElementById(onFocusWidgetId).focus(); ... similar logic is used to set the cursor position within an input field, otherwise the cursor is set to the start of the field, even if a user clicked elsewhere. >>> >>> Bob >>> >>> >>> On Monday, March 25, 2019, 4:42:34 p.m. EDT, Johan Brichau <[hidden email]> wrote: >>> >>> >>> That’s not really possible. >>> >>> If you want to keep cursor position and keyboard focus etc… you can only do that by _not_ refreshing the input field itself. >>> i.e. use Ajax updates for the other elements you want to update… >>> >>> cheers >>> Johan >>> >>>> On 25 Mar 2019, at 20:27, Bernhard Pieber <[hidden email]> wrote: >>>> >>>> Hello, >>>> >>>> I managed to show a validation message beneath an input field of type text on every keypress using jQuery. In this case I knew exactly which DOM element to change. >>>> >>>> Now I would like to refresh the whole page on every keypress without having to know which DOM elements need changing. In the keypress callback I change some state and then I would like to rerender the page like it would when using renderContentOn:. >>>> >>>> I know how to trigger a page reload. However, the challenge is to keep editing the input field, i.e. the keyboard focus, the cursor position and the text selection. >>>> >>>> Is this possible somehow? Any help would be appreciated. >>>> >>>> - Bernhard >>>> _______________________________________________ >>>> 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 >> _______________________________________________ >> 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 |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |