CODEWITHSUNDEEP
jqueryjquery-plugins
Ricardo Gomes
Ricardo Gomes

Reputation: 1266

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

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')  }
  );

Upvotes: 0

Views: 1523

Answers (2)

loganfsmyth
loganfsmyth

Reputation: 161457

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();
})

Upvotes: 2

zuo
zuo

Reputation: 1091

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;       
});

Upvotes: 0

Related Questions