Call class function and access class property in jQuery method

Question

I had problem in my other code and huge, but I had made one prototype here,

this code is suppose to alert "hello John" instead of "hello undefined"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function callMethod(data, callback) {
            return callback(data);
        }

        function client(divid) {
            this.init = function () {
                $(this.divid).click((function (context) {
                    return function () {
                        callMethod("hello ", context.method);
                    }
                })(this));
            }
            this.divid = "#" + divid;
            this.myname = "John";
            this.method = function (d) {
                alert(d + this.myname);
            }
            this.init();
        }

        $('document').ready(function () {
            new client("mydiv");
        });
    </script>
</head>
<body>
    <div id="mydiv">This is my div</div>
</body>
</html>

can some body point out me why I'm getting unexpected result here?

I'm getting unexpected result on

this.method = function (d) {
    alert(d + this.myname);
}

this.myname suppose to return "John" here.

How to access class instance in event hanlder (JavaScript)? I'm getting help from above link, but I'm not being able to solve

bcm · Accepted Answer · 2011-03-17 10:16:43Z

1

This worked:

function callMethod(data, callback) {
    return callback(data);
}

function client(divid) {
    this.init = function() {
        $(this.divid).click((function(context) {
            return function() {
                callMethod("hello ", context.method);
            }
        })(this));
    }
    this.divid = "#" + divid;
    this.myname = "John";
    this.method = function(d) {
        alert(d + this.myname);
    }
    this.init();
}
$('document').ready(function() {
    client("mydiv");
});

Update:

You have to return the function object if you want to create different instances of it:

function callMethod(data, callback) {
    return callback(data);
}

function client(divid) {
    this.init = function() {
        $(this.divid).click((function(context) {
            return function() {
                callMethod("hello ", context.method);
            }
        })(this));
    }
    this.divid = "#" + divid;
    this.myname = "John";
    this.method = function(d) {
        alert(d + this.myname);
    }
    this.init();
    return this;
}
$('document').ready(function() {
    var x = client("mydiv");
    alert(x.divid);
    alert(x.myname); 
});

edited Mar 17, 2011 at 10:16

answered Mar 17, 2011 at 9:41

bcm

5,50810 gold badges61 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mujah Maskey Over a year ago

thanks Brandon, can you tell me why we are not putting "new" keyboards here?, if I want to make many instances like in OOP, can you give me idea here, how I can make new object here? I want to make many instance like , var x = new client("mydiv"); var y = new client("otherdiv");

bcm Over a year ago

@Pravat I'm not too familiar with using the new word, but you were not returning the function as an object before. this.init() does not initiate the parent function as an object, it just calls the internal init function.

bcm Over a year ago

@Pravat You may be interested in this article which speaks in depth about the 'new' in JavaScript - dustindiaz.com/new-in-javascript

Mujah Maskey · Accepted Answer · 2011-03-17 10:07:11Z

I got solved here is code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function callMethod(data, callback) {
            return callback(data);
        }

        function client(divid) {
            this.init = function () {
                $(this.divid).click(function () {
                    callMethod("hello ", c.method);
                });
            }
            this.divid = "#" + divid;
            this.myname = "John";
            this.method = function (d) {
                alert(d + c.myname + $(c.divid).html());
            }
            this.init();
            var c = this;
        }

        $('document').ready(function () {
            new client("mydiv");
            new client("nextdiv");
        });            
    </script>
</head>
<body>
    <div id="mydiv">This is my div</div>
    <br />
    <div id="nextdiv">Next Div</div>
</body>
</html>

actually this small line of code

var c = this;

is playing role. cheers up ;) , we don't need to event take care of "context" also

and we can make multiple instance too. test case:

 $('document').ready(function () {
      var x = new client("mydiv");
      var y = new client("nextdiv");
      alert("id of x is : " + x.divid + "\n id or y is : " + y.divid);
  });

bcm · Accepted Answer · 2011-03-19 15:45:43Z

0

This is an alternative way of coding which I find easier to understand/maintain.

Whatever is available to the public after object init can be seen more easily in the return section. I've left the greet function as public and customisable.

function client(divid) {
    var ids = divid;
    var target = $('#' + ids);
    var content = target.html();
    var myname = "John";

    function getID() {
        return ids;
    }

    function greet(d) {
        var d = d || '';
        alert('Hello ' + d + myname + ', ' + content);
    }

    target.click(function() {
        customName(d);
    })

    return {
        getID: getID,
        greet: greet
    }
}


$(function() {
    var x = new client('mydiv');
    var y = new client('nextdiv');
    //alert("id of x is : " + x.getID() + " and y is : " + y.getID());
    //x.greet('E ');    
    x.greet();
});

edited Mar 19, 2011 at 15:45

answered Mar 19, 2011 at 14:57

bcm

5,50810 gold badges61 silver badges93 bronze badges

2 Comments

bcm Over a year ago

@Pravat Understanding more from: addyosmani.com/resources/essentialjsdesignpatterns/book The constructor pattern which u used was mentioned. Check out prototyping also to avoid redefining function for each object initiated.

Mujah Maskey Over a year ago

again, on this function target.click(function() { customName(d); }), how you will use private properties and methods ?

Collectives™ on Stack Overflow

Call class function and access class property in jQuery method

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related