CODEWITHSUNDEEP
javascripttypescript
Codehelp
Codehelp

Reputation: 4757

Calling a method on OnClick using TypeScript

I have a TS code like this:

class MicrositeRequest {
    micrositeName: string;
    micrositeTemplate: string;

    constructor() {
        this.micrositeName = $("#micrositeNameId").val();
        this.micrositeTemplate = $("#templateId option:selected").text();
    }

  public  IsMicrositeRequestValid() {
        if (this.checkForName() && this.checkForTemplate()) {
            return true;
        }
        else {
            return false;
        }
    }

    checkForName() {
        if (this.micrositeName != null && this.micrositeName.length != 0) {
            return true;
        }
        else {
            return false;
        }
    }

    checkForTemplate() {
        if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) {
            return true;
        }
        else {
            return false;
        }
    }
}

Here's the converted JS:

/// <reference path="scripts/typings/jquery/jquery.d.ts" />
var MicrositeRequest = (function () {
    function MicrositeRequest() {
        this.micrositeName = $("#micrositeNameId").val();
        this.micrositeTemplate = $("#templateId option:selected").text();
    }
    MicrositeRequest.prototype.IsMicrositeRequestValid = function () {
        if (this.checkForName() && this.checkForTemplate()) {
            return true;
        }
        else {
            return false;
        }
    };
    MicrositeRequest.prototype.checkForName = function () {
        if (this.micrositeName != null && this.micrositeName.length != 0) {
            return true;
        }
        else {
            return false;
        }
    };
    MicrositeRequest.prototype.checkForTemplate = function () {
        if (this.micrositeTemplate != null && this.micrositeTemplate.length != 0) {
            return true;
        }
        else {
            return false;
        }
    };
    return MicrositeRequest;
})();

//# sourceMappingURL=Microsite.js.map

On Click of a button I want to call the IsMicrositeRequestValid() method.

Here's the HTML:

<div>
            <input type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" />
        </div>

The Console says IsMicrositeRequestValid is not defined.

Any clues why this is happening and how I can fix it?

Upvotes: 15

Views: 52078

Answers (2)

Martin Pabst
Martin Pabst

Reputation: 921

In addition to pete's answer here an object oriented solution:

Alex works with jQuery, so i feel free to use it in this answer.

1. You can't call methods of a class but only methods of objects, so you have to instantiate a object of class MicrositeRequest somewhere. Usually you do this after the DOM is fully populated, so you write:

$(() => {
   new MicrositeRequest();
});

You may place this code beneath your class definition so that it starts after the browser loaded your script.

2. Give your input element an id:

<div>
            <input id="myInputElement" type="submit" name="submit" value="Get" onclick="IsMicrositeRequestValid()" />
</div>

Register method IsMicrositeRequestValid of the MicrositeRequest-object as onClick-handler for your input-element. To achieve this add these lines to the constructor method of class MicrositeRequest:

let that = this;
$('#myInputElement').on('click', () => {
   that.IsMicrositeRequestValid();
});

You need variable that because inside the event handler this points to the input element.

Upvotes: 0

pete
pete

Reputation: 25091

The call to IsMicrositeRequestValid in the onclick attribute requires that the function be part of the global namespace (window). Further, I'm pretty sure you'll need to instantiate MicrositeRequest object before the call to IsMicrositeRequestValid work (because it relies on this).

function validateRequest() { // declare a function in the global namespace
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();
}

<input type="submit" name="sumbit" value="Get" onclick="validateRequest()" />

is the quick & dirty way which should get it working.

You could also do this:

window.validateRequest = function () { // declare a function in the global namespace
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();
}

which I think is more readable.

Also, look into the Element.addEventListener method. It allows much more flexibility.

var submit = document.getElementById('my-submit');
submit.addEventListener('click', function () {
    var mr = new MicrositeRequest();
    return mr.IsMicrositeRequestValid();    
});

<input type="submit" id="my-submit" name="sumbit" value="Get" />

Upvotes: 18

Related Questions