EventListener in dashboard-template-node

[JustinB]

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:

<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

[knoepsche]

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

[JustinB]

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.

[knoepsche]

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.

[knoepsche]

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:

<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>