How to pass a function as an argument of a jQuery plugin

Question

I'm trying to write a simple jQuery plugin to show an alert box (custom html + css) and bind the yes an no buttons to functions passed as an argument of the plugins call.

Here's my code so far:

(function($) {
$.fn.triggerAlert = function (msg,yes,no) {
    $('#alert_mask').find("span:first").html(msg);
    $('#alert_mask').toggle();

    $('#alert_mask #alert_yes').click(function (yes) {
        if (typeof yes == 'function') { 
            yes($(this));
        }
        $('#alert_mask').hide();
        return false;       
    });

    $('#alert_mask #alert_no').click(function (no) {
        if (typeof no == 'function') { 
            no($(this));
        }
        $('#alert_mask').hide();
        return false;       
    });

}   
})(jQuery);

Is this in the right track or is it just plain wrong?

Thanks

UPDATE: after Logan F. Smyth answer I had to make an ajustment because the click events of the yes and no buttons here being defined several times. For future reference or for someone else benefit here is the complete plugin.

(function($) {
  $.fn.triggerAlert = function (trigger,msg,yes,no) {
    var mask = $('#alert_mask');
    $(trigger).click(function (e) {
        mask.find("span:first").html(msg);
        mask.toggle();
        e.preventDefault();
    });

    $('#alert_yes').click(function (e) {
      if (yes) yes($(this));
      mask.hide();
      e.preventDefault(); 
    });
    $('#alert_no').click(function (e) {
      if (no) no($(this));
      mask.hide();
      e.preventDefault();
    });
  }   
})(jQuery);

And an example of how to call it

 $().triggerAlert(
    $('#some_element'),
    'hello world',
    function() { alert('yes') },
    function() { alert('no')  }
  );

Not as I expected. I tested passing the alert function as arguments, and the alert is called as I call the plugin instead of in the click functions of the buttons — Ricardo Gomes
– Ricardo Gomes, Commented Dec 14, 2011 at 2:08

loganfsmyth · Accepted Answer · 2011-12-14 15:20:50Z

2

The main issue I see is that your click handlers take 'no' and 'yes' arguments, which means that inside of those functions, yes and no won't be what you passed to the overall plugin.

It's also unneccesary to have your selects use two ids, since ids are unique anyway. Finally return false is a bad idea, use preventDefault instead.

(function($) {
  $.fn.triggerAlert = function (msg,yes,no) {
    var mask = $('#alert_mask');
    mask.find("span:first").html(msg);
    mask.toggle();

    $('#alert_yes').click(function (e) {
      if (yes) yes($(this));
      mask.hide();
      e.preventDefault(); 
    });
    $('#alert_no').click(function (e) {
      if (no) no($(this));
      mask.hide();
      e.preventDefault();
    });
  }   
})(jQuery);

To trigger this, you would call the function and pass two functions like this:

$('#some_element').click(function(e){
  $(this).triggerAlert(
    'hello world',
    function() { alert('yes') },
    function() { alert('no')  }
  );
  e.preventDefault();
})

edited Dec 14, 2011 at 15:20

answered Dec 14, 2011 at 2:11

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

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

7 Comments

Ricardo Gomes Over a year ago

Then how to I passed the functions to the click handler. If I don't set them as arguments the they are undefined when the click appends

loganfsmyth Over a year ago

A function can see all the variables in the functions that wrap around it, so they can see 'yes' and 'no' automatically. I've added some code to my answer. Also the 'this' passed to your callback is going to me the #alert_yes and no elements, not mask. is that what you want?

Ricardo Gomes Over a year ago

Thank for you interest but still the behavior is the same. and there is a part of your code that is not what I need. You're hiding and toggling an inner span that has the message, and I have to toggle an outter div.

loganfsmyth Over a year ago

You are right, the toggle part was incorrect. I've fixed it now. What other part isn't working? Can you show how you are actually calling this function with the arguments and such?

loganfsmyth Over a year ago

In that, you are executing both alert functions, and then passing the result of those functions to your triggerAlert code. You need to pass functions that, when executed, will trigger the alerts. I have updated my answer with an example. Also, don't use return false.

|

zuo · Accepted Answer · 2011-12-14 02:16:29Z

0

parameters are in the function scope, you can try like this

  $('#alert_mask #alert_no').click(function() {
    if (typeof no == 'function') { 
        no($(this));
    }
    $('#alert_mask').hide();
    return false;       
});

answered Dec 14, 2011 at 2:16

zuo

1,1111 gold badge12 silver badges27 bronze badges

3 Comments

Ricardo Gomes Over a year ago

When the click happens no is undefined

zuo Over a year ago

How do you do initialization with triggerAlert

Ricardo Gomes Over a year ago

$('#some_element').click(function(){$(this).triggerAlert('hello world',alert('yes'),alert('no')); return false;})

Collectives™ on Stack Overflow

How to pass a function as an argument of a jQuery plugin

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related