Matt Matt - 2 months ago 9
HTML Question

How can i bind control events to a function declared using javascripts prototyping

I'm trying to create a html page and add some javascript event handling via a prototype object, so in theory we would have:

1: A standard html page which would create a prototyped object and call a prototype function during the bodys "onLoad" event.


  1. This function would in turn associate a controls event with a second prototype function in the class.



In this example i'd like to capture the textboxes change event, but the actual pages will have a fair number of controls.


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.10.2.js"></script>
<script src="jquery.blockUI.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script src="searchAddress.js"></script>
<script>
function loadIt() {
SearchAddressController = new SearchAddressControllerBase;
SearchAddressController.BindTheCotrols();
}
</script>
</head>
<body onload="loadIt()">

<input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" />
<input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" />
<button></button>
</body>
</html>



The code that is in searchAddress.js is

var SearchAddressControllerBase = function () {
this.houseNumber = null;
this.postCode = null;
};

SearchAddressControllerBase.prototype.GeneralEventHandler = function (c, e) {
// would like the text boxes change event to land here...

}

SearchAddressControllerBase.prototype.BindTheCotrols = function () {

// bind the controls here
$("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));
};


I need to create this separation between the html and js as it will ultimately be generated rather than hand-cranked.

Any help explaining how i can get the BindTheControls function to make the change event for textHouseNo route to GeneralEventHandler would be appreciated.

A couple of the the links i've been looking at are:
Advantages of using prototype, vs defining methods straight in the constructor?
and
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Answer

You're really close; when you do this:

$("#textHouseNo").change(this.GeneralEventHandler('textHouseNo', 'change'));

You are actually invoking GeneralEventHandler immediately instead of assigning it to the change event. You need to change it to:

$("#textHouseNo").change(this.GeneralEventHandler);

Then in the handler method, you can get info about the event like this:

function (evt) {
  var el = evt.currentTarget
  var type = evt.type;
  var id = el.id
  var val = el.value

  console.log(id, type, val)
}

Check out the working demo

var SearchAddressControllerBase = function () {
    this.houseNumber = null;
    this.postCode = null;
};

SearchAddressControllerBase.prototype.GeneralEventHandler = function (evt) {
    // would like the text boxes change event to land here...
  
  var el = evt.currentTarget
  var type = evt.type;
  var id = el.id
  var val = el.value
  
  console.log(id, type, val)
}

SearchAddressControllerBase.prototype.BindTheCotrols = function () {

    // bind the controls here
    $("#textHouseNo").change(this.GeneralEventHandler);
};

 function loadIt() {
    SearchAddressController = new SearchAddressControllerBase;
    SearchAddressController.BindTheCotrols();
}


// would be called from "onload"
loadIt()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="textHouseNo" type="text" id="textHouseNo" value="" placeholder="House No" data-clear-btn="true" maxlength="20" />
    <input name="texPostcode" type="text" id="texPostcode" value="" placeholder="Post Code" data-clear-btn="true" maxlength="20" />
    <button></button>