jQuery plugin's $ collides with jQuery's $

274
June 17, 2017, at 5:00 PM

I have 3 js files, call them myJavascript.js, myPlugin.js and the jQuery libary. The files themselves are relatively long, so I try to convey the issue without copying the entire scripts. In the html file using them, I've included the js files in the following order:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="resources/js/myPlugin.js"></script>
<script src="resources/js/myJavascript.js"></script>

I've written the plugin in the following structure: myPlugin.js :

(function ($) {
    local variables...
    //several functions with the form
    $.fn.funcName = function(parameters) { body };
    //several function used internally
    function funcName(parameters) { body }
}(jQuery));

In myJavascript.js, I'm using only methods defined in the plugin (just like using jQuery methods), and it's working. However, when I tried to invoke a jQuery method (authentic one, not from the plugin) before invoking plugin function, I got the error:

Uncaught TypeError: $(...).mazeBoard is not a function

To give a concrete example:

    /* when this block exists, the call to mazeBoard throws the error */
    /* when I remove this block, the call to mazeBoard works perfectly */
    {
        $(function () {
            jQuery("#navigationMenu").load("nav.html");
            loadSettings();
        });
    }
    /********************/
    {
        ...local variables...
        function getSingleGame() {
            ...body...
            $.getJSON(url, function (data) {
                //this is some function in myJavascript.js
                var mazeData = makeMazeData(data.Maze, data.Rows, data.Cols);
                //this is call to function from my plugin
                mymaze = $('#mazeCanvas').mazeBoard(mazeData);
                alert('success');
            }).fail(function () {
                alert('error!');
            });
        }
    }

Anyone knows what's the problem? If everything seems to be fine, I'll try to add more details.

READ ALSO
Apply a CSS rule for a specific button that belongs to a class

Apply a CSS rule for a specific button that belongs to a class

I have for example a web page that displays blog postsEach blog posts has a 'comment' button and a 'like' button

197
How can single-page AngularJS app set og-meta-tags (for Facebook OpenGraph) in the controller?

How can single-page AngularJS app set og-meta-tags (for Facebook OpenGraph) in the controller?

I have a single-page AngularJS AppI want my meta-tag og:title to be populated dynamically by my controllers for Facebook Open Graph and other scrapers (like Slack) to post rich-links on social media sites

197
Unhandled promise rejection from promise called within Try

Unhandled promise rejection from promise called within Try

I have a promise function called findProperty which in this case rejects like this:

358
Toggle Brush Presets Panel using Javascript

Toggle Brush Presets Panel using Javascript

Got stuck in creating a script that can toggle the brush presets panel or most default panel in photoshop

317