jQuery Forum

Hey guys,

I need to know how to add an event to a button. The specific issue is that I want to add an event which is a prototype function of a class. Consider the following as an example:

1. MyTestClass = function() {
       this.firstName = "Pete";
       this.lastName = "Johnson";
      
       MyTestClass.prototype.getFirstName = function() {
           return this.firstName;
       };
   
       MyTestClass.prototype.getLastName = function() {
           return this.lastName;
       };
    
       MyTestClass.prototype.showFullName = function() {
           alert(this.getFirstName() + ' ' + this.getLastName());
       };
   
       MyTestClass.prototype.initialise = function() {
           $('#test-btn').click(this.showFullName);
       };
   }
   
   var testClass = new MyTestClass();
   
   function onFormLoad() {
       testClass.initialise();
   }
   
   

Look at the line: $('#test-btn').click(this.showFullName);

When the button is clicked, the event will actually get triggered, but there is a scope problem because the showFullName() function will produce the following error:

"this.getFirstName is not a function" on this line: alert(this.getFirstName() + ' ' + this.getLastName());

Is there any way to get around this problem or am I forced to use inline functions as event handlers?

Hi guys, this question is more related to Javascript than to jQuery but I'm hoping one of you guys can point me in the right direction.

I'm trying to write a generic javascript function which will populate a secondary SELECT list based on an option selected in a primary SELECT list. The data for the secondary list is retrieved via an ajax getJSON call. This is how the function looks like this:

1. function loadSecListFromPrimList(primListID, secListID, urlKeyID, loadingText, nonAvailText, ajaxURL) {
2.     var prim_list = $(primListID);
3.     var sec_list = $(secListID);
4.     if (prim_list.val() != 0) {
5.         sec_list.find('option').remove().end().append('<option selected value="0">' + loadingText + '</option>');
6.         $.getJSON(ajaxURL, {urlKeyID: prim_list.val()}, function(j){
7.             var options = '';
8.             for (var i = 0; i < j.length; i++) {
9.                 options += '<option value="' + j[i][0] + '">' + j[i][1] + '</option>';
10.             }
11.             $('select' + secListID).html(options);
12.         })
13.     } else
14.     {
15.         sec_list.find('option').remove().end().append('<option selected value="0">' + nonAvailText + '</option>');
16.     }
17. }

Notes: While the data is being loaded via ajax the secondary list text changes to something like: "busy loading...". Once the data is loaded it will clear and repopulate the secondary list.

And the HTML code to call this looks like this:

1. <select name="prim_id" id="prim_id" onchange="loadSecListFromPrimList('#prim_id', '#sec_id', 'cid', 'Loading Secondary Data...', 'No Secondary Data Available', '/ajax.php')">
2.     <option value="0">No Option Selected</option>
3.     <option value="1">Option 1</option>
4.     <option value="2">Option 2</option>
5. </select>

The only thing I'm stuck with is to be able to pass the "key" to be used in the dictionary for the data of the getJSON call:

1. $.getJSON(ajaxURL, {urlKeyID: prim_list.val()}, function(j)

The urlKeyID variable is passed through as a parameter of the loadSecondaryListFromList() function and needs to be dynamic so I can use the function all over my website. So I finally get to my question:

How do I use a value that was passed through a parameter of a function as a key in a dictionary? In this case I'm trying to set 'cid' as the key name (as per my HTML). I know it is a stupid question but I am baffled. I hope my explanation is detailed enough.