# JS in multiple files

**URL:** <https://forums.fusetools.com/t/js-in-multiple-files/1886>\
**Category:** How-to Discussions\
**Created:** [June 22, 2016, 10:03am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886 "2016-06-22T10:03:11Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 22, 2016, 10:03am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/1 "2016-06-22T10:03:11Z")

</div>

Hello,

inside my mainview.ux i have

```auto
<Each Items="{movieList}">
    <MovieCard />
</Each>

```

where movieCard is another ux file. movieList is a js observable from mainview.js. Inside MovieCard i tried to use another JS (including the file as follows )

```javascript
<JavaScript File="MovieCards.js" ux:Global="mainview"/>

```

and inside (movieCards.js) i have a function that changes the visibility and height of a panel. I tried calling it with

```auto
<Circle Color="Black" Width="15" Height="15" Row="0" Column="3" >
    <Clicked Handler="{click}"/>
</Circle>

```

which is inside movieCards.ux but it doesnt seem to work. I put a console.log() inside the function but it doesnt print. Any thoughts ?

This is my MovieCard JS file :

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

var panelVisibility = Observable("Hidden");
var height = Observable("0");

function click(args)
{
    console.log(">>>> ???? <<<<<");
    if(panelVisibility.value == "Visible")
    {
        panelVisibility.value = "Hidden";
        height.value = "0"
    } else {
        panelVisibility.value = "Visible"
        height.value = "94%"
    }
}

module.exports = {
    panelVisibility : panelVisibility,
    height : height,
    click : click
};

```

---

<div class="post-metadata">

**Author:** ![eivind.teig](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eivind.teig/32/216_2.png) [@eivind.teig](https://forums.fusetools.com/u/eivind.teig)\
**Post date:** [June 22, 2016, 10:51am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/2 "2016-06-22T10:51:28Z")

</div>

first thougth is that you did not export the click function to mainview.ux from a file or tag.

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 22, 2016, 10:54am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/3 "2016-06-22T10:54:48Z")

</div>

function click is inside movieCards.js and is called inside movieCards.ux not in mainview.ux if i understood correctly what you said. So how am i going to export it on mainview.ux ?

---

<div class="post-metadata">

**Author:** ![eivind.teig](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eivind.teig/32/216_2.png) [@eivind.teig](https://forums.fusetools.com/u/eivind.teig)\
**Post date:** [June 22, 2016, 11:01am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/4 "2016-06-22T11:01:09Z")

</div>

oh, it did not say so. What i ment was that you should have the click function in your mainview.js file, but i think i migth have missunderstood your post, i will try to read it again 😉

maybe you have a test project with this not working i could look at?

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 22, 2016, 11:07am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/5 "2016-06-22T11:07:10Z")

</div>

I re-edited the post so to avoid any further misunderstandings. Sorry i don’t have a test project to send only the code i post it 😕

---

<div class="post-metadata">

**Author:** ![Anders\_Bondehagen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_bondehagen/32/98_2.png) [@Anders\_Bondehagen](https://forums.fusetools.com/u/Anders_Bondehagen)\
**Post date:** [June 22, 2016, 2:55pm UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/6 "2016-06-22T14:55:24Z")

</div>

Are you sure `MovieCards.js` run at all?

Add a `console.log` at the top to check. You should also remove `ux:Global="mainview"` from your `JavaScript` tag.

You are not showing us all your code, so I not able to give you a correct answer, but from what I can see you should include your MovieCards.js in your parent UX file. But that is a bit hard to tell since I don’t know where you use panelVisibility.

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 23, 2016, 9:07am UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/7 "2016-06-23T09:07:13Z")

</div>

This is the MainView.ux

```auto
<App>
    <JavaScript File="mainview.js" />
    <!-- other code -->

    <Each Items="{movieList}">
        <MovieCard />
    </Each>
</App>

```

MovieCards.ux

```auto
<DockPanel ux:Class="MovieCard" ux:Name="self" Opacity="0.4">
    <JavaScript File="MovieCards.js"/>
    <!-- Other code -->

   <Panel ux:Name="infoPanel" Width="100%" Height="{height}" Visibility="{panelVisibility}" Opacity="0" Alignment="Bottom">
        <Scaling ux:Name="infoPanelScaling" Y="0" X="0" />
        <Rectangle Color="Red" Width="100%" Height="100%">
            <Text TextColor="#fff" TextAlignment = "Center" Alignment="Center" >I'm Looking For :</Text>
            <Button Clicked="{click}" />
        </Rectangle>
    </Panel>
</DockPanel>

```

MovieCards.js

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

var panelVisibility = Observable("Hidden");
var height = Observable("0");

console.log("is it in ?");

function click()
{
    console.log(">>>> ???? <<<<<");
    if(panelVisibility.value == "Visible")
    {
        panelVisibility.value = "Hidden";
        height.value = "0"
    } else {
        panelVisibility.value = "Visible"
        height.value = "94%"
    }
}

module.exports = {
    panelVisibility : panelVisibility,
    height : height,
    click : click
};

```

if i have it like this the first log that i have inside MovieCards.js is not printed at all. Moreover if i dont use ux:Global=“MainView” the movie cards i have doesn’t take the necessary info from the mainView.js. If i move the

```auto
<JavaScript File="MovieCards.js"/>

```

inside the mainview then mainview.js doesn’t work. Also tried to merge the two js files but with no luck.

---

<div class="post-metadata">

**Author:** ![Anders\_Bondehagen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_bondehagen/32/98_2.png) [@Anders\_Bondehagen](https://forums.fusetools.com/u/Anders_Bondehagen)\
**Post date:** [June 23, 2016, 1:05pm UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/8 "2016-06-23T13:05:23Z")

</div>

I just tested your code and it works as expected here here. It prints out the following when I click the items.

```auto
is it in ?
>>>> ???? <<<<<
>>>> ???? <<<<<

```

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 23, 2016, 1:16pm UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/9 "2016-06-23T13:16:09Z")

</div>

If i run the above code it prints but as i said i am losing all the info i have from the mainview.js. Because inside the MovieCards.ux i am using info that i have stored in observables in mainview.js. If i include the ux:Global the info are ok again but when i press the button it doesn’t do anything.

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/uHfkcyZcBFT6-legacy-files-ntArfvkjyKGFLeaL-pjkhG8bJspdJ4SjIPVWh3sIz.PNG)

It should be like this :

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/mfDBzXLWNqwB-legacy-files-Jasn995QESOOpLOR-_pgfXBhhhXMd5aqJMP2v7Ojf.PNG)

in the second pic if i press the black dot which is a button and it calls the `{click}` function it doesn’t do anything.

---

<div class="post-metadata">

**Author:** ![Anders\_Bondehagen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_bondehagen/32/98_2.png) [@Anders\_Bondehagen](https://forums.fusetools.com/u/Anders_Bondehagen)\
**Post date:** [June 23, 2016, 1:34pm UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/10 "2016-06-23T13:34:30Z")

</div>

It doesn’t work because you are using `ux:Global` (that is deprecated). When you create a new `<JavaScript>` tag you overwrite the datacontext of the previous tag.

You can move your code to mainview.js and check the argument to `click(arg)` which panel you clicked.

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 23, 2016, 3:38pm UTC](https://forums.fusetools.com/t/js-in-multiple-files/1886/11 "2016-06-23T15:38:39Z")

</div>

yes it worked as you said thank you very much! Didn’t know that ux:global was depricated so i was trying to fix it using that… Thnaks again!