jQuery load() causing a jQuery plugin error

Question

I have the following page:

<body>
  <div id="menuBar"> </div>
  <canvas id="myCanvas" width="700" height="700" style="border:1px solid #000000;"></canvas>
</body>

<script src="../Scripts/jQuery.mazeBoard.js"></script>
<script>
  $(document).ready(function () {
     var mazeArray = ...
     $("#menuBar").load("/Views/UpperMenu.html");
     $("#myCanvas").mazeBoard(mazeArray);
  })
</script>

mazeBoard is a jQuery plugin defined in mazeBoard.js:

(function ($) {

    $.fn.mazeBoard = function (mazeData) {

        this.element = $(this)[0];
        var context = this.element.getContext("2d");

        draw on canvas...

        return this;
    }
})(jQuery);

Strangely, unless I delete the row $("#menuBar").load("/Views/UpperMenu.html") I get a "mazeboard is not a function" error. This error disappears when the row is deleted.

Try to change jquery library another version.. it solves your problem.. — Senthil Kumar
– Senthil Kumar, Commented Jun 16, 2017 at 12:06
I get the same error. jonLuci, I get the error only when that line is not commented. — user1767774
– user1767774, Commented Jun 16, 2017 at 12:16
Simplest thing to try is to swap the order of the two lines; .mazeBoard() first, then .load(). — Roamer-1888
– Roamer-1888, Commented Jun 16, 2017 at 12:16
can you show us the contents of Views/UpperMenu.html ? you may have <script> tags which interfere — niceman
– niceman, Commented Jun 16, 2017 at 12:27

Roamer-1888 · Accepted Answer · 2017-06-16 12:26:40Z

1

Hard to say why this error might occur but probably to do with .load() being asynchronous.

Simplest thing to try is to swap the order of the two lines :

$(document).ready(function () {
    var mazeArray = ...
    $("#myCanvas").mazeBoard(mazeArray);
    $("#menuBar").load("/Views/UpperMenu.html");
});

If that doesn't work, then you can await completion of .load() before initializing .mazeBoard() :

$(document).ready(function () {
    var mazeArray = ...;
    $("#menuBar").load("/Views/UpperMenu.html", function() {
        $("#myCanvas").mazeBoard(mazeArray);
    });
});

answered Jun 16, 2017 at 12:26

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

jQuery load() causing a jQuery plugin error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related