Trigger fetch with click

How-to Discussions
1

Hi, i can´t use fetch with an event click. Sounds easy but i can`t :frowning:

My code:

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

				var modelos = Observable();
				var errorMessage = Observable("");

				function clickButton() {
					fetch("https://vitroappapi.firebaseio.com/.json")
					.then((result) => {
						if (result.status !== 200) {
								errorMessage.value = "Ha ocurrido un error, codigo " + result.status;
								return;
						}

						result.json()
						.then((data) => {
							debug_log("Success!");
								for (var i = 0; i < data.length; i++) {
											var items = data[i];
											modelos.add(items);
								}
						});
					}).catch((err) => {
							errorMessage.value = "Ha ocurrido un error";
					});
				}

				module.exports = {
                        clickButton: clickButton,
						modelos:modelos,
						errorMessage: errorMessage
        };

Markup UX

<Panel ux:Name="submitButton" Width="100" Offset="0%,50%" Height="50" HitTestMode="LocalBoundsAndChildren" Layer="Layout">
					<Text Value="Login" Alignment="Center" Color="White" />
					<Clicked Handler >
						<Set state.Active="mainState" />
						<Callback Handler="{clickButton}" />
					</Clicked>
				</Panel>

The function clickButton() doesn´t work.

2

Hi David,

apologies for a reply taking so long. The code you pasted shows a number of syntax issues, and it’s weird that it hasn’t complained about that during building / live preview for you.

Either way, here’s a fixed version that does call the function in Javascript:

<App Background="#000">
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var modelos = Observable();
        var errorMessage = Observable("");

        function clickButton() {
            fetch("https://vitroappapi.firebaseio.com/.json")
            .then((result) => {
                if (result.status !== 200) {
                    errorMessage.value = "Ha ocurrido un error, codigo " + result.status;
                    return;
                }

                result.json()
                .then((data) => {
                    debug_log("Success!");
                    for (var i = 0; i < data.length; i++) {
                        var items = data[i];
                        modelos.add(items);
                    }
                    console.log('modelos is now: ' + JSON.stringify(modelos.toArray()));
                });
            }).catch((err) => {
                    errorMessage.value = "Ha ocurrido un error";
            });
        }

        module.exports = {
            clickButton: clickButton,
            modelos:modelos,
            errorMessage: errorMessage
        };
    </JavaScript>

    <Panel ux:Name="submitButton" Width="100" Height="50" HitTestMode="LocalBoundsAndChildren">
        <Text Value="Login" Alignment="Center" Color="White" />
        <Clicked>
            <Callback Handler="{clickButton}" />
        </Clicked>
    </Panel>
</App>
3

Yeah, I was some errors in my example. Anyway thanks for the support. I continue work with fuse for my project :slight_smile: