How to call an external function from inside a plugin

Question

I would like to call from within my plugin an external function and I wish the external function could read the value date-id of the button that was invoked.

plugin.js

;(function ($, window, document, undefined) {

// Function-level strict mode syntax
'use strict';

 $.fn.Plugin = function(options) {
    var options = $.extend({}, $.fn.Plugin.defaults, options);
    return this.each(function() {
        var $this = $(this);
        $.each(options.commands, function(el, fc) {
            $this.on('click', '.' + el, function(e) {
                //options.callback.call(fc);
            });
        });
    });
};

$.fn.Plugin.defaults = {
    commands: {
        add: "addFunc",
        edit: "editFunc",
        del: "deleteFunc",
        show: "showFunc"
    },
    callback: function() {}
};

})(jQuery, window, document);

index.php

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<script>
    $(function() {
        $('#grid').Plugin();
    });
    function editFunc() {
        alert($(this).attr('data-id'));
    }
</script>
</head>

<html>
<body>
dinamic table
<table>
    <tr>
        <td>001</td>
        <td>
            <button type="button" class="btn btn-warning btn-xs edit" data-id="001"><span class="glyphicon glyphicon-edit"></span></button>
            <button type="button" class="btn btn-danger btn-xs delete" data-id="001"><span class="glyphicon glyphicon-trash"></span></button>
        </td>
    </tr>
    <tr>
        <td>002</td>
        <td>
            <button type="button" class="btn btn-warning btn-xs edit" data-id="002"><span class="glyphicon glyphicon-edit"></span></button>
            <button type="button" class="btn btn-danger btn-xs delete" data-id="002"><span class="glyphicon glyphicon-trash"></span></button>
        </td>
    </tr>
    ...
</table>

How could I do that? Thank you

A. Wolff · Accepted Answer · 2015-07-10 10:00:54Z

1

editFunc() should be set on global scope (or plugin scope), not wrapped in document pseudo ready handler and your options should be function references, not strings.

So:

$.fn.Plugin = function (options) {
    var options = $.extend({}, $.fn.Plugin.defaults, options);
    return this.each(function () {
        var $this = $(this);
        $.each(options.commands, function (el, fc) {
            $this.on('click', '.' + el, function (e) {
                fc.call(this);
            });
        });
    });
};

$.fn.Plugin.defaults = {
    commands: {
        add: addFunc,
        edit: editFunc,
        "delete": deleteFunc, // 'delete' is a reserved word
        show: showFunc
    },
    callback: function () {}
};

$(function () {
    $('table').Plugin();
});



function editFunc() {
    alert('call editFunc');
}

edited Jul 10, 2015 at 10:00

answered Jul 10, 2015 at 9:39

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

8 Comments

Paolo Rossi Over a year ago

I tried as you suggested but I get this error: TypeError: fc.call is not a function.

Paolo Rossi Over a year ago

Otherwise you can do this by creating dynamic callback taking them from options.commands?

A. Wolff Over a year ago

@PaoloRossi Works here: jsfiddle.net/aho6mtd9 Now check what is fc in your code, i told it shouldn't be string BUT function reference, e.g edit: editFunc, not edit: "editFunc",. If for some reasons, you want to use string (but why should you?), then you could use: window[fc].call(this);

A. Wolff Over a year ago

@PaoloRossi Otherwise you can do this by creating dynamic callback taking them from options.commands? Not sure to understand what you mean?!

Paolo Rossi Over a year ago

Create callback editFunc, addFunc, etc from commands so I can call when I initialize the plugin. $('table').Plugin( { editFunc: function() { // some action }); . Thanks a lot

|

Collectives™ on Stack Overflow

How to call an external function from inside a plugin

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related