Force page redraw

Back to How-to Discussions
The issue in this thread has been resolved.

I have Page 1 where I load data from a JSON source. This works great.

I have a click handler, where if clicked, i'd like to populate page 2 from the data from the JSON source loaded previously.

Basically the page 1 click provides the ID of the child notes to be loaded and drawn in to page 2.

However, even though it's mapped to a function, it's not actually drawing anything on page2, it's coming up empty.

This is the javascript:

        var Observable = require("FuseJS/Observable");


        var data = Observable();
        var mata;

        fetch('https://my.json.soource.com')
            .then(function(response) { return response.json(); })
            .then(function(responseObject) { 
                mata = responseObject;
                data.value = responseObject; 

            });

        var locobj = [];

        var foo = function(e){

            var clickedID = e.data.ID;

            mata.ChildNode.forEach(function(Location){
                    locobj.push(Location);
                }
            })

        }

        //console.log(JSON.stringify(locobj))
        
        module.exports = {
            data: data,
            foo: foo,
            locations:locobj
        };            

Using the monitor I can see that when I click Page 1, i get actual location objects, so the loading part works.

Code for Page 1:

<Page ux:Name="page1">  
    <ScrollView>
        <Grid ColumnCount="1">
            <Each Items="{data.ParentNode}">
                <DockPanel Height="300" Margin="10,20">
                    <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"  />
                    <Rectangle Height="200" Dock="Top" Margin="0,-10">
                        <Image File="{Thumb}" Height="230" Padding="30" /> 
                    </Rectangle>
                    <Clicked Handler="{foo}">
                    </Clicked>
                        
                        <Panel>
                        <Text Value="{Title}" TextAlignment="Left" Alignment="Left"  Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
                        <Text Value="{Description}" TextAlignment="Left" Alignment="Left"  Margin="10,30" Padding="10" Dock="Top" TextWrapping="Wrap" />
                        <Text Value="{Thumb.length}" TextAlignment="Left" Alignment="Left"  Margin="10,-10" Padding="10" Dock="Top" TextWrapping="Wrap" />
                    </Panel>
                </DockPanel>
                <Clicked>
                    <Set nav.Active="page2" />
                </Clicked>

            </Each>
        </Grid>
    </ScrollView>

    <WhileActive Threshold="0.5">
        <Set shrinkIndicatorWidth.Value="false" />
        <Set indicatorColorAttractor.Value="color0" />
        <Set bgColorAttractor.Value="color0" />
        <Set titleTextAttractor.Value="color0" />
    </WhileActive>
    <ActivatingAnimation>
        <Change h1.Opacity="1" />
        <Change col1.Width="2" />
        <Change c1.Color="White" />
    </ActivatingAnimation>
</Page>

Page 2 is very much the same, except it uses the location object:

        <Page ux:Name="page2">

            <ScrollView>
                <Grid ColumnCount="1">

                    <Each Items="{locations}">
                        <DockPanel Height="300" Margin="10,20">
                            <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"  />
                            <Rectangle Height="200" Dock="Top" Margin="0,-10">
                                <Image File="Assets/{Thumb}" Height="230" Padding="30" /> 
                            </Rectangle>

                                <Panel>
                                <Text Value="{Title}" TextAlignment="Left" Alignment="Left"  Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
                                <Text Value="{Description}" TextAlignment="Left" Alignment="Left"  Margin="10,30" Padding="10" Dock="Top" TextWrapping="Wrap" />
                            </Panel>
                        </DockPanel>

                    </Each>
                </Grid>
            </ScrollView>               

        </Page>

``` So why is page 2 coming up empty if there's location objects being returned as part of the click?

I'm presuming the initial draw has no location object, so nothing is drawn.

Then when I click, I need to force a redraw, which I dont know how to do?

Hi!

Replace your locobj with an Observable insetad of an array, and you should be fine.

In general, I recommend reading the tutorial and documentation on Observable. Observables are the key to how you update the UI from JS. The UI won't notice if you change a regular array.

Lassen,

It's just not working.

I'm using the dynamic tab example. As soon as I add an "each" cycle in page 2 it breaks it, and nothing is displayed.

Here's the entire code, so you can test it for your self:

<App>
	<ClientPanel>
		<Grid Columns="auto,1*,auto" Height="50" Dock="Top" Margin="5">
			<Grid ColumnCount="2" RowCount="2" Width="22" Height="22" Margin="10">
				<Each Count="4">
					<Circle Color="color4" Margin="1.5"/>
				</Each>
			</Grid>
			<Text ux:Name="titleText" Value="Test 2" Color="color0" FontSize="25" Alignment="Center">
				<Font File="Assets/Fonts/Roboto-Black.ttf" />
			</Text>
			<Image File="Assets/search.png" Color="color4" Width="30" Height="30" Margin="10"/>
		</Grid>

		<Panel Dock="Top" Height="60" >
			<Rectangle ux:Name="indicator" CornerRadius="30" Color="color0" LayoutMaster="p1" Margin="0,10" Width="100%" ZOffset="0.1"/>
			<Grid ColumnCount="5" Margin="-30,0">
				<Panel ux:Name="p1" Column="0" ColumnSpan="2"/>
				<Panel ux:Name="p4" Column="3" ColumnSpan="2"/>
			</Grid>

			<Grid ZOffset="1" Margin="-20,0">
				<Column ux:Name="col1" Width="1" WidthMetric="Proportion"/>
				<Column ux:Name="col2" Width="1" WidthMetric="Proportion"/>
				<Column ux:Name="col3" Width="1" WidthMetric="Proportion"/>
				<Column ux:Name="col4" Width="1" WidthMetric="Proportion"/>

				<Text ux:Class="TabHeader" Color="White" Alignment="CenterLeft" Opacity="0" Margin="20,0,0,0" MinWidth="100"/>
				<Image ux:Class="TabIcon" Width="25" Height="25" />

				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="40,0" Alignment="Left">
						<TabIcon ux:Name="c1" File="Assets/basket.png" Color="color0"/>
						<TabHeader ux:Name="h1" Value="Albums" />
					</Grid>
					<Clicked>
						<Set nav.Active="page1" />
					</Clicked>
				</Panel>
				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
						<TabIcon ux:Name="c2" File="Assets/accountbalance.png" Color="color1"/>
						<TabHeader ux:Name="h2" Value="Artists"/>
					</Grid>
					<Clicked>
						<Set nav.Active="page2" />
					</Clicked>
				</Panel>
				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
						<TabIcon ux:Name="c3" File="Assets/play.png" Color="color2"/>
						<TabHeader ux:Name="h3" Value="Information"/>

					</Grid>
					<Clicked>
						<Set nav.Active="page3" />
					</Clicked>
				</Panel>
				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
						<TabIcon ux:Name="c4" File="Assets/person.png" Color="color3" />
						<TabHeader ux:Name="h4" Value="Friends"/>
					</Grid>
					<Clicked>
						<Set nav.Active="page4" />
					</Clicked>
				</Panel>
			</Grid>
		</Panel>
		<PageControl ux:Name="nav">
			<NavigationMotion GotoEasing="BackOut" />
			<Attractor ux:Name="indicatorColorAttractor" Target="indicator.Color" Value="color0" />
			<Rectangle ux:Name="bgColor" Layer="Background" Color="color0" Opacity="0.12"/>
			<Attractor ux:Name="bgColorAttractor" Target="bgColor.Color" Value="color0" />
			<Attractor ux:Name="titleTextAttractor" Target="titleText.Color" Value="color0" />

			<WhileTrue ux:Name="shrinkIndicatorWidth">
				<Change indicator.Width="90" Duration="0.25"/>
			</WhileTrue>

			<Image ux:Class="PagePlaceholder" Margin="8,10,8,0" StretchMode="UniformToFill" ContentAlignment="Top"/>

			<Page ux:Name="page1">
				
		        <ScrollView>
		            <Grid ColumnCount="1">
		                <JavaScript>
		                    var Observable = require("FuseJS/Observable");
							var FileSystem = require("FuseJS/FileSystem");

		                    var data = Observable();
		                    var locations = Observable();

		                    var mata;

		                    fetch('https://dbat-cebd7.firebaseio.com/.json')
		                        .then(function(response) { return response.json(); })
		                        .then(function(responseObject) { 
		                        	mata = responseObject;
		                        	data.value = responseObject; 
		                        	data = data.value.Albums;

		                        });

							

							var foo = function(e){
								mata.Artists.forEach(function(Location){
									locations.add(Location);
								})

								console.log(JSON.stringify(locations))

							}
		                    
		                    module.exports = {
		                        data: data,
		                        foo: foo,
		                        locations:locations
		                    };

		                </JavaScript>
	                    <Each Items="{data.Albums}">
		                    <DockPanel Height="300" Margin="10,20">
		                        <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"  />
		                        <Rectangle Height="200" Dock="Top" Margin="0,-10">
		                        	<Image File="{Thumb}" Height="230" Padding="30" /> 
		                    	</Rectangle>
		                    	<Clicked Handler="{foo}">
		                    	</Clicked>
		                            
		                            <Panel>
		                            <Text Value="{Title}" TextAlignment="Left" Alignment="Left"  Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
		                            <Text Value="{Description}" TextAlignment="Left" Alignment="Left"  Margin="10,30" Padding="10" Dock="Top" TextWrapping="Wrap" />
		                        </Panel>
		                    </DockPanel>
							<Clicked>
								<Set nav.Active="page2" />
							</Clicked>
						</Each>

		            </Grid>
		        </ScrollView>


				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="false" />
					<Set indicatorColorAttractor.Value="color0" />
					<Set bgColorAttractor.Value="color0" />
					<Set titleTextAttractor.Value="color0" />
				</WhileActive>
				<ActivatingAnimation>
					<Change h1.Opacity="1" />
					<Change col1.Width="2" />
					<Change c1.Color="White" />
				</ActivatingAnimation>
			</Page>
			<Page ux:Name="page2">

		        <ScrollView>
		            <Grid ColumnCount="1">
		            	<Each Items="{locations}">
		                    <DockPanel Height="300" Margin="10,20">
		                        <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"  />
		                        <Rectangle Height="200" Dock="Top" Margin="0,-10">
		                        	<Image File="Assets/screen2.png" Height="230" Padding="30" /> 
		                    	</Rectangle>
		                            
		                            <Panel>
		                            <Text Value="This is a test" TextAlignment="Left" Alignment="Left"  Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
		                            <Text Value="Lorem ipsum bla bla" TextAlignment="Left" Alignment="Left"  Margin="10,30" Padding="10" Dock="Top" TextWrapping="Wrap" />
		                        </Panel>
		                    </DockPanel>
		                </Each>
		            </Grid>
		        </ScrollView>				

				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="true" />
					<Set indicatorColorAttractor.Value="color1" />
					<Set bgColorAttractor.Value="color1" />
					<Set titleTextAttractor.Value="color1" />
				</WhileActive>
				<ActivatingAnimation>
					<Change h2.Opacity="1" />
					<Change col2.Width="2" />
					<Change c2.Color="White" />
				</ActivatingAnimation>
			</Page>
			<Page ux:Name="page3">
				<PagePlaceholder File="Assets/screen3.png" />
				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="true" />
					<Set indicatorColorAttractor.Value="color2" />
					<Set bgColorAttractor.Value="color2" />
					<Set titleTextAttractor.Value="color2" />
				</WhileActive>
				<ActivatingAnimation>
					<Change h3.Opacity="1" />
					<Change col3.Width="2" />
					<Change c3.Color="White" />
				</ActivatingAnimation>
			</Page>
			<Page ux:Name="page4">
				<PagePlaceholder File="Assets/screen4.png" />
				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="false" />
					<Set indicatorColorAttractor.Value="color3" />
					<Set bgColorAttractor.Value="color3" />
					<Set titleTextAttractor.Value="color3" />
				</WhileActive>
				<ActivatingAnimation Scale="0.333">
					<Move Target="indicator" X="1" RelativeTo="PositionOffset" RelativeNode="p4"/>
				</ActivatingAnimation>
				<ActivatingAnimation>
					<Change h4.Opacity="1" />
					<Change col4.Width="2" />
					<Change c4.Color="White" />
				</ActivatingAnimation>
			</Page>
		</PageControl>
	</ClientPanel>
</App>

After a lot of messing about, I found that it's the way it parses the JSON. Since it's an array received back, it wraps it in another array, so you get something like [[{}]] instead of [{}]. So I changed it when receiving the response object, I do a .forEach loop, and then add the object in the observable with observable.add(object).

That way, it's no longer an object wrapped in a double array, but an object in an array.

Post Stats
  • 3
    replies
  • 549
    views
  • 2
    users