Calling a method on OnClick using TypeScript

Question

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?

Answer 1

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