Why is this jquery extension not working?

Question

I have this extension function and it seems to be not causing any problems. But as soon as I try to use it, I get an error message: Object doesn't support property or method 'n2name'

No errors are reported in the plug-in code (snippet pasted below for reference, with a link to the full file at the end).

Does anyone have any idea why this isn't working?

Note: I'm trying to fix an issue on this open-source project: https://github.com/n2cms/n2cms/issues/279 and there may be more useful details on that Github bug.

Sorry if this question is too vague, and for the long code snippet (most of it probably isn't relevant). But any help would really be appreciated

/**
* n2name 0.2
*/

(function($) {

    /* some code removed for brevity */

    $.fn.n2name = function(options) {
        var invokeUpdateName = function(){
            updateName(options.titleId, options.nameId, options.whitespaceReplacement, options.toLower, options.replacements, options.keepUpdatedBoxId);
        };
        if(options.keepUpdatedBoxId){
           /* more code removed for brevity */
        }
    };
})(jQuery);;

Link to jquery.n2name.js full source, if the code snippet above is not useful: https://github.com/n2cms/n2cms/blob/4469580fcdd9c91f7576f07c3d2c8a4479ed6ce9/src/Mvc/MvcTemplates/N2/Resources/Js/plugins/jquery.n2name.js

Answer 1

The errors "Object doesn't support property or method <name>" (IE) and "<name> is not a function" (Chrome) usually mean that your jQuery plugin didn't successfully load before it was called.

This can be due to a failed request (check Dev Tools' Network tab), forgetting/misplacing the plugin's script tag or the script tag having defer/async attributes. Another possible cause is the plugin's script containing syntax errors (check the Dev Tools' Console tab in that case).

Having multiple versions of jQuery in the same page (as commented in OP's linked GH issue) is another possibility, seeing as plugins wrapped in the (function(){}(jQuery)); boilerplate are only added to the jQuery object referenced by window.jQuery at the time the plugin script loads.

---

In this specific case, OP was having issues to load the plugin from localhost inside VS.

I've seen similar issues, and I'll just add that it is invalid to use protocol-less URLs (for example: //somecdn.com/library.js) when loading files from a file:/// URI scheme. This is because protocol-less URLs "inherit" the protocol being used from the parent document and file:/// is not a protocol. In case you're loading it from a local server (e.g. parent document served through http as in http://localhost/library.js) the protocol-less URLs should work fine.