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

**URL:** <https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989>\
**Category:** How-to Discussions\
**Created:** [August 22, 2016, 1:16pm UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989 "2016-08-22T13:16:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mojo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mojo/32/167_2.png) [@Mojo](https://forums.fusetools.com/u/Mojo)\
**Post date:** [August 22, 2016, 1:16pm UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989/1 "2016-08-22T13:16:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [August 22, 2016, 1:18pm UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989/2 "2016-08-22T13:18:06Z")

</div>

Hi!

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

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

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 22, 2016, 1:20pm UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989/3 "2016-08-22T13:20:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mojo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mojo/32/167_2.png) [@Mojo](https://forums.fusetools.com/u/Mojo)\
**Post date:** [August 22, 2016, 11:09pm UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989/4 "2016-08-22T23:09:35Z")

</div>

> **Kristian Hasselknippe wrote:**
> 
> Hi!
> 
> If you’re using a PageControl without a router, you can use the `WhileActive` trigger to fire a callback:
> 
> ```auto
> <Page>
> <WhileActive>
> <Callback Handler="{yourFunction}" />
> </WhileActive>
> </Page>
> 
> ```

Tried it, doesn’t seem to be working…

---

<div class="post-metadata">

**Author:** ![Mojo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mojo/32/167_2.png) [@Mojo](https://forums.fusetools.com/u/Mojo)\
**Post date:** [August 22, 2016, 11:19pm UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989/5 "2016-08-22T23:19:17Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [August 23, 2016, 6:58am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-fire-a-js-function-when-a-page-is-in-view/4989/6 "2016-08-23T06:58:29Z")

</div>

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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/k3VbFzpMHnaa-image-1471935289052.png)

**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.