Not able to get Text area value from custom powerbi visual

[Anonymous]

Hi,

I created a Custom POwer BI Visual which needs to have a textarea and will going to post data to my server.

I am able to create the html elements and data posting to my web server. My issue is when I try to get the data from my textarea. It value i define on the constructor doesnt change even I change the actual value from the actual textarea. How can I pull the data? below is my script.

"use strict";
import * as $ from "jquery";
import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
//import "wysihtml";
import { VisualSettings } from "./settings";

enum HttpVerbs {
    GET, POST, PUT, DELETE
}
export class Visual implements IVisual {
    private target: HTMLElement;
    private myTextArea: HTMLElement;
    private updateCount: number;
    private settings: VisualSettings;
    private textNode: Text;
    private textboxValue: Text;
    public textVal:String;
    private textValue:Text;
    public dView:DataView;
    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.updateCount = 0;
      
        if (document) {
            this.myTextArea = document.createElement('textarea');
            this.myTextArea.textContent= "hello";
            const new_p: HTMLElement = document.createElement("p");
            new_p.appendChild(document.createTextNode("Update test load 3 count:"));
            
            const new_em: HTMLElement = document.createElement("em");
            new_em.id = "uniqueval";
            this.textNode = document.createTextNode(this.updateCount.toString());
            new_em.appendChild(this.textNode);
            new_p.appendChild(new_em);
            //this.target.appendChild(parser.parseFromString(htmlstring,"text/html"));
            this.target.appendChild(new_p);
            this.target.append(this.myTextArea)
            this.target.appendChild(document.createRange().createContextualFragment("<Br><textarea id=\"editor\" rows=\"4\" cols=\"50\">jemojemo</textarea><Br><br><input type=\"button\" value=\"Clickarrble\" id=\"coolbutton\"></input>"));
   
            this.target.appendChild(document.createRange().createContextualFragment("<div id=\"newValue\"></div>"));
        }
        var ddd = $("#coolbutton");
        let btn = document.getElementById("coolbutton");
        this.myTextArea.addEventListener("keypress", (e:Event) => this.textChanged(this.myTextArea.innerText));
        btn.addEventListener("click", (e:Event) => this.getTrainingName(4,this.target,this.textNode.textContent));
        //var editor = new w
        ////var editor = new wysihtml5.Editor('editor', {
          //  toolbar: 'toolbar',
          //  parserRules:  wysihtml5ParserRules
          //});
    }

    textChanged(str:string){
        console.log("text Updated to:" + str);
        document.getElementById("editor").textContent = this.myTextArea.textContent;
    }

    getTrainingName(n:number, el: HTMLElement,data:string){
        // button click handler
        console.log("calling API");
        
        this.callWebApi("http:/localhost:3000/powerbi", HttpVerbs.POST, data, function (res){
            //el.appendChild(document.createRange().createContextualFragment("<Br><br><br><h1>New String</h1><Br><br>" + res));
            let divcon = document.getElementById("newValue");
            divcon.innerHTML = res;
        });
       
     }

    public update(options: VisualUpdateOptions) {
        console.log('Visual update', options);
        let dataView: DataView = options.dataViews[0];
        this.dView = options.dataViews[0];
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        
        
        if (this.textNode) {
            this.textNode.textContent = JSON.stringify(options.dataViews[0].categorical.values[0].values.toString()).toString();
           
        }
      
        //this.target.innerHTML =
     // JSON.stringify(options.dataViews[0].metadata.columns);
    }

    private static parseSettings(dataView: DataView): VisualSettings {
        return <VisualSettings>VisualSettings.parse(dataView);
    }

    /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }

    private callWebApi(url: string, verb:HttpVerbs, data: string, callback) : void 
    {
        let xhr = new XMLHttpRequest();
        xhr.onload = function () {
            let data = JSON.parse(xhr.responseText);
            callback(JSON.stringify(data));
        }

        xhr.onerror = function () {
            callback("error on requesting data");
        }

        let httpVerb: string;

        switch(verb){
            case HttpVerbs.GET:
                httpVerb = "GET";
                break;
            case HttpVerbs.POST:
                httpVerb = "POST";
                break;
            case HttpVerbs.DELETE:
                httpVerb = "DELETE";
                break;
            case HttpVerbs.PUT:
                httpVerb = "PUT";
                break;
        }

        xhr.open(httpVerb,url);
        xhr.setRequestHeader("Content-type","application/json");
        var txtValue = this.myTextArea.innerText;
        if(data == null){
            xhr.send("{\"test\":1}");
        }else{
            xhr.send("["+data+",\""+ txtValue +"\"]");
        }
    }
}

[Anonymous]

up