# Raise UserEvent from JS inside Class

**URL:** <https://forums.fusetools.com/t/raise-userevent-from-js-inside-class/2665>\
**Category:** How-to Discussions\
**Created:** [June 13, 2016, 5:21pm UTC](https://forums.fusetools.com/t/raise-userevent-from-js-inside-class/2665 "2016-06-13T17:21:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Manriquez](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Cristian\_Manriquez](https://forums.fusetools.com/u/Cristian_Manriquez)\
**Post date:** [June 13, 2016, 5:21pm UTC](https://forums.fusetools.com/t/raise-userevent-from-js-inside-class/2665/1 "2016-06-13T17:21:33Z")

</div>

Hi guys, I’m having problems trying to raise a UserEvent from JS. i made a simple example of what i’m trying to do:

```auto
<App>
    <CustomButton Text="Custom Button" />

    <UserEvent ux:Name="MyEvent"/>
    <OnUserEvent EventName="MyEvent" Handler="{eventHandler}" />

    <Button ux:Class="CustomButton">
        <JavaScript>
            function CustomButtonClick(){
                MyEvent.raise();
            }

            module.exports = {
                CustomButtonClick: CustomButtonClick
            }
        </JavaScript>

        <Clicked>
            <!--Callback Handler="{CustomButtonClick}" /-->
            <RaiseUserEvent Name="MyEvent" />
        </Clicked>
    </Button>

    <JavaScript>
        function eventHandler(args){
            console.log("The event was triggered!");
        }

        module.exports = {
            eventHandler: eventHandler
        }
    </JavaScript>
</App>

```

In this case, when i click on the CustomButton, it raises the event and everything works perfectly, even when the event it’s created outside my custom element, but if i try to raise it from the JS that is inside the same custom button class (the commented code), the app throws me an error:

```auto
Source Line: MyEvent.raise(); JS stack trace: ReferenceError:MyEvent is not defined at CustomButtonClick (MainView.ux:10:17)

```

Can you please explain me why i can raise the event from the UX part of the class but no from the js part?, Do i have a way to raise it from the JS indide that class?

Thanks for your help and keep the nice work!

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [June 14, 2016, 9:15am UTC](https://forums.fusetools.com/t/raise-userevent-from-js-inside-class/2665/2 "2016-06-14T09:15:53Z")

</div>

The `ux:class` on your button introduces a new scope: `MyEvent` is not visible inside it since it’s related to the parent scope. `RaiseUserEvent` works because it’s doing a lookup by name, through it’s node ancestors, on demand.

An `ux:InnerClass` should retain the scope. Or use an `ux:Include` on the shared code block. We’re not entirely clear on exactly how you should achieve what you’re doing since it wasn’t an intended use-case. A custom component (ux:Class) should be exposing it’s own events and the user of that class should be catching those events.

If you really want the runtime lookup then you have to use `RaiseUserEvent` for now. You can trigger such a dispatch from JS by putting it inside a `Timeline` and calling `pulse` on that timeline. Again, probably not a best practice, but it should work.

Perhaps if you could explain your high-level use-case I could come up with a clearer recommendation.

You should use `EventName` on `RaiseUserEvent` in any case.

---

<div class="post-metadata">

**Author:** ![Cristian\_Manriquez](https://avatars.discourse-cdn.com/v4/letter/c/f05b48/32.png) [@Cristian\_Manriquez](https://forums.fusetools.com/u/Cristian_Manriquez)\
**Post date:** [June 14, 2016, 4:35pm UTC](https://forums.fusetools.com/t/raise-userevent-from-js-inside-class/2665/3 "2016-06-14T16:35:01Z")

</div>

Hi edA-qa mort-ora-y

Well, maybe what im trying to do, can be done with something else and not using events… i’ll try to explain what i need:

- I have a class named PopUp, wich emulates the “modal” view on iOS(i don’t know the name in android for that type of view), i use it like a class because i have at least 2 views who needs to be displayed like this.

- An instance of this class is used to retrieve data from de phone, contacts in this case, show the list to the user, and let him save 1 or more records into the app.

Once the user press the “save” button, i need to know from outside the instance that the user really pressed OK (Cancel is the other option) and get the list of records “to save”, so i can update the list of contacts of the app with those records (“main” list).

I need the “save record list” because i can’t just simply refresh the main list for asynchronous reasons…

Like i said, maybe using events is not the best way to accomplish what i need.

Thanks a lot for your help