# EventListener in dashboard-template-node

**URL:** <https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [18 October 2022 13:33 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207 "2022-10-18T13:33:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [18 October 2022 13:33 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207/1 "2022-10-18T13:33:45Z")

</div>

Hello folks,

I am currently trying to add a EventListener to an html-element inside the dashboard-template-node.

I've already tried a lot of ways which normally should work but without success.  
When leaving the focus of an input field or better when the value changes, the value has to be sent to the output. I tried it with different notations of `focusout`, `on-focusout`, `(focusout)` or the `change`-event.

Here's my code:

```auto
<script>
    $(function(){
        $("#kt_daterangepicker_2").daterangepicker({
        "timePicker": true,
        "timePicker24Hour": true,
        startDate: moment().startOf("hour"),
        endDate: moment().startOf("hour").add(32, "hour"),
        locale: {
            format: "DD/MM hh:mm A",
            "applyLabel": "OK",
            "cancelLabel": "Abbrechen",
        }
        });       
    });
    this.scope.action = function() { return document.getElementById("kt_daterangepicker_2").value };

    function sendValue() {
        return document.getElementById("kt_daterangepicker_2").value;
    }

   // document.getElementById("kt_daterangepicker_2").addEventListener("focusout", send({payload:action()}));

    const test2 = document.getElementById('kt_daterangepicker_2');
    test.addEventListener('change', testFunction);

    function testFunction() {
        console.log("TEST");
        alert("hallo");
    }
</script>

<md-card ui-card-size="12x1" layout="row" layout-align="space-between center" class="nr-dashboard-textinput _md layout-align-space-between-center layout-row visible" style="width:642px; height:48px; margin:0">
    <md-input-container class="md-block md-auto-horizontal-margin flex has-label" style="margin:15,0; width:318">
        <input role="spinbutton" type="text" class="form-control form-control-solid" placeholder="Wähle Zeitraum" id="kt_daterangepicker_2" (change)="send({payload:action()})"/>
    </md-input-container>
    <md-card ui-card-size="6x1" class="nr-dashboard-button _md visible">
        <md-button class="md-raised md-button md-ink-ripple" type="button" ng-click="send({payload:action()})" style="padding: 0; margin: 0; width: 318px; height: 48px; position: relative; left: 10px;">Absenden</md-button>
    </md-card>
</md-card>

```

When triggering the action-function with the button, everything is working as it should.

PS: Please dont wonder about the mess, I'm despairing 🫠

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [18 October 2022 14:52 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207/2 "2022-10-18T14:52:05Z")

</div>

I answered another question about daterangepicker some days ago. Perhaps the solution there can help you:

[https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650)

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [19 October 2022 06:51 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207/3 "2022-10-19T06:51:32Z")

</div>

Thanks for your reply! I dont have trouble with losing the value but with the input-field. I want the value to be sent when the user unfocuses the input.

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [19 October 2022 14:33 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207/4 "2022-10-19T14:33:15Z")

</div>

Oh, I know, but the linked solution sends the value after input, too. I thought this was your need and the code could help you.

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [20 October 2022 08:53 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207/5 "2022-10-20T08:53:23Z")

</div>

I took your example and turned it to a working one with focusout-, button-click, and ok event. The reason why you can't get the send method by catching the DOM focusout event is you should use the angular directives for events. The focusout event doesn't have one so you may use the universal ng-on-[event-name] style. Only this way you can catch the angular scope and its send method:

```auto
<script>
    (function(scope) {
        scope.startDate = moment().startOf('hour');
        scope.endDate = moment().startOf('hour').add(32, 'hour');
        $("#kt_daterangepicker_2").daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            startDate: scope.startDate,
            endDate: scope.endDate,
            locale: {
                format: 'M/DD hh:mm A',
                applyLabel: 'OK',
                cancelLabel: 'Abbrechen'
            }
        });
        $('#kt_daterangepicker_2').on('apply.daterangepicker', function(ev, picker) {
            scope.startDate = picker.startDate;
            scope.endDate = picker.endDate;
            let payload = {};
            payload.startDate = scope.startDate.format('YYYY-MM-DD');
            payload.endDate = scope.endDate.format('YYYY-MM-DD');
            payload.startTime = scope.startDate.format('HH:mm:ss');
            payload.endTime = scope.endDate.format('HH:mm:ss');
            scope.send({topic:'ok', payload:payload});
        });
        scope.btnclick = function(event){
            let payload = {};
            payload.startDate = scope.startDate.format('YYYY-MM-DD');
            payload.endDate = scope.endDate.format('YYYY-MM-DD');
            payload.startTime = scope.startDate.format('HH:mm:ss');
            payload.endTime = scope.endDate.format('HH:mm:ss');
            scope.send({topic:'button', payload:payload});
        }
        scope.inputfocusout = function(event){
            let payload = {};
            payload.startDate = scope.startDate.format('YYYY-MM-DD');
            payload.endDate = scope.endDate.format('YYYY-MM-DD');
            payload.startTime = scope.startDate.format('HH:mm:ss');
            payload.endTime = scope.endDate.format('HH:mm:ss');
            scope.send({topic:'focusout', payload:payload});
        }
    })(scope);
</script>

<md-card ui-card-size="12x1" layout="row" layout-align="space-between center"
    class="nr-dashboard-textinput _md layout-align-space-between-center layout-row visible"
    style="width:642px; height:48px; margin:0">
    <md-input-container class="md-block md-auto-horizontal-margin flex has-label" style="margin:15,0; width:318">
        <input role="spinbutton" type="text" class="form-control form-control-solid" placeholder="Wähle Zeitraum" id="kt_daterangepicker_2" ng-on-focusout="inputfocusout($event)"/>
    </md-input-container>
    <md-card ui-card-size="6x1" class="nr-dashboard-button _md visible">
        <md-button class="md-raised md-button md-ink-ripple" type="button" ng-click="btnclick($event)"
            style="padding: 0; margin: 0; width: 318px; height: 48px; position: relative; left: 10px;">Absenden
        </md-button>
    </md-card>
</md-card>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 November 2022 08:54 UTC](https://discourse.nodered.org/t/eventlistener-in-dashboard-template-node/69207/6 "2022-11-03T08:54:11Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.