Calling function inside javascript class

Question

I have the following javascript class (really don't know if it is the best solution) and I wan't to call a function that is definded in this class, insinde another function defined in the same class.

step1 = {
    init: function(){
        this.events();
    },

    events: function(){
        fct = this; // i stored this in a variable so that i don't lose it
        $(document).on('click', '.form-line li', function(e) {
            e.preventDefault();
            fct.changeCategoryValue($(this));
        });

        $(document).on('click', '.alert-form .confirm', function(e) {
        e.preventDefault();
        $.fancybox.close(true);
        });
    },

    changeCategoryValue: function(el) {
        cat = el.hasClass('has-sub') ? '' : el.data('id');
        title = el.hasClass('has-sub') ? '' : el.data('title');
        $('#cat-title').val(title);
        $("input[name='category']").val(cat);
    }

As you an see I wan't to call the changeCategoryValue function but if I call it with this.changeCategoryValue it won't work. Any suggestions on how to improve the code?

I don't see what the problem is. Is there an error, or are you requesting an optimization? fct = this and then later function(){ fct.changeCategoryValue } is typical. — zamnuts
– zamnuts, Commented Oct 25, 2013 at 5:58
You are right, there is not problem. That is why I asked for an improvement. I don't know, but it doesen't seem right (usual) the solution i implemented. — Tudor Ravoiu
– Tudor Ravoiu, Commented Oct 25, 2013 at 6:00

zamnuts · Accepted Answer · 2013-10-25 06:50:59Z

2

Alternatively, you may change the scope of the function callback:

$(document).on('click', '.form-line li', function(e) {
    e.preventDefault();
    this.changeCategoryValue($(e.currentTarget));
}.bind(this));

Use .bind(this) so the scope of function(e){...} will be the instance of step1 instead of $('.form-line li',document). Now, to still target the clicked/selected .form-line li, you can access the object via e.currentTarget.

edited Oct 25, 2013 at 6:50

answered Oct 25, 2013 at 6:01

zamnuts

9,6123 gold badges42 silver badges47 bronze badges

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

3 Comments

zamnuts Over a year ago

@TudorRavoiu oops, I left out the most important detail! Answer updated.

Tudor Ravoiu Over a year ago

Ok, this works now. I had to make a little modification in the changeCategoryValue function because it seems that $(e.target) is in fact the "a" element inside of "li" and not the clicked "form-line li" element.

zamnuts Over a year ago

@TudorRavoiu in your case it might be e.currentTarget instead of e.target - I always get them mixed up!

StaleMartyr · Accepted Answer · 2013-10-25 05:55:07Z

0

try to use:

step1.changeCategoryValue($(this));

answered Oct 25, 2013 at 5:55

StaleMartyr

7785 silver badges18 bronze badges

1 Comment

Tudor Ravoiu Over a year ago

ok, this works, but is it also another solution? so that if the classname will change than the calling won't change?

Bharat Soni · Accepted Answer · 2013-10-25 06:01:28Z

0

you have added property to the class why don't you call it using class name like this :

step1.changeCategoryValue('any_element_ref');

answered Oct 25, 2013 at 6:01

Bharat Soni

2,9026 gold badges26 silver badges56 bronze badges

Comments

David Ewen · Accepted Answer · 2013-10-25 06:17:01Z

0

You could create a proper object. This even allows you call init in the constructor if you wan't.

function Step() { this.init(); }

Step.prototype.init = function() { this.events(); };

Step.prototype.events = function() {
    var self = this;
    $(document).on('click', '.form-line li', function(e) {
        e.preventDefault();
        self.changeCategoryValue($(this));
    });

    $(document).on('click', '.alert-form .confirm', function(e) {
        e.preventDefault();
        $.fancybox.close(true);
    });
};

Step.prototype.changeCategoryValue = function(el) {
    cat = el.hasClass('has-sub') ? '' : el.data('id');
    title = el.hasClass('has-sub') ? '' : el.data('title');
    $('#cat-title').val(title);
    $("input[name='category']").val(cat);
};

var step1 = new Step();

edited Oct 25, 2013 at 6:17

answered Oct 25, 2013 at 6:09

David Ewen

3,7321 gold badge22 silver badges31 bronze badges

3 Comments

zamnuts Over a year ago

Overall this is best, but still has the self variable which the OP doesn't want (fct in their implementation).

David Ewen Over a year ago

In case the OP is worried about using self it is quite a standard javascript pattern stackoverflow.com/questions/962033/…

zamnuts Over a year ago

I agree, per my comment on the question itself, but nevertheless OP would like to see alternatives.

Grundy · Accepted Answer · 2013-10-25 06:30:59Z

you can try use clojure like this:

step1 = (function(){
            function events(){
                $(document).on('click', '.form-line li', function(e) {
                    e.preventDefault();
                    changeCategoryValue($(this));
                });

                $(document).on('click', '.alert-form .confirm', function(e) {
                    e.preventDefault();
                    $.fancybox.close(true);
                });
            }
            function changeCategoryValue(el) {
                cat = el.hasClass('has-sub') ? '' : el.data('id');
                title = el.hasClass('has-sub') ? '' : el.data('title');
                $('#cat-title').val(title);
                $("input[name='category']").val(cat);
            }
            function init(){
                events();
            }

            return {
                init:init,
                changeCategoryValue: changeCategoryValue
            }
        })()

Collectives™ on Stack Overflow

Calling function inside javascript class

5 Answers 5

3 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related