Codehelp Codehelp - 2 months ago 6
Javascript Question

Calling a method on OnClick using TypeScript

I am new to TS so bear with me if this is a very basic 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?

Thanks in advance.

Answer

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