How Can I call a JavaScript function in another JavaScript function?

How-to Discussions
1

Hi,

It gives an application error when I call the function MainJs.set_send_to_api MainView.ux in the file. How Can I call a JavaScript function in another JavaScript function?

MainView.ux

<App Theme="Basic"> 

    <JavaScript File="MainView.js" ux:Global="MainJs" />

    <JavaScript>
        var MainJs = require("MainJs").MainJs;
        var Observable = require("FuseJS/Observable");

        var data = Observable(
            {location: 1, id: 1, name: "foo", param_value: 10},
            {location: 1, id: 2, name: "bar", param_value: 70}
            );
        var foo = Observable("");
        var bar = Observable("");

        module.exports = {
            data: data,
            switchChanged: function (args) {
                console.log(JSON.stringify(args));
                console.log("Switch value/id is: [" + args.value + "] / " + args.data.id);
                foo.value = "foo";
                bar.value = args.data.id;
                if (args.value == "true" ? MainJs.set_send_to_api(args.data.value) : MainJs.set_send_to_api("0")); 
                MainJs.sendToApi();
            },
            sliderValueChanged: function (args) {
                console.log(JSON.stringify(args));
                args.data.param_value = args.value;

                console.log("Slider value/id is: [" + 
                    args.value + "], " + 
                    args.data.id + ", " +
                    args.data.value );
            }
        };
    </JavaScript>

    <Panel ux:Class="MyPanel" Height="35" Margin="5,10" />

    <ScrollView>
        <Grid>
            <Each Items="{data}">
                <DockPanel Height="50" Margin="10,5">
                    <MyPanel>
                        <Text TextColor="#fff" Alignment="VerticalCenter" Value="{name}" />
                    </MyPanel>
                    <MyPanel>
                        <Switch Value="False" ux:Name="TheSwitch" ValueChanged="{switchChanged}" Alignment="CenterRight" />
                        <WhileFloat Value="{value}" GreaterThan="1" LessThan="255">
                            <Change TheSwitch.Value="True" />
                        </WhileFloat>                    </MyPanel>

                    <Rectangle Layer="Background" CornerRadius="15" Fill="#975A5E" />
                </DockPanel>
            </Each>
        </Grid>
    </ScrollView>

</App>

MainView.js

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

function set_send_to_api(arg) {
    send_to_api.value = arg.value;
}

function sendToApi() {
    console.log("Called sendToApi");
    console.log("send to api: " + send_to_api);
}

module.exports = {
    sendToApi: sendToApi,
    set_send_to_api: set_send_to_api
};

Switch state after changes

ERROR: 
    Name: TypeError: Cannot read property 'set_send_to_api' of undefined
    Error message: Uncaught TypeError: Cannot read property 'set_send_to_api' of undefined
    File name: /Users/baran/workspace/fuse/webview/MainView.ux
    Line number: 23
    Source line: if (args.value == "true" ? MainJs.set_send_to_api(args.data.value) : MainJs.set_send_to_api("0")); 
    JS stack trace: TypeError: Cannot read property 'set_send_to_api' of undefined
        at module.exports.switchChanged (/Users/baran/workspace/fuse/webview/MainView.ux:23:92)
2

I corrected the code in the following way. It’s working.

<App Theme="Basic"> 

    <JavaScript File="MainView.js" ux:Global="MainJs" />

    <JavaScript>
        var MainJs = require("MainJs");
        var Observable = require("FuseJS/Observable");

        var data = Observable(
            {location: 1, id: 1, name: "foo", param_value: 10},
            {location: 1, id: 2, name: "bar", param_value: 70}
            );
        var foo = Observable("");
        var bar = Observable("");
        var switch_pos = Observable();

        module.exports = {
            data: data,
            switchChanged: function (args) {
                console.log(JSON.stringify(args) + "\n");
                console.log("Switch value/id is: [" + switch_pos + "] / " + args.data.id + "\n");
                foo.value = "foo";
                bar.value = args.data.id;
                switch_pos = args.value;
                if ( (switch_pos === true) ? MainJs.set_send_to_api("1") : MainJs.set_send_to_api("0") );

                MainJs.sendToApi();
            },
            sliderValueChanged: function (args) {
                console.log(JSON.stringify(args));
                args.data.param_value = args.value;

                console.log("Slider value/id is: [" + 
                    args.value + "], " + 
                    args.data.id + ", " +
                    args.data.value );
            }
        };
    </JavaScript>

    <Panel ux:Class="MyPanel" Height="35" Margin="5,10" />

    <ScrollView>
        <Grid>
            <Each Items="{data}">
                <DockPanel Height="50" Margin="10,5">
                    <MyPanel>
                        <Text TextColor="#fff" Alignment="VerticalCenter" Value="{name}" />
                    </MyPanel>
                    <MyPanel>
                        <Switch Value="False" ux:Name="TheSwitch" ValueChanged="{switchChanged}" Alignment="CenterRight" />
                        <WhileFloat Value="{value}" GreaterThan="1" LessThan="255">
                            <Change TheSwitch.Value="True" />
                        </WhileFloat>                    </MyPanel>

                    <Rectangle Layer="Background" CornerRadius="15" Fill="#975A5E" />
                </DockPanel>
            </Each>
        </Grid>
    </ScrollView>

</App>