# Triggers not working in Each Statement

**URL:** <https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849>\
**Category:** General\
**Created:** [September 26, 2016, 6:05am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849 "2016-09-26T06:05:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sangosanyasegun](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sangosanyasegun](https://forums.fusetools.com/u/sangosanyasegun)\
**Post date:** [September 26, 2016, 6:05am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/1 "2016-09-26T06:05:47Z")

</div>

the clicked trigger is working on desktop preview but not working on android.  
nothing happens when i click it on android.

please what am i doing wrong?

```
							<Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
								<Text Alignment="Center" Width="40%" Value="Reload" Color="#fff">
								</Text>
							</Button>

							
						</DockPanel>
						<Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
					</StackPanel>
					<!-- Info -->

					<Each Items="{list}">
					 <StackPanel Color="#aaa" Height="90">
						<Button Clicked="{edit}" Text="Click me"></Button>
					</StackPanel>
				</Each>
				</StackPanel>
			</StackPanel>
```

---

<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:** [September 26, 2016, 6:15am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/2 "2016-09-26T06:15:14Z")

</div>

Hey Sango, please do post the code you have, otherwise it’s impossible to tell.

---

<div class="post-metadata">

**Author:** ![sangosanyasegun](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sangosanyasegun](https://forums.fusetools.com/u/sangosanyasegun)\
**Post date:** [September 26, 2016, 6:24am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/3 "2016-09-26T06:24:58Z")

</div>

```auto
<Javascript>
var Observable = require('FuseJS/Observable');

    var list = Observable(
      {"id":"01", "text":"first"},
      {"id":"02", "text":"second"},
      {"id":"03", "text":"third"}
      );

function edit(arg){
console.log("edit clicked");
router.push("admin_page");
}

module.export{
list : list,
edit : edit,
}

</Javascript>

<StackPanel Width="100%" Margin="20,3,20,3">
						<!-- Info -->
						<StackPanel Orientation="Vertical" MinHeight="50" Margin="0,0,0,10">
							<DockPanel Width="50%" Alignment="Left" Height="100%">
								<Button Dock="Top" Padding="5,5,5,5" Margin="0,3,0,10" Color="{StyleVariables.primaryColor}" Clicked="{delete_all}">
									<Text Alignment="Center" Width="40%" Value="Delete All" Color="#fff">
									</Text>
								</Button>

								<Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
									<Text Alignment="Center" Width="40%" Value="Reload" Color="#fff">
									</Text>
								</Button>

								
							</DockPanel>
							<Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
						</StackPanel>
						<!-- Info -->

						<Each Items="{list}">
						 <StackPanel Color="#aaa" Height="90">
							<Button Clicked="{edit}" Text="Click me"></Button>
						</StackPanel>
					</Each>
					</StackPanel>
				</StackPanel>

```

---

<div class="post-metadata">

**Author:** ![sangosanyasegun](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sangosanyasegun](https://forums.fusetools.com/u/sangosanyasegun)\
**Post date:** [September 26, 2016, 6:34am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/4 "2016-09-26T06:34:12Z")

</div>

> **Uldis wrote:**
> 
> Hey Sango, please do post the code you have, otherwise it’s impossible to tell.

```auto
<Javascript>
var Observable = require('FuseJS/Observable');

    var list = Observable(
      {"id":"01", "text":"first"},
      {"id":"02", "text":"second"},
      {"id":"03", "text":"third"}
      );

function edit(arg){
console.log("edit clicked");
router.push("admin_page");
}

module.export{
list : list,
edit : edit,
}

</Javascript>

<StackPanel Width="100%" Margin="20,3,20,3">
                        <!-- Info -->
                        <StackPanel Orientation="Vertical" MinHeight="50" Margin="0,0,0,10">
                            <DockPanel Width="50%" Alignment="Left" Height="100%">
                                <Button Dock="Top" Padding="5,5,5,5" Margin="0,3,0,10" Color="{StyleVariables.primaryColor}" Clicked="{delete_all}">
                                    <Text Alignment="Center" Width="40%" Value="Delete All" Color="#fff">
                                    </Text>
                                </Button>

                                <Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
                                    <Text Alignment="Center" Width="40%" Value="Reload" Color="#fff">
                                    </Text>
                                </Button>

                            </DockPanel>
                            <Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
                        </StackPanel>
                        <!-- Info -->

                        <Each Items="{list}">
                         <StackPanel Color="#aaa" Height="90">
                            <Button Clicked="{edit}" Text="Click me"></Button>
                        </StackPanel>
                    </Each>
                    </StackPanel>
                </StackPanel>

```

---

<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:** [September 26, 2016, 6:43am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/5 "2016-09-26T06:43:13Z")

</div>

Well, there are a number of things wrong with the code you posted. Here, let me break it down for you:

```auto
<!-- First of all, either you did not have an opening App tag, or you did not post your full code -->
<App Background="#eee">
<!-- Then, notice how you had Javascript, while the correct syntax is JavaScript (note the capital S) -->
<JavaScript>
var Observable = require('FuseJS/Observable');
var list = Observable(
	{"id":"01", "text":"first"},
	{"id":"02", "text":"second"},
	{"id":"03", "text":"third"}
);

function edit(arg){
	console.log("edit clicked: " + JSON.stringify(arg.data));
	// router.push("admin_page");
}

// here, module.exports is an object! And it ends with an s, not like you had it.
module.exports = {
	'list': list,
	'edit': edit
};
// and again, correct syntax for JavaScript
</JavaScript>

	<StackPanel Width="100%" Margin="20,3,20,3">
		<StackPanel Orientation="Vertical" MinHeight="50" Margin="0,0,0,10">
			<DockPanel Width="50%" Alignment="Left" Height="100%">
				<Button Dock="Top" Padding="5,5,5,5" Margin="0,3,0,10" Color="{StyleVariables.primaryColor}" Clicked="{delete_all}">
					<Text Alignment="Center" Width="40%" Value="Delete All" Color="#fff"></Text>
				</Button>
				<!-- There is no {refresh} to be called in JS!!! -->
				<!-- There are no {StyleVariables} exported from JS!!! -->
				<Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
					<Text Alignment="Center" Width="40%" Value="Reload" Color="#fff"></Text>
				</Button>
			</DockPanel>
			<!-- There is no {result_count} exported from JS!!! -->
			<Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
		</StackPanel>

		<!-- And the part following this was a mess... -->
		<StackPanel ItemSpacing="3">
			<!-- You do want to put the StackPanel outside of Each, so that the looped items get stacked! -->
			<Each Items="{list}">
				<!-- The height should be set on a Panel, not a StackPanel, for a number of reasons. -->
				<!-- Here, you should also use a HitTestMode to make the entire block respond to click events, otherwise it's hard to hit on devices (butter fingers!) -->
				<Panel Background="#aaa" Height="90" HitTestMode="LocalBoundsAndChildren">
					<!-- And instead of using a Button with a Clicked property, just go with a Clicked event and have a Callback with a Handler in it. Much more easier to construct whatever visual you need for a button of your own. -->
					<Clicked>
						<Callback Handler="{edit}" />
					</Clicked>
					<Text Alignment="Center" Value="Click me" Color="#fff" />
				</Panel>
			</Each>
		</StackPanel>
	</StackPanel>
</App>

```

Hope this helps.

---

<div class="post-metadata">

**Author:** ![sangosanyasegun](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sangosanyasegun](https://forums.fusetools.com/u/sangosanyasegun)\
**Post date:** [September 26, 2016, 7:08am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/6 "2016-09-26T07:08:45Z")

</div>

> **Uldis wrote:**
> 
> Well, there are a number of things wrong with the code you posted. Here, let me break it down for you:
> 
> ```auto
> <!-- First of all, either you did not have an opening App tag, or you did not post your full code -->
> <App Background="#eee">
> <!-- Then, notice how you had Javascript, while the correct syntax is JavaScript (note the capital S) -->
> <JavaScript>
> var Observable = require('FuseJS/Observable');
> var list = Observable(
> {"id":"01", "text":"first"},
> {"id":"02", "text":"second"},
> {"id":"03", "text":"third"}
> );
> 
> function edit(arg){
> console.log("edit clicked: " + JSON.stringify(arg.data));
> // router.push("admin_page");
> }
> 
> // here, module.exports is an object! And it ends with an s, not like you had it.
> module.exports = {
> 'list': list,
> 'edit': edit
> };
> // and again, correct syntax for JavaScript
> </JavaScript>
> 
> <StackPanel Width="100%" Margin="20,3,20,3">
> <StackPanel Orientation="Vertical" MinHeight="50" Margin="0,0,0,10">
> <DockPanel Width="50%" Alignment="Left" Height="100%">
> <Button Dock="Top" Padding="5,5,5,5" Margin="0,3,0,10" Color="{StyleVariables.primaryColor}" Clicked="{delete_all}">
> <Text Alignment="Center" Width="40%" Value="Delete All" Color="#fff"></Text>
> </Button>
> <!-- There is no {refresh} to be called in JS!!! -->
> <!-- There are no {StyleVariables} exported from JS!!! -->
> <Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
> <Text Alignment="Center" Width="40%" Value="Reload" Color="#fff"></Text>
> </Button>
> </DockPanel>
> <!-- There is no {result_count} exported from JS!!! -->
> <Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
> </StackPanel>
> 
> <!-- And the part following this was a mess... -->
> <StackPanel ItemSpacing="3">
> <!-- You do want to put the StackPanel outside of Each, so that the looped items get stacked! -->
> <Each Items="{list}">
> <!-- The height should be set on a Panel, not a StackPanel, for a number of reasons. -->
> <!-- Here, you should also use a HitTestMode to make the entire block respond to click events, otherwise it's hard to hit on devices (butter fingers!) -->
> <Panel Background="#aaa" Height="90" HitTestMode="LocalBoundsAndChildren">
> <!-- And instead of using a Button with a Clicked property, just go with a Clicked event and have a Callback with a Handler in it. Much more easier to construct whatever visual you need for a button of your own. -->
> <Clicked>
> <Callback Handler="{edit}" />
> </Clicked>
> <Text Alignment="Center" Value="Click me" Color="#fff" />
> </Panel>
> </Each>
> </StackPanel>
> </StackPanel>
> </App>
> 
> ```
> 
> Hope this helps.

thats not the complete code tho.  
still not working. ok, check this out UX only. The desktop preview works perfectly, but on android nothing happens

```auto
<Each Items="{list}">
<Panel Color="#aaa" ux:Name="kk" Height="90" HitTestMode="LocalBoundsAndChildren">
<Button Text="Click me">
   <Clicked>		                        
       <Set kk.Color="#000"/>
   </Clicked>
</Button>
								
</Panel>
</Each>

```

---

<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:** [September 26, 2016, 7:14am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/7 "2016-09-26T07:14:17Z")

</div>

> **[sangosanyasegun@yahoo.com](mailto:sangosanyasegun@yahoo.com) wrote:**
> 
> thats not the complete code tho.  
> still not working. ok, check this out UX only. The desktop preview works perfectly, but on android nothing happens
> 
> ```auto
> <Each Items="{list}">
> <Panel Color="#aaa" ux:Name="kk" Height="90" HitTestMode="LocalBoundsAndChildren">
> <Button Text="Click me">
> <Clicked>		                        
> <Set kk.Color="#000"/>
> </Clicked>
> </Button>
> 								
> </Panel>
> </Each>
> 
> ```

How do you expect anyone to help you if you’re not posting full code?

Plus, you clearly did not spend the time to comprehend what I suggested you do inside of that `Each`, since you’ve reverted back to using a `Button` and basically complaining that “the way it did not work before, still does not work”. Well, it’s very likely not going to change.

---

<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:** [September 26, 2016, 7:18am UTC](https://forums.fusetools.com/t/triggers-not-working-in-each-statement/3849/8 "2016-09-26T07:18:57Z")

</div>

Specifically, this part right there:

```auto
            <Each Items="{list}">
                <Panel Background="#aaa" Height="90" HitTestMode="LocalBoundsAndChildren">
                    <!-- THERE IS NO BUTTON HERE, THE WHOLE PANEL IS CLICKABLE -->
                    <Clicked>
                        <Callback Handler="{edit}" />
                    </Clicked>
                    <Text Alignment="Center" Value="Click me" Color="#fff" />
                </Panel>
            </Each>

```