How do I call a function in a proto type object

[Claus Mygind]

I keep getting "MyControl.displayMyWayPoint is not a function" error

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
 
var MyControl = Class.create();
MyControl.prototype = {
 
...more code above... 
 
   displayMyWayPoint: function() {
      this.mc.map.clearOverlays();
      this.mc.drawMyWaypoint("41.880150027573109","-87.80519999563694");
   },
 
... more code below .....
 
}
 
td.innerHTML = '<input type="button" id="'+waypointObject[i].waypoint+'btn" value="Map it" onclick="MyControl.displayMyWayPoint('+waypointObject[i].lat+','+waypointObject[i].lon+');"/> '+(s+1)+".";
 
 

basically I create a table on the fly. Each row has a button with an onclick( ) event handler that I want to call the function displayMyWayPoint( ) in the proto typed control.

How do I do that?

[RamananKalirajan]

HI Claus,
Here with I am giving a sample for prototyping. Please look into it. The code you have written have some problem with argument passing.

<script language="javascript" type="text/javascript">
 
 
function cat(name) {
    this.name = name;
    this.talk = function() {
        alert( this.name + " say meeow!" )
    }
} 
 
cat1 = new cat("felix")
cat1.talk() //alerts "felix says meeow!"
 
cat2 = new cat("ginger")
cat2.talk() //alerts "ginger says meeow!"
 
cat.prototype.changeName = function(name) {
    this.name = name;
}
 
firstCat = new cat("pursur")
firstCat.changeName("Bill")
firstCat.talk() //alerts "Bill says meeow!"
 
</script>

Thanks and Regards
Ramanan Kalirajan

[Claus Mygind]

Your example that you quoted from the JavaScriptKit web site is understandable. However, I am not the original creator of the prototyped control that I show above.

What I want to do is use some of the functions in the custom control. So I guess what I am really asking how can I tap into the already created custom control and have it process my information?

Also what further would you need to see in order to help me here?

[RamananKalirajan]

In the function call, displayMyWayPoint() you are sending two parameters. But in the prototype.. you have written a function without any parameters. What about that? How you are directly using the prototype "MyControl" directly in you code. You should create a object for that and use it.

Thanks and Regards
Ramanan Kalirajan

[Claus Mygind]

Yes I was aware I did not receive the parameters. My intent was to add them later. My problems was calling the function in the first place.

I have now got it working not using prototyping which is a shame as I would really like to learn how to integrate it into my programming.

I understand how to create a custom object.
I understand how to add methods to a custom object
I understand how to bind the custom object to an element that already resides on the form.

What I really did not understand, was how to bind a custom class with methods to an element that I add later dynamically to the form.

As you saw in my example, I receive xml data from my GPS unit with waypoints, lat and lon.

I parse the data, then I create a table and fill it with parsed xml data.
I used the .innerHTML to create a button on each row displayed.

This newly created button should be bound to the custom object (or at least the method in the custom object) that will call the mapping routine. This of course is where the parameters are sent "lat" and 'lon". That part will be a snap if I could figure out how to bind the prototyped method to the "onclick" event handler of the button.

Any thoughts on this would be appreciated

Thanks for your input.

[RamananKalirajan]

Hi Claus,

i have created a code for your requirement. I am not sure, whether you are looking for this one.

<script type="text/javascript">
 
function MyControl(lat, lon) {
 this.lat = lat;
 this.lon = lon;
}
 
MyControl.prototype.displayMyWayPoint = function () {
    alert(this.lat+"  "+this.lon)
};
 
 
var newObj = new MyControl(1.414,1.632);
 
 
var newObj2 = new MyControl(6.61514,8.25414);
newObj2.displayMyWayPoint();
newObj.displayMyWayPoint();
</script>

I am not that much good at scripting.

Thanks and Regards
Ramanan Kalirajan

[Claus Mygind]

Ramanan, Thanks for your continued quest to help me solve this problem. I get what you are saying but I don't know how to fit it into what I am doing.

Below is the code I used to solve my problem, but it is not through binding a prototype method to the button I am creating.

Below my code is how the onclick event handler is prototyped for elements that are on the page when it is served up.

 
function timeStampRecs()
{
        var x =  document.getElementById("dataString").value;
 
        //extract all wanted info from x
        var y = x.slice(x.indexOf("<wpt"), x.indexOf("<trk>") )
        var z = x.slice(x.indexOf("<trk>") )
 
        //store each way point in an array split on the double line return between each way point
        waypointArray = y.split("\n\n");
 
        //extract finds into waypoint object
        for (i=0; i < waypointArray.length; i++ )
        {
            //here I get the info I need from the xml file and store it into several arrays
        }
 
        var tr, td;
        var tbody = document.getElementById('caches');
 
        aSort = new Array()
        //itmes are sorted into a parallel array
        for (i=0; i < waypointObject.length; i++ )
        {
            aSort[aSort.length] = waypointObject[i].sort;
        }
        aSort.sort();
 
        /*
        _____________________________________________________
 
        Here I fill in the content of my table.  
        This is where I start to create dynamic elements
        _____________________________________________________
 
        */
        for (s=0; s < aSort.length ; s++ )
        {
            tr = tbody.insertRow(tbody.rows.length);
 
            td = tr.insertCell(tr.cells.length);
/*
_____________________________________
 
This is where I would like to bind 
the prototype method.  My problem
is this, how to add the onclick
event handler
_____________________________________
 
*/
            td.innerHTML =     '<input type="button" id="'+waypointObject[i].waypoint+
                            'btn" value="Map it" onclick="mapIt('+waypointObject[i].lat+','+
                            waypointObject[i].lon+');"/> '+(s+1)+".";
        }
}
 
 
function mapIt(lat,lon)
{
    /*
    _____________________________________
 
    the function below is a prototype
    method of the class display, which
    is created when the page is loaded.
    _____________________________________
 
    */
    display.displayMyWayPoint(lat,lon);
}
 

This is the simplified page that is served up. It links to an external .js file scripts.js The forms onload loads and initializes the prototypes

On the page is one button "drawMyWayPointButton"

Below this example are the relevant portions of the scripts.js file which bind the onclick event handler to the button.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
 
<script type="text/javascript" src="Scripts.js">*</script>
 
<body onload="load()">
 
<div id="readBox">
 
    <input type="button" value="draw waypoint" id="drawMyWayPointButton" />
 
</div>
 
<div style="background-color:#3DA831;">
    <table  id="myOutput">
        <tbody id='caches'>
            <tr>
               <td>Cache #</td>
            </tr>
        </tbody>
    </table>
</div>
 
</body>
</html>
 
 

Here is the script file

 
/*
a variable display is created. then the load function runs after the page has loaded and all the elements are there including the button.
*/
 
    var display;
 
    function load() {
        display = new GarminDeviceControlDemo(
            "statusText", 
            "readMap",
            ["http://developer.garmin.com/","ee3934433a35ee348583236c2eeadbc1"]
        );        
    }
 
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
 
var GarminDeviceControlDemo = Class.create();
GarminDeviceControlDemo.prototype = {
 
    initialize: function(statusDiv, mapId, keysArray) {        
        this.status = $(statusDiv);
        this.mc = new Garmin.MapController(mapId);
        this.factory = null;
        this.keys = keysArray;
 
*/
______________________________
 
Here the button which is loaded with 
the page is initialized into the proto
typed object 
GarminDeviceControlDemo.prototype
 
This can be done because the 
button already exists.  In my
case the buttons I want to bind
have not yet been created on 
the form
______________________________
 
*/
 
        this.drawMyWayPointButton = $("drawMyWayPointButton");
 
/*
______________________________
 
Next you can see that the "onclick"
event handler is added to the button.
______________________________
 
*/
 
        this.drawMyWayPointButton.onclick = function() {
            this.displayMyWayPoint();
        }.bind(this);
    },
 
/*
______________________________
 
Finally here is the function that the
button calls when clicked.  This
is the same function I call in my
own example above. It is a function
of the variable "display".
 
So again how do I bind this to
buttons in the same way that is
done in this example????????
______________________________
 
*/
    displayMyWayPoint: function(lat,lon) {
        this.mc.map.clearOverlays();
        this.mc.drawMyWaypoint(lat,lon);
    },
};
 

[RamananKalirajan]

Can you please send the html and js as a attachment in your next reply.. so that i can try on it.

Thanks and Regards
Ramanan Kalirajan

[Claus Mygind]

Thanks for wanting to take it further. But alas it will do you no good to get the full html and js files as they require a Garmin GPS to get to the problem in question. If you cannot load the external data you can not test the function. Might I suggest, if you wish to proceed with helping that you simply develop a class with a method as described above, then create a routine that adds a button to the form using .innerHTML. You then have the same components that I have. From there try adding the method from the custom class you created to the button. A simple onclick = "hello world" would do the trick.