Wrong page beforein event triggered

I have the following situation:

I got 3 pages
user profile > list user props > modify user prop

All 3 pages contains a OnPageBeforeIn Event and work properly from left to right but when I modify a user prop and execute f7router.back(); the “user profile” page OnPageBeforeIn event is triggered instead of the “list user props” page OnPageBeforeIn event.

Is so weird, I dont know what is happening.

Can you create a live example using template from here? How to ask a good question on forum

@nolimits4web I’ve uploaded all files from my src folder but i cant make it work on that environment because of cors, you can download and test local in localhost:3000.

The steps for reproduction are the following:
Log in ----
click on Doors.Party Encargado>
Click on Gestionar Vendedores (here you will receive an alert saying “vendedores”, showing that the onpage before in of vendedores is triggered)
Click on the ticket icon (here you will receive an alert saying “hola”, showing that the onpage before in of limitar is triggered.
Now Click on the last item of the list
On the first smart select choose another item.
Save on the bottom of the page
Then you will get a confirmation and the page will go back
But here you will receive an alert saying “vendedores” instead of “hola” as it suposed to be.

But I am sure you can create a minimal live working example with just 3 Svelte pages using pageBeforeIn events to see if it happens there

Will try, give me some minutes.

@nolimits4web i keep getting this error on the sandbox:

'target' is a required option
const app = new App({ target: document.body });

@nolimits4web since I cant make work the svelte sandbox, i did some research and this is what’s happening (i dont know how to fixit :frowning: )

As I said I have 3 pages user profile > list user props > modify user prop
I’ve used a console.log(f7route); and this is the behaviour:
1st on user profile: the page shown is user profile and the route shown is user profile.
2nd i press a list user props to go to the second page, there the page shown is list user props and the route shown is list user props
3rd i press a prop on the list to go to modify user prop, there the page shown is modify user prop and the route shown is modify user prop
4th i press back to go to the list user props, there the page shown is list user props but the route shown is user profile.

This issue could have something to be with parameters on the path of the route?
because, user profile has no path parameters but list user props and modify user props have path parameters, an example down here:

{ path: '/userprofile/', component: UserProfile, },
{ path: '/userprops/:iduser', component: UserProps, },
{ path: '/moduserprop/:idprop', component: ModUserProp, },

Hello there!

I stumbled upon this problem too and this is not really a problem, this is working as intended.

When you go to the third page and go back to your previous page you’re not sending any props when doing a back event, only when doing a forward event.

You need to use the store in order to store the userid which could be convenient since you can use it for other things too.

If you have any questions let me now.

2 Likes

Thank you man!!!

@Travis_Antonio I’m sad, i’ve tried that but i’m getting the same behaviour :frowning:

I really don’t know what to do

@nolimits4web could be this the issue? F7 V2 back button behavior - #5 by nolimits4web if so, how could i trigger the beforeIn event when going back just 1 time?

Well looking at the DOM i’ve cheked that:
the listuserprops page (from this schema user profile > list user props > modify user prop) is preloaded on the page-previous and then is moved to page-current, but in this transition the onPageBeforeIn event is not triggered, the one triggered is the one from user profile that is loaded in the page previous slot.

I think the issue is that the list user props page is never reloaded because it just move from current to previous to current again, so the onpagebeforein event is not triggered.

How could I trigger an event when going back one page?

@nolimits4web

Did you use the store correctly? Could you show us your code? Because if not, we can not help you, that’s why @nolimits4web said to create a Sandbox with it.

The svelte sandbox template has a bug on it, as I mentioned earlier.

I’ve uploaded my whole code here, if you want to take a peek

I’ve just tested and the event before in is only triggered when going back if the page is loaded on the previous page div on the dom.

So again, my question is how to trigger the OnPageBeforeIn Event of the inmediate previous page on history when going back

@nolimits4web @Travis_Antonio

Can you point which files are you having the error?

Yes of course @Travis_Antonio , on my example
user profile > list user props > modify user prop
the concordating files are
/encargados/vendedores/ > /encargados/limitar/ > /encargados/modificarlimitacion/

I saw your code, you’re not using actions or getters from the store in order to edit (actions) or get (getters) and that’s why it is not working, in order for the store to be reactive you can’t edit the states directly, you need to use actions and getters.

Could you give me a short example?
I’ll reproduce and retry

But @Travis_Antonio the issue is not with the store here, the issue is that the event is not triggered :frowning:
forgot the Json Requests, think of the beforein event as just an alert that doesn’t use store. is still untriggered

I have never used Stelve so I had to learn a little bit in order to answer you correctly, aside, you’re using the store wrong either way.

Here is the solution:

You’re using the call for the onPageBeforeIn wrong, you need to do it the way down below in all of your code. Also you may ask yourself now why is it working? Because you’re actually calling the function but only once and the onPageBeforeIn is not working, it is omitting it and just calling directly the function when you enter the page for the first time.

<Page name="vendedores" {onPageBeforeIn}>

	  const onPageBeforeIn = () => {
		BeforeIn();
	  };
        function BeforeIn(){      
            console.log(f7route);
            f7.preloader.show();    
                ...
        }
2 Likes