pageInit event before visible page

I am trying to add dynamic content to a page as it is shown.
I am using the pageInit event to add content to Dom7(".page-current"), but it looks like half of the time it modifies the page that was there before it. Is there a way to determine if the transition has taken place or not? I am using stackPages:true because it was reinitializing pages when I hit the back button.

I have switched to using pageMounted but it appears to do the same thing. Randomly it changes either the new page or the past page. I have tried quickly to look for .page-next , but it seems to be there in both cases. Not sure if I should wait maybe?

page:init
Event will be triggered after Framework7 initialize required page’s components and navbar
------ if components and navbar are initialized, are they not always showing ?

essentially, I am trying this :

.....

Try using pageAfterIn event.
https://framework7.io/docs/page.html#page-events

1 Like

Thankyou for your answer but I tried using that originally and it has a different problem.
pageAfterIn fires after I go back from a stacked page.

For instance, I am editing a ticket and open up a map coordinates page. Then I go back to the edit page and it reinitializes with the same code I use on transition to that page.

stacked page has this back button:

Back

As you are using stackPages:true, everything persists in a routerComponent.

Therefore create a flag after the dynamic content is added to the page, for example contentAdded = true;

And in the pageAfterIn event handler, check for this flag, if it’s value is not true, then only run the function which adds dynamic content to the page.

This way even when you go back to the page, your original data will persist and not everything will initialize from start.

You can also try to use pageBeforeIn and get the current page from event data

I am not sure how pageBeforeIn would be different from pageAfterIn as the problem seems to be that page-current is only set some of the time but your comments made me rethink and use the page variable that is passed into the function, rather than doing a lookup each time for .page-current.
I think it is working better now. Makes more sense to use what I am given, I just had to pass it to later function calls. I will use the variable idea if pageInit causes any more problems.

Thanks for your help to both of you!