Change page without init (maintain state)

Questions
1

I have built an app with a view and a few pages.
I use a main page and then anchor to other pages from a left panel. Routes are setup as componentURL to a pages directory, as I saw in examples. Seems to work great ie:
opens html file in pages/connect.html

My question is how to keep the information on the pages, without refreshing?
For instance, I have a form for login on one page. After I login, if I go back to that page, the form goes back to the defaults.

I think I am working around this by storing variables for all the form elements, then initializing them in the pageInit function, but I am wondering if that is necessary. I thought I would have to explicitly call pageInit

I see options for using something like the following in the anchor tag:
data-reload-current=“true”
but it does not seem to be working.

Also wondering if the temporary variables I have set up will keep state, or do I need to look at saving them to store?

Thanks for any help or direction to the right doc or example

2

What you are looking for is stackPages

stackPages boolean false

If enabled then all previous pages in navigation chain will not be removed from DOM when you navigate deeper and deeper. It could be useful, for example, if you have some Form from 5 steps (5 pages) and when you are on last 5th page you need access to form that was on 1st page.

doc:
https://framework7.io/docs/view.html#view-parameters

3

thanks for that. I saw this and wondered if this is what I am after but it looked like it was for a specific purpose. I assume router.back will not work in this case, if the back page was the first AND last page I went to? Or does it keep an ordered stack and then just record the last one I went to (whether or not it was the last one on the stack)?

I want to fill a main page with a list of data. Then I might want to go to any number of pages and come back to the main one, without losing the changes I made to the main page. or maybe a few pages. But I guess I don’t know if I want to keep all the pages or if that is an option. Also, will JS variables in remain constant?

I also see router.cache. Not sure if that is related?

4

I tried the stackPages: true option, but still not working. Do I need to set each page to store or it does automatically?
I simply have two pages. I set a form on the first page to something, change pages, and come back, then the original form is reset ?

5

I have added a jfiddle for what I am trying to do
https://jsfiddle.net/pworthing/zv4pdtom/74/

As a secondary question, I have been scratching my head as to why I have to reload the page to see this working. If I use the RUN button, I get a 404 error when I try to move back to pages or to the second about page.

The main question I have is why can I not type text into the form inputs on these pages and then traverse between pages, keeping the same text there. Each time I use the back button, the text is cleared. I have stackPages:true and I use { force: true, reloadCurrent: false} for the options in the app.router.back call

6

I just noticed the form-store-data class. I don’t think this is what I am after although it might solve the form input in the above jsfiddle.

However, I made another test which changes some html on the page after loading (second button). This is reset after traversing buttons, so it is not really a solution either.
New fiddle : https://jsfiddle.net/pworthing/zv4pdtom/88/

7

stackPages is what you need. Why do you have router.back for every link in JSFiddle. Just use correct navigation (without reloadCurrent) stuff. Also make sure you have correct route for home page, something like { path: '/', pageName: 'home' } or just move home page into url or component too

8

Hi,
Thank you for your help. I thought the calls to back portrayed my setup better. When I click a new page, I have some ajax running to login or show some data based on the login.
From the documentation (shown below), it sounds like you use back for previous pages and navigate for new ones :
- router.back(url, options) Go back to previous page, going back in View history
- router.navigate(parameters, options) Navigate to (load) new page by parameters
Is that what you mean by “correct navigation stuff”. Or do you mean the navigate call?

  1. should it not work the same for links as it does with functions?
  2. I have stackPages defined in both the initial Framework7() initialize function, and the app.views.create() call, but I still don’t see it working.
  3. I have modified to use links also:
    https://jsfiddle.net/pworthing/zv4pdtom/98/
    However, I don’t see a difference. I assume the forms are working now because of the form-store-data class. However, anytime I move back to the main page, the word “changed” is back to “xxx”
  4. Not sure why, but the Link back to main page “/” is not working. The button works with the same url?
  5. as an aside, I noticed a problem if you don’t do a fresh reload of the jsfiddle page. It seems to do a “404 That page doesn’t exist.” on some links, if you use the run button on jsfiddle, instead of the reload.
9

I still see you have router.back() in all the calls, why?

10

I tried to explain it as much as I could. The documentation says back() is used for “Go back to previous page”.

  1. should it not work the same for links as it does with the back() function?

Either way, I added links to use right above the buttons, so I could see the difference. This led to a problem #4, where the link does not work.

11

Here is correct setup of using stackPages https://jsfiddle.net/7tf2odrg/

Note, that using buttons within form elements cause page to reload with form submit, you need to handle it too

12

Thank you so much for this. I only had the form there because I saw the form-store-data class and thought I should try that. Also, I think maybe I tried the navigate() before I saw the stackedPages option, then the documentation made me think back() was to be used. It is getting more clear now.

I noticed that you changed the routing so that the pages are hidden on the base page (stacked: display:hidden). Is this the only way this will work? I had used the ‘content’ parameter for route to mimic the use of componentUrl (hard to show in jsfiddle). I like the use of the separate pages directory to keep things clean. Is this still possible? Or does this always reload with ajax or something?

13

If you want to keep pages alive in DOM all the time then yes. Otherwise you need to use some other technic for caching page state