Browser History API

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Browser History API

JumpStart
Has anyone made use of the browser History API with Tapestry AJAX calls?

I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.

The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.

But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.

Cheers,

Geoff
---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Browser History API

Carlos Montero Canabal
Hi Geoof,

Yes, I have to use to create a spa. I have an simple example here
http://tapestry5.dev-util.com/specialpages/spa/block1 . You can click on
link Page2 and Page1 an check the ajax requests and the url on browser. You
can click then on Back button and and see how the url and zone content
updates with the specific content. The main tasks are:
- Create the restore url for Back button
- Create a method to init the zone when a user Reload the page (in my
example I do this on IndexPage)

I hope the example helps you.

Regards

Carlos Montero

El jue., 21 feb. 2019 a las 5:39, JumpStart (<
[hidden email]>) escribió:

> Has anyone made use of the browser History API with Tapestry AJAX calls?
>
> I have an essentially single page app, all done with Zones and async event
> links. Tabs down one side flips between major functions (eg. Clients,
> Calendar, Billing), replacing the main pane contents, and clicking on
> buttons and links in the pane will often drill into a sub-function (eg.
> View Client, Pay Invoice). All requests are async=“true” and render Zones.
>
> The problem is that the URL in the browser never changes, so if you choose
> Refresh then you’ll go back to the initially displayed page.
>
> But, the app does support query params in the URLs that can navigate to
> the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a
> way to tell AjaxResponseRenderer what URL I’d like handed to the browser
> History API, and for it to be done automatically.
>
> Cheers,
>
> Geoff
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

RE: Browser History API

Svein
In reply to this post by JumpStart
You can manipulate the URL from Javascript/Typescript:

(history as History).replaceState(null, "", location.protocol + '//' + location.host + location.pathname + "/yourUrlPart");

-----Original Message-----
From: JumpStart <[hidden email]>
Sent: torsdag 21. februar 2019 05:39
To: Tapestry users <[hidden email]>
Subject: Browser History API

Has anyone made use of the browser History API with Tapestry AJAX calls?

I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.

The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.

But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.

Cheers,

Geoff
---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: Browser History API

JumpStart
In reply to this post by Carlos Montero Canabal
Very cool. Thank you.

Geoff

> On 21 Feb 2019, at 2:57 pm, Carlos Montero Canabal <[hidden email]> wrote:
>
> Hi Geoof,
>
> Yes, I have to use to create a spa. I have an simple example here
> http://tapestry5.dev-util.com/specialpages/spa/block1 . You can click on
> link Page2 and Page1 an check the ajax requests and the url on browser. You
> can click then on Back button and and see how the url and zone content
> updates with the specific content. The main tasks are:
> - Create the restore url for Back button
> - Create a method to init the zone when a user Reload the page (in my
> example I do this on IndexPage)
>
> I hope the example helps you.
>
> Regards
>
> Carlos Montero
>
> El jue., 21 feb. 2019 a las 5:39, JumpStart (<
> [hidden email]>) escribió:
>
>> Has anyone made use of the browser History API with Tapestry AJAX calls?
>>
>> I have an essentially single page app, all done with Zones and async event
>> links. Tabs down one side flips between major functions (eg. Clients,
>> Calendar, Billing), replacing the main pane contents, and clicking on
>> buttons and links in the pane will often drill into a sub-function (eg.
>> View Client, Pay Invoice). All requests are async=“true” and render Zones.
>>
>> The problem is that the URL in the browser never changes, so if you choose
>> Refresh then you’ll go back to the initially displayed page.
>>
>> But, the app does support query params in the URLs that can navigate to
>> the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a
>> way to tell AjaxResponseRenderer what URL I’d like handed to the browser
>> History API, and for it to be done automatically.
>>
>> Cheers,
>>
>> Geoff
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Browser History API

JumpStart
In reply to this post by Svein
Thank you, but I think I’ll mostly want the server-side making the decision on what to make navigable. We shall see how that pans out.

> On 21 Feb 2019, at 3:29 pm, Svein-Erik Løken <[hidden email]> wrote:
>
> You can manipulate the URL from Javascript/Typescript:
>
> (history as History).replaceState(null, "", location.protocol + '//' + location.host + location.pathname + "/yourUrlPart");
>
> -----Original Message-----
> From: JumpStart <[hidden email]>
> Sent: torsdag 21. februar 2019 05:39
> To: Tapestry users <[hidden email]>
> Subject: Browser History API
>
> Has anyone made use of the browser History API with Tapestry AJAX calls?
>
> I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.
>
> The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.
>
> But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.
>
> Cheers,
>
> Geoff
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

RE: Browser History API

Svein
For single page web apps I recommend setting:

response.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store");

I am using Tapestry + React + Typescript for my single page application - works very well 😊

-----Original Message-----
From: JumpStart <[hidden email]>
Sent: fredag 22. februar 2019 02:16
To: Tapestry users <[hidden email]>
Subject: Re: Browser History API

Thank you, but I think I’ll mostly want the server-side making the decision on what to make navigable. We shall see how that pans out.

> On 21 Feb 2019, at 3:29 pm, Svein-Erik Løken <[hidden email]> wrote:
>
> You can manipulate the URL from Javascript/Typescript:
>
> (history as History).replaceState(null, "", location.protocol + '//' + location.host + location.pathname + "/yourUrlPart");
>
> -----Original Message-----
> From: JumpStart <[hidden email]>
> Sent: torsdag 21. februar 2019 05:39
> To: Tapestry users <[hidden email]>
> Subject: Browser History API
>
> Has anyone made use of the browser History API with Tapestry AJAX calls?
>
> I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.
>
> The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.
>
> But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.
>
> Cheers,
>
> Geoff
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: Browser History API

JumpStart
Very interesting. A couple of questions:

What issues is that header addressing?

What role is Tapestry playing in your spa? How is React communicating with Tapestry?

> On 22 Feb 2019, at 3:26 pm, Svein-Erik Løken <[hidden email]> wrote:
>
> For single page web apps I recommend setting:
>
> response.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store");
>
> I am using Tapestry + React + Typescript for my single page application - works very well 😊
>
> -----Original Message-----
> From: JumpStart <[hidden email]>
> Sent: fredag 22. februar 2019 02:16
> To: Tapestry users <[hidden email]>
> Subject: Re: Browser History API
>
> Thank you, but I think I’ll mostly want the server-side making the decision on what to make navigable. We shall see how that pans out.
>
>> On 21 Feb 2019, at 3:29 pm, Svein-Erik Løken <[hidden email]> wrote:
>>
>> You can manipulate the URL from Javascript/Typescript:
>>
>> (history as History).replaceState(null, "", location.protocol + '//' + location.host + location.pathname + "/yourUrlPart");
>>
>> -----Original Message-----
>> From: JumpStart <[hidden email]>
>> Sent: torsdag 21. februar 2019 05:39
>> To: Tapestry users <[hidden email]>
>> Subject: Browser History API
>>
>> Has anyone made use of the browser History API with Tapestry AJAX calls?
>>
>> I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.
>>
>> The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.
>>
>> But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.
>>
>> Cheers,
>>
>> Geoff
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

RE: Browser History API

Svein
On history back (back button I browser) an old page can be used (included outdated cookies).

I am using Tapestry templates if it fills my needs. The code gets more robust that way. On more complicated UX parts when state changes and fields need to be updated React is very nice. When Tapestry Zones gets to complicated I switch to React, or mix them.

The communication with Tapestry is done using ajax or forms. A snippet using Tapestry form:

       let $hiddenAirTemp = $("[data-id='hiddenAirTemp']");
        let $waxDataForm = $(waxDataFormSelector);
        WaxEndUser.stopCallback = (y: number) => {
            $hiddenAirTemp.val(WaxEndUser.airTemp);
            $waxDataForm.submit();
        };

I use Tapestry Ajax to get good error messages:

       writeCookies() {
            let options: MapUserSettings = {
                focusSkateTrail: this.focusSkateTrail
            };
            TapestryUtil.ajax("/index" + ":writeMapUserSettingsCookies", {data: options});
        };

tapestryutil.ts:
...
/*
     * @public
     * @param {string} url
     * @param {Object=} options
     * @param {{}|String|Array} [options.data]
     * @param {String} [options.method=POST]
     * @param {TapestryUtil.ResponseFunction} [options.success]
     * @param {TapestryUtil.ResponseFunction} [options.failure]
     * @param {Function} [options.complete]
     * @returns TapestryUtil.RequestWrapper
     */
    static ajax(url: string, options?: AjaxOptions): RequestWrapper {
        let newOptions = {...options};
        return Ajax(url, newOptions);
    };


I think TypeScript is a "must" to get good client code. I use also JSX. I am looking for a way to use the same interface for Tapstery/Java services and Typescript for data access. Maybe Kotlin can be used.

S-E


-----Original Message-----
From: JumpStart <[hidden email]>
Sent: lørdag 23. februar 2019 03:01
To: Tapestry users <[hidden email]>
Subject: Re: Browser History API

Very interesting. A couple of questions:

What issues is that header addressing?

What role is Tapestry playing in your spa? How is React communicating with Tapestry?

> On 22 Feb 2019, at 3:26 pm, Svein-Erik Løken <[hidden email]> wrote:
>
> For single page web apps I recommend setting:
>
> response.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store");
>
> I am using Tapestry + React + Typescript for my single page application - works very well 😊
>
> -----Original Message-----
> From: JumpStart <[hidden email]>
> Sent: fredag 22. februar 2019 02:16
> To: Tapestry users <[hidden email]>
> Subject: Re: Browser History API
>
> Thank you, but I think I’ll mostly want the server-side making the decision on what to make navigable. We shall see how that pans out.
>
>> On 21 Feb 2019, at 3:29 pm, Svein-Erik Løken <[hidden email]> wrote:
>>
>> You can manipulate the URL from Javascript/Typescript:
>>
>> (history as History).replaceState(null, "", location.protocol + '//' + location.host + location.pathname + "/yourUrlPart");
>>
>> -----Original Message-----
>> From: JumpStart <[hidden email]>
>> Sent: torsdag 21. februar 2019 05:39
>> To: Tapestry users <[hidden email]>
>> Subject: Browser History API
>>
>> Has anyone made use of the browser History API with Tapestry AJAX calls?
>>
>> I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.
>>
>> The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.
>>
>> But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.
>>
>> Cheers,
>>
>> Geoff
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: Browser History API

JumpStart
Thank you.

> On 23 Feb 2019, at 5:24 pm, Svein-Erik Løken <[hidden email]> wrote:
>
> On history back (back button I browser) an old page can be used (included outdated cookies).
>
> I am using Tapestry templates if it fills my needs. The code gets more robust that way. On more complicated UX parts when state changes and fields need to be updated React is very nice. When Tapestry Zones gets to complicated I switch to React, or mix them.
>
> The communication with Tapestry is done using ajax or forms. A snippet using Tapestry form:
>
>       let $hiddenAirTemp = $("[data-id='hiddenAirTemp']");
>        let $waxDataForm = $(waxDataFormSelector);
>        WaxEndUser.stopCallback = (y: number) => {
>            $hiddenAirTemp.val(WaxEndUser.airTemp);
>            $waxDataForm.submit();
>        };
>
> I use Tapestry Ajax to get good error messages:
>
>       writeCookies() {
>            let options: MapUserSettings = {
>                focusSkateTrail: this.focusSkateTrail
>            };
>            TapestryUtil.ajax("/index" + ":writeMapUserSettingsCookies", {data: options});
>        };
>
> tapestryutil.ts:
> ...
> /*
>     * @public
>     * @param {string} url
>     * @param {Object=} options
>     * @param {{}|String|Array} [options.data]
>     * @param {String} [options.method=POST]
>     * @param {TapestryUtil.ResponseFunction} [options.success]
>     * @param {TapestryUtil.ResponseFunction} [options.failure]
>     * @param {Function} [options.complete]
>     * @returns TapestryUtil.RequestWrapper
>     */
>    static ajax(url: string, options?: AjaxOptions): RequestWrapper {
>        let newOptions = {...options};
>        return Ajax(url, newOptions);
>    };
>
>
> I think TypeScript is a "must" to get good client code. I use also JSX. I am looking for a way to use the same interface for Tapstery/Java services and Typescript for data access. Maybe Kotlin can be used.
>
> S-E
>
>
> -----Original Message-----
> From: JumpStart <[hidden email]>
> Sent: lørdag 23. februar 2019 03:01
> To: Tapestry users <[hidden email]>
> Subject: Re: Browser History API
>
> Very interesting. A couple of questions:
>
> What issues is that header addressing?
>
> What role is Tapestry playing in your spa? How is React communicating with Tapestry?
>
>> On 22 Feb 2019, at 3:26 pm, Svein-Erik Løken <[hidden email]> wrote:
>>
>> For single page web apps I recommend setting:
>>
>> response.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store");
>>
>> I am using Tapestry + React + Typescript for my single page application - works very well 😊
>>
>> -----Original Message-----
>> From: JumpStart <[hidden email]>
>> Sent: fredag 22. februar 2019 02:16
>> To: Tapestry users <[hidden email]>
>> Subject: Re: Browser History API
>>
>> Thank you, but I think I’ll mostly want the server-side making the decision on what to make navigable. We shall see how that pans out.
>>
>>> On 21 Feb 2019, at 3:29 pm, Svein-Erik Løken <[hidden email]> wrote:
>>>
>>> You can manipulate the URL from Javascript/Typescript:
>>>
>>> (history as History).replaceState(null, "", location.protocol + '//' + location.host + location.pathname + "/yourUrlPart");
>>>
>>> -----Original Message-----
>>> From: JumpStart <[hidden email]>
>>> Sent: torsdag 21. februar 2019 05:39
>>> To: Tapestry users <[hidden email]>
>>> Subject: Browser History API
>>>
>>> Has anyone made use of the browser History API with Tapestry AJAX calls?
>>>
>>> I have an essentially single page app, all done with Zones and async event links. Tabs down one side flips between major functions (eg. Clients, Calendar, Billing), replacing the main pane contents, and clicking on buttons and links in the pane will often drill into a sub-function (eg. View Client, Pay Invoice). All requests are async=“true” and render Zones.
>>>
>>> The problem is that the URL in the browser never changes, so if you choose Refresh then you’ll go back to the initially displayed page.
>>>
>>> But, the app does support query params in the URLs that can navigate to the right place (eg. ?fun=CLIENT&sub=UPDATE). I guess what I’d like is a way to tell AjaxResponseRenderer what URL I’d like handed to the browser History API, and for it to be done automatically.
>>>
>>> Cheers,
>>>
>>> Geoff
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]