jQuery plugins functions overwrite

Question

I have implemented several jQuery plugins for my current project.

Since some plugins have functions with the same name, the one called in the last one defined.

Here is the definition of my first plugin:

$(function($)
{
    $.fn.initPlugin1 = function(parameters)
    {
        var defaultParameters = {};
        $(this).data('parameters', $.extend(defaultParameters, parameters));
        return $(this);
    };

    $.fn.function1 = function(){ console.log('Function 1.'); };

    $.fn.callFunction = function(){ $(this).function1(); };
});

And here is the definition of my second plugin:

$(function($)
{
    $.fn.initPlugin2 = function(parameters)
    {
        var defaultParameters = {};
        $(this).data('parameters', $.extend(defaultParameters, parameters));
        return $(this);
    };

    $.fn.function2 = function(){ console.log('Function 2.'); };

    $.fn.callFunction = function(){ $(this).function2(); };
});

I have also this scenario :

$("#div1").initPlugin1().callFunction();
$("#div2").initPlugin2().callFunction();

For this specific scenario the consoles shows: Function 2. Function 2.

In fact, since the callFunction() is also defined in the second plugin, this is the one used.

I would like some advise on what is the best way to solve this problem. Is it possible to create a thing similiar to a namespace ?

`$.fn.callFunction` is the jquery plugin, why would you extext it to be different in two cases. So just don't use prototype method for this. — dfsq, Apr 27 '15 at 09:08
Do you want to be able to write like this also: `$("#div1").callFunction();` ? — dfsq, Apr 27 '15 at 09:09

syms · Answer 1 · 2015-04-27T13:14:46.620

0

you can try this,

$(function($) {
  $.fn.initPlugin1 = function() {
    console.log('Initialized Plugin1');
    return $(this);
  };


});
$(function($) {
  $.fn.initPlugin2 = function() {
    console.log('Initialized Plugin2');
    return $(this);
  };

  $.fn.callFunction = function(param) {
    $(this).append(param);
  };
});
(function($) {
  $(document).ready(
    function() {
      $("#div1").initPlugin1(); //Run correctly
      $("#div2").initPlugin2(); //Run correctly

      $("#div1").initPlugin1().callFunction('function1');
      $("#div2").initPlugin2().callFunction('function2');
    });

})(jQuery);

edited Apr 27 '15 at 13:14

answered Apr 27 '15 at 09:11

syms

413
2
12

This way `initPlugin1` is not called. – dfsq Apr 27 '15 at 09:12
Did the job ! Thanks for your help ;) – Félix Veysseyre Apr 27 '15 at 09:33
@syms I was refactoring my code with your method when I got a strange error: `TypeError: Cannot read property 'createDocumentFragment' of null`. Apparently, the `this` object is not the same as before. I was using this plugin structure: $(function($) { $.fn.initPlugin1 = function() { return $(this); }; $.fn.initPlugin1.function1 = function() { $(this).append('Function 1.'); }; $.fn.initPlugin1.callFunction = function() { $(this).initPlugin1.function1(); }; }); – Félix Veysseyre Apr 27 '15 at 12:37
@syms I have created a new example to demonstrate the problem. – Félix Veysseyre Apr 27 '15 at 13:05
@Syms Sure It will work but that's not what I want to do. Each plugin should have its own `testFunction` since the content of this one differs from a plugin to an other. – Félix Veysseyre Apr 27 '15 at 13:45

score 0 · Answer 2 · answered Apr 27 '15 at 13:03

Thank to @syms answer, I have created the following example.

Plugin1:

$(function($) {
    $.fn.initPlugin1 = function() {
        console.log('Initialized Plugin1');
        return $(this);
    };

    $.fn.initPlugin1.testFunction = function() {
        $(this).append('Function 1.');
    };
});

Plugin2:

$(function($) {
    $.fn.initPlugin2 = function() {
        console.log('Initialized Plugin2');
        return $(this);
    };

    $.fn.initPlugin2.testFunction = function() {
        $(this).append('Function 2.');
    };
});

Main:

(function($)
{
    $(document).ready(
        function()
        {
            $("#div1").initPlugin1(); //Run correctly
            $("#div2").initPlugin2(); //Run correctly

            $("#div1").initPlugin1.testFunction(); //Fail
            $("#div2").initPlugin2.testFunction(); //Fail
        });

})(jQuery);

When I run my code, I got the following error: Cannot read property 'createDocumentFragment' of null.

Apparently, the this object is corrupted.

jQuery plugins functions overwrite

2 Answers2