creating and calling functions in jquery

Question

I'm new with jquery and I'm having problems in constructing functions. I need some help on this one? I'm not sure I've done the correct thing with this functions?

Please explain what is rong in how I wrote the next functions or tell me how to build the correct syntax The function member.panel.init('login') doesn't do the right thing.

member = {};
member.panel = function(){
    return{
    init: function(a)
    {   
        $('#log_in .login').click(open_menu(a));
        $('#log_in .register').click(open_menu(a));
    },

    open_menu: function(what)
    {
         if(what!='login' || what!='register') what='login';
         $('#q_login_dialog #menu-'+what+'').addClass("q_dialog_panel_item_active");
         if(what=='login')
         {
            $('.q_dialog_content #dialog-form3').css("display", "none");
            $('.q_dialog_content #dialog-form2').css("padding-bottom", "20px");
            $(".login-box").fadeIn('fast'); 
         }
         if(what=='register')
         {
            $('.q_dialog_content #dialog-form2').css('display', '');
            $('.q_dialog_content #dialog-form3').css("padding-bottom", "20px");
            $(".login-box").fadeIn('fast'); 
         }   
    }
}
}();
$(function () {
   member.panel.init('login');
});

$('#log_in .login').click(open_menu(a)); should be $('#log_in .login').click(function(){open_menu(a)}); — Rob W
– Rob W, Commented Dec 4, 2011 at 13:33
Have a look at Functions and Working with Objects.... your problem is not jQuery related. — Felix Kling
– Felix Kling, Commented Dec 4, 2011 at 13:36

RightSaidFred · Accepted Answer · 2011-12-04 14:08:45Z

1

When you do this:

open_menu(a)

...you're calling that function. For a handler, you want to pass a function to click(). The way you're doing it, it looks like you want to retain the value that is passed to init. This would mean that you need to have your open_menu function return a function that references that value.

Unfortunately, you don't show a function named open_menu that is accessible that way. Your open_menu function is the member of an object, so that's how you need to access it.

Your code should look like this:

member = {};
member.panel = function () {
    return {
        init: function (a) { // use "this.open_menu" to refer to the function
            $('#log_in .' + a).click(this.open_menu(a));
        },
        open_menu: function (what) {

            // "open_menu" now returns a handler function that references "login"
            return function () {
                if (what != 'login' || what != 'register') what = 'login';
                $('#q_login_dialog #menu-' + what + '').addClass("q_dialog_panel_item_active");
                if (what == 'login') {
                    $('.q_dialog_content #dialog-form3').css("display", "none");
                    $('.q_dialog_content #dialog-form2').css("padding-bottom", "20px");
                    $(".login-box").fadeIn('fast');
                }
                if (what == 'register') {
                    $('.q_dialog_content #dialog-form2').css('display', '');
                    $('.q_dialog_content #dialog-form3').css("padding-bottom", "20px");
                    $(".login-box").fadeIn('fast');
                }
            };
        }
    }
}();
$(function () {
    member.panel.init('login');
    member.panel.init('register');
});

Or here's an alternative that is closer to Rob W's comment, but fixes the open_menu function reference.

member = {};
member.panel = function () {
    return {
        init: function (a) {
            var self = this;
            $('#log_in .' + a).click(function() {
                self.open_menu(a); 
            });
        },

        open_menu: function (what) {
            if (what != 'login' || what != 'register') what = 'login';
            $('#q_login_dialog #menu-' + what + '').addClass("q_dialog_panel_item_active");
            if (what == 'login') {
                $('.q_dialog_content #dialog-form3').css("display", "none");
                $('.q_dialog_content #dialog-form2').css("padding-bottom", "20px");
                $(".login-box").fadeIn('fast');
            }
            if (what == 'register') {
                $('.q_dialog_content #dialog-form2').css('display', '');
                $('.q_dialog_content #dialog-form3').css("padding-bottom", "20px");
                $(".login-box").fadeIn('fast');
            }
        }
    }
}();
$(function () {
    member.panel.init('login');
    member.panel.init('register');
});

edited Dec 4, 2011 at 14:08

answered Dec 4, 2011 at 13:42

RightSaidFred

11.3k38 silver badges36 bronze badges

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

7 Comments

RightSaidFred Over a year ago

@sorin: Yes, the code in your init isn't quite right. Instead of binding both at the same time, make it two separate calls to init, passing 'login' then 'register'. But first remove one of the two jQuery lines in init, and change the other to look like this: $('#log_in .' + a).click(this.open_menu(a));, or like this if you used the second example: $('#log_in .' + a).click(function() { self.open_menu(a); });

RightSaidFred Over a year ago

Updated. Now you're concatenating the value of a into the jQuery selector, so it will look like '#log_in .login' for the first call, and '#log_in .register' for the second call.

sorin Over a year ago

Thanks very much for your help. I've done what you said and also changed the if condition in menu_open() to if (what != 'login' && what != 'register') what = 'login';

RightSaidFred Over a year ago

@sorin: Ah yes, I didn't spot that. Glad it's working for you.

sorin Over a year ago

If your still there I have a question!! If I'm using the second example with var self=this why if I drop var selft and use direct this.open_menu(a) insted of self.open_menu(a) the function isn't runing correctly

|

devnull69 · Accepted Answer · 2011-12-04 13:50:41Z

0

Rob W is right

Just for explanation: The first parameter for .click() is supposed to be a function reference. In your code the first parameter is the result of the immediate call(!) to the function open_menu() with parameter a. Only if the result (the return value) of this call were a function reference this would result in a valid .click() parameter.

If you move your code into an anonymous function() like Rob W proposed, it will result in a function reference (to this anonymous function) which will only be executed when the click event is fired.

edited Dec 4, 2011 at 13:50

answered Dec 4, 2011 at 13:41

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

2 Comments

sorin Over a year ago

Well I have run the code after I made the modification from Rob W but I still got no result's from the function.

RightSaidFred Over a year ago

@sorin: Rob W's comment was almost correct, but not quite. Try the code in my answer. I provided two variations on the same concept. Either should work for you.

Collectives™ on Stack Overflow

creating and calling functions in jquery

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related