What's the best way to fire a JS function when a page is in view?

How-to Discussions
1

Hi guys

What’s the best way to fire a JS function when a page is in view? Basically, i want the app to load only backend data for pages that are in view

I’m for now just using a basic PageControl and Page combination (no routing or navigation).

I went through the documentation and I am down right scratching my head and confused.

2

Hi!

If you’re using a PageControl without a router, you can use the WhileActive trigger to fire a callback:

<Page>
   <WhileActive>
       <Callback Handler="{yourFunction}" />
   </WhileActive>
</Page>
3

Kristian, would that also work with a Navigator? Because from what I’ve seen, it seems the WhileActive is not triggered the first time one lands on a page.

4

Kristian Hasselknippe wrote:

Hi!

If you’re using a PageControl without a router, you can use the WhileActive trigger to fire a callback:

<Page>
   <WhileActive>
       <Callback Handler="{yourFunction}" />
   </WhileActive>
</Page>

Tried it, doesn’t seem to be working…

5

Tried it, doesn’t seem to work… nothing happens (im on the latest fuse as of this posting)

	<PageControl ux:Name="PageControl" Active="{activePage}" AllowedSwipeDirections="Both">


		<Page ux:Name="ttt">
			<Text>TEst</Text>
			<WhileActive>
   				<Callback Handler="{loadDepartments}" />
			</WhileActive>
		</Page>
		
				
	</PageControl>

In case this doesn’t work if the page is the first page in view, I also tried adding a different page to start with and swipe to the target page that should trigger the function, still doesnt work…

	<PageControl ux:Name="PageControl" Active="{activePage}" AllowedSwipeDirections="Both">

		<Page ux:Name="aaa">
			<Text>T####</Text>
			
		</Page>
		
		<Page ux:Name="ttt">
			<Text>TEst</Text>
			<WhileActive>
   				<Callback Handler="{loadDepartments}" />
			</WhileActive>
		</Page>
		
				
	</PageControl>
6

Your 2nd example (with the additional first page) works just fine for me on v0.24. When I swipe to the 2nd page I get the callback:

file
k3VbFzpMHnaa-image-1471935289052.png1398×780

And if you set Bypass="Never" on your WhileActive then it’ll also work even when it’s the first page (e.g. your first example).
The Bypass setting controls whether the trigger should fire also on the initial state and not just when you transition to the active state.